【微信小程序】获取手机号码

在看微信小程序开发文档的时候看到很好有意思的内容，内容如下：

获取手机号

获取微信用户绑定的手机号，需先调用wx.login接口。
因为需要用户主动触发才能发起获取手机号接口，所以该功能不由 API 来调用，需用 button 组件的点击来触发。

使用方法

需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据， 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。

注意*

在回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。

解析

这意思就是想获取微信的手机号码你仅仅只能绑定一个button，然后通过button的open-type来获取用户点击了获取手机号按钮的回调，但是前提你还要调用wx.login接口，否则再次调用可能会出现刷新的问题，综上所述发现在获取手机号的时候是一件麻烦的事情，再次查询，发现wx.login接口返回的code中有效时间在5分钟内，所以思想是进入界面后就调用wx.login然后设置一个定时，如果超过5分钟用户未点击获取手机号按钮则定时器再一次启动，自动调用wx.login接口，获取最新的code以防code过期。

实现

微信登录接口

  /*
  * 微信登录接口
  * */
  wxLoginRequest: function () {
    let that = this;
    wx.login({
      success(res) {
        if (res.code) {
          console.log('wx.login接口返回的code: '+ res.code);
          that.data.code = res.code;
        }
      }
    });
  },

定时器的实现：

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.wxLoginRequest();
    let that = this;
    /*给个定时器,每次间隔一定的时间更新一次code以防数据出现问题,手机号获取失败问题*/
    this.interval = setInterval(function () {
      // console.log('测试间隔5秒调用一次!');
      that.wxLoginRequest();
    },  240000 );// 4分钟调用一次
  },

注意：

定时器要移除操作，否则定时一直工作，移除代码如下：

 /*
  * 取消此界面的定时器
  * */
  clearInterval: function () {
    //console.log('取消此界面的定时器');
    if (this.interval) {
      clearInterval(this.interval);
      this.interval = null;
    }
  },

在请求成功、失败、页面消失的时候都应该结束定时器，以防出现定时器反复请求的问题。

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.clearInterval();
  },

wxml布局

index.js回调：

  /*
  * 获取用户加密手机信息
  * */
  getPhoneNumber: function  (mobileData) {

    if (mobileData.detail.errMsg === 'getPhoneNumber:ok' ){
      let parms = {
        iv: mobileData.detail.iv,
        encryptedData: mobileData.detail.encryptedData,
        code: this.data.code,
        appkey:'yytbuyer'
      };
    //  console.log('数据: '+JSON.stringify(parms));
      
      wx_login(parms).then(async res => {
        if (res?.success) {
          // console.log('登录返回的数据: '+res?.success);
          this.clearInterval();
         console.log('--登录成功，做登录的事情。');
          
        } else {
          console.log('--登录失败！');
          this.wxLoginRequest();
        }
      }).catch(e => {
         console.log('--登录失败！');
        this.wxLoginRequest();
      });
    }else {
      this.wxLoginRequest();
      console.log('用户未授权!');
    }

  },

注意--说明：

有关手机号解密的问题，是服务端处理的解密逻辑，解密时需要服务端配合使用 AppID(小程序ID)：和 AppSecret(小程序密钥)： 这里的两个密钥要提供给服务端，服务端在根据解密规则去解密手机号就可以了。