微信小程序之三步简单上手如何使用后端提供的接口

一.在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