微信小程序请求接口
官方给出的接口叫做wx.request，请求方式比较简单，下面是官网给出的请求实例。
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
- url：请求的接口地址
- data：请求参数
- header：请求头，包括host、User-Agent、Accept、Accpt-Language、Referer等
- method：请求方式：POST/GET
- success：当接口请求成功时，小程序就会自动触发这个函数，获取的是从服务器返回的数据（json）。请求成功后获取到的数据就是success函数的参数result。
- fail：当接口调用失败时，小程序就会触发这个函数，返回错误信息
- complete：接口调用结束的回调函数(调用成功、失败都会执行),通过that.setData将数据传递给WXML页面。
onLoad: function (options) {
//onLoad方法，页面只加载一次。
//onShow方法每次页面显示都会执行。
wx.showToast({ //显示消息提示框 此处是提升用户体验的作用
title: '数据加载中',
icon: 'loading',
});
wx.request({
url: 'test/test', //请求接口的url
method: 'GET', //请求方式
data: {},//请求参数格式为json
header: {
'content-type': 'application/json' // 默认值
},
complete() { //请求结束后隐藏 loading 提示框
wx.hideLoading();
},
success: res => {
this.setData({
data: res.data,
})
}
});
});
setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。
setData() 参数格式 ：
以key,value的形式表示将this.data 中的 key 对应的值改变成 value。
其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。
注意：
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致 。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
post请求，参数为键值对格式(参数内容类型为x-www-form-urlencoded)
wx.request({
url: 'http://192.168.1.103/yiji/skillList.php',
method: 'POST',
data:'pageSize=1&pageNum=10', //参数为键值对字符串
header: {
//设置参数内容类型为x-www-form-urlencoded
'content-type':'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
success: function (res) {
console.log(res.data)
that.setData({
items: res.data
})
}
})
wx.request请求回来的数据没有及时显示到页面上
onLoad: function () {
var that = this;
wx.request({
url:app.globalData.url.api.home,
success: function(res) {
var matchsFirst = xxx;
var matchsSecond= xxx;
var matchsLast= xxx;
//这样直接赋值并不会把数据渲染到页面上的
that.data.matchsFirst=matchsFirst;
that.data.matchsSecond=matchsSecond;
that.data.matchsLast=matchsLast;
}});
};
//应该安这种方式赋值
that.setData({
matchsFirst:matchsFirst,
matchsSecond:matchsSecond,
matchsLast:matchsLast
});
