微信小程序之数据请求

本文主要是介绍微信小程序之数据请求，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信小程序的数据请求有点类似于ajax异步请求
还是举一个例子来看一下：
首先我们弄一个按钮来请求数据，并为其绑定事件

<button type="primary" bindtap="getdata">请求数据</button>

type 表示类型，颜色为 微信绿

这里我们请求数据使用 wx:request
其参数为
url 开发者服务器接口地址
data 请求的参数
header 设置请求的 header，header 中不能设置 Referer。content-type 默认为application/json
timeout 超时时间，单位为毫秒
method HTTP 请求方法
success 接口调用成功的回调函数
fail 接口调用失败的回调函数

在 .js 文件中
数据设置，为了*之后把请求的数据存储在data

 /**
     * 页面的初始数据
     */
    data: {
datalist:[]
    },

getdata(){
        wx.request({
          url: 'https://query.asilu.com/aweme/info/?id=6932395632497839374',
          method: "GET",
          success: (result) => {
              //console.log(result.data)
              this.setData({
                  datalist:result.data.desc
              })
          },
          fail: (res) => {},
          complete: (res) => {},
        })
    },

注意：
我这里请求的是 https://api.asilu.com/ 网站里的抖音视频信息
微信小程序里与前端设计不同之处：
1.跨域限制
2.添加安全域名
添加安全域名：首先在小程序申请网站开发管理）——开发设置——服务器域名 中修改request合法域名。 然后在微信者开发工具——详情——项目配置的合法域名 中看看有没有添加的域名（记得刷新）

请求的数据：

然后我们可以使用视图组件 view 来把数据调用。如果有多组数据，就可以通过 列表渲染 来用所有数据（wx:for）。
这里我只有一组数据，所以就直接使用了。

<view>{{datalist}}</view>

结果：

想了解更多的可参看 微信开发文档之wx:request。

这篇关于微信小程序之数据请求的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！