一.在js中的data对象中定义一个用于接收数据的空数组
这个数组我命名为resData。
二.在js中用wx.request发起网络请求
在测试的时候可以先把不校验合法域名给勾选上
wx.request({
//这里的url用的是新视觉实训的一个测试接口
url: 'https://edu.newsight.cn/wxList.php',
//success是接口调用成功的回调函数,这里习惯用res去接收返回值
success:res=>{
console.log(res)
}
})我们打印出res，在Console控制台可以看到↓
三.将接收到的所需数据赋值给空数组
这里记得要用setData赋值
wx.request({
//这里的url用的是新视觉实训的一个测试接口
url: 'https://edu.newsight.cn/wxList.php',
//success是接口调用成功的回调函数,这里习惯用res去接收返回值
success:res=>{
this.setData({
resData:res.data
})
}
})我们可以在AppData中查看是否成功接收数据
这样一个简单的网络请求的工作就完成啦！
扩展
我们可以把数据渲染到页面看看效果
resData这是个对象数组，我们下面就简单渲染下每项中的author看看吧
注意这里要用数据绑定{ Mustache 语法（双大括号）}将变量包起来
此时渲染成功但会看到控制台有如下警告，提示我们要指定key值
我们一般将key设置为*this,但如果是对象就不能这样了
我们可以设置为数组的index(索引值)
这里最好设置为id，因为它是真正唯一的
这个测试接口定义了接收的参数 多少项num 和 多少页page
如下面的num=3&page=2
我们可以在wx.request中添加data对象再写上要请求的参数
我们还可以利用请求参数做个下一页的小功能
写个按钮，给它绑定一个名为nextPage的事件
然后在js中将网络请求部分的代码封装成一个函数getList,1是参数p的默认值，最后写上如下代码
Page({
/**
* 页面的初始数据
*/
data: {
resData:[],
num:1
},
nextPage:function(){
this.data.num++
this.getList(this.data.num)
},
getList:function(p=1){
wx.request({
//这里的url用的是新视觉实训的一个测试接口
url: 'https://edu.newsight.cn/wxList.php',
data:{
num:8,
page:p
},
//success是接口调用成功的回调函数,这里习惯用res去接收返回值
success:res=>{
this.setData({
resData:res.data
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getList()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})这样每次点击按钮，num就会+1，然后再传参给page，实现页数+1
