小程序开发踩坑之旅

zxh2459917510 2021-09-07 原文

关于this的绑定

这个应该也不算是小程序专有的坑了，但之前写的东西没碰到这次写小程序遇到了就顺便记录一下

问题描述：我要做一个获取用户的openid的环节，于是在js里面有了这块代码

....
onLoad: function (options) {
    //获取openId
      wx.login({
        success: function (res) {
          console.log(res.code)
          //发送请求
          wx.request({
            url: \'https://api.weixin.qq.com/sns/jscode2session?appid=APPIDsecret=\'+appsecret+\'&js_code=\'+res.code+\'&grant_type=authorization_code\', //接口地址
            data: {},
            header: {
              \'content-type\': \'application/json\' //默认值
            },
            success: function (info) {
              console.log(info.data)
              console.log("修改之前")

　　　　　　　　　　this.setData({

　　　　　　　　　　　　openid: info.data.openid

　　　　　　　　　　});

              console.log("修改之后")
            }
          })
        }
      })
  },
.......

在success那里出了问题，我的setData死活没修改我data里面的openid项，控制台也只报修改之前，没有修改之后，尝试各种方法最后得知是this绑定的概念没搞清楚，听别的说this是js里面最容易混淆的几种概念之一，因此借此机会认真学习一下，这里转载一个别人写的博客，关于this绑定机制。

https://www.cnblogs.com/xiaohuochai/p/5735901.html

而我这个问题最终的解决方案很简单，就是咋wx.login代码块之外提前定义变量that来存贮外部绑定的this

onLoad: function (options) {
    //获取openID
    var that = this;
      wx.login({
        success: function (res) {
          console.log(res.code)
          //发送请求
          wx.request({
            url: \'https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=\'+appsecret+\'&js_code=\'+res.code+\'&grant_type=authorization_code\', //接口地址
            data: {},
            header: {
              \'content-type\': \'application/json\' //默认值
            },
            success: function (info) {
              console.log(info.data)
              console.log("修改之前")
              that.setData({
              id: "info.data.openid"
            });
              console.log("修改之后")
            }
          })
        }
      })
 
  },