微信小程序请求后台接口(完整版)

按照我写的Demo阐述下，三种方法都可以，看各自的需求使用吧

• 方式一： 以点击事件的形式 :

// 其他页面内容就不展示了，按照自己的结构去渲染数据
<button type="button" bindtap="test">点击请求接口</button >

Page({
	data: {
	    // 接收请求过来的数据
		listDate: ''
	  }
	});
	test() {
    // 为确保this指向不发生改变，可以固定下this指向
    //使用this的时候用that代替即可
    var that = this
    wx.request({
      // 注意，如果小程序开启校验合法域名时必须使用https协议
      //在测试的情况下可以不开启域名校验
      url: '这里是要请求接口的地址',
      data: {
        // 接口设置的固定参数值
        canOne: '1',
        canTwo: '2'
        ...
      },
      // 请求的方法
      method: 'GET', // 或 ‘POST’
      // 设置请求头，不能设置 Referer
      header: {
    		'content-type': 'application/json' // 默认值
  	  },
  	  // 请求成功时的处理
      success: function (res) {
        // 一般在这一打印下看看是否拿到数据
        console.log(res.data)
        if (res.statusCode == 200) {
          var array = res.data
          that.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请求，请点击查看我的另一篇文章