微信小程序之数据请求

微信小程序的数据请求有点类似于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

上一篇:解决element-ui级联选择器,二级三级列表无法显示的解决办法


下一篇:视图层