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