按照我写的Demo阐述下,三种方法都可以,看各自的需求使用吧
方式一: 以点击事件的形式 :// 其他页面内容就不展示了,按照自己的结构去渲染数据<button type="button" bindtap="test">点击请求接口</button >
Page({data: {// 接收请求过来的数据listDate: ''}});test() {// 为确保this指向不发生改变,可以固定下this指向//使用this的时候用that代替即可var that = thiswx.request({// 注意,如果小程序开启校验合法域名时必须使用https协议//在测试的情况下可以不开启域名校验url: '这里是要请求接口的地址',data: {// 接口设置的固定参数值canOne: '1',canTwo: '2'...},// 请求的方法method: 'GET', // 或 ‘POST’// 设置请求头,不能设置 Refererheader: {'content-type': 'application/json' // 默认值},// 请求成功时的处理success: function (res) {// 一般在这一打印下看看是否拿到数据console.log(res.data)if (res.statusCode == 200) {var array = res.datathat.setData({// 将res.data保存在listDate方便我们去循环遍历listDate: res.data// 统计所有数据deviceNum: array.length})}},// 请求失败时的一些处理fail: function () {wx.showToast({icon: "none",mask: true,title: "接口调用失败,请稍后再试。",});}})}
方式二:在onLoad函数中
/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 可以将上面`test`方法中的代码直接写在onLoad生命周期函数//等页面加载完就可以自动请求接口,获取数据},
方式三:使用方法调用的形式,定义一个方法如上面的test方法
将网络请求放在其中,然后在onLoad
中调用,这也是在开发中经常用到的形式,更显得代码规范,易维护。
/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 可以将上面的test视为一个方法,然后在onLoad生命周期函数中调用//和方式二一样就不用绑定点击事件了this.test()},
PS:使用这种方式都后期需要更改接口公共路径,比如:更改接口域名的时候会显得非常麻烦,每个接口都需要找出来进行更改,既然如此麻烦那不如封装下request请求,将请求接口的公共路径单独拿出来,到后期需要更改的时候只需要更改公共路径就可以了。相关代码已经整理好了,需要的可以前往查看,希望可以给同胞们带来帮助。关于如何封装wx.request
请求,请点击查看我的另一篇文章