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

按照我写的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请求，将请求接口的公共路径单独拿出来，到后期需要更改的时候只需要更改公共路径就可以了。