解决微信小程序bindgetphonenumber和wx.login获取的code不同步问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了解决微信小程序bindgetphonenumber和wx.login获取的code不同步问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

解决微信小程序bindgetphonenumber和wx.login获取的code不同步问题

微信小程序使用手机号快速验证组件在获取用户手机号的时候，经常会因为提交参数的code和iv、encryptedData参数匹配不一致而报错。其根本原因在官方有相应的解释：注意使用旧版本组件时，需先调用wx.login接口。所以在用户点了拒绝之后授权之后，需要重新获取调用wx.login获取最新code。解决微信小程序bindgetphonenumber和wx.login获取的code不同步问题
所以，基于code需要在bindgetphonenumber事件的回调之前获取，这里给出一个比较合理且通用的解决方案：文章来源地址https://www.toymoban.com/news/detail-501901.html

利用wx.checkSession校验当前code的有效性。

// 检查最新的微信code
  getLastNewCode(code) {
    return new Promise(resolve => {
      wx.checkSession({
        success: () => {
          // session_key 未过期，并且在本生命周期一直有效
          console.log('检查最新的微信code: session_key 未过期');
          resolve(code);
        },
        fail: async () => {
          // session_key 已经失效，需要重新执行登录流程
          // 重新登录
          console.log('session_key 已经失效: 开始重新授权');
          const wxCode = await getWxCode();
          this.setData({ wxCode });
          resolve(code);
        }
      });
    });
  },

在bindgetphonenumber回调里面对code进行校验

  // 获取用户手机号
  async getPhoneNumber(e) {
    console.log('getPhoneNumber:', e);
    const {
      detail: { encryptedData, iv, errMsg }
    } = e;
    const {
      data: { wxCode }
    } = this;
    // 获取最新登录code
    const code = await this.getLastNewCode(wxCode);
    if (errMsg != 'getPhoneNumber:ok') {
      return;
    }
    // 1.获取用户手机号--接口请求
    parsePhoneNumber({ code, encryptedData, iv })
      .then(data => {
        console.log('parsePhoneNumber:', data);
        this.setData({ mobile: data.purePhoneNumber });
        this.handelContinue();
      })
      .catch(() => {});
  },