微信小程序获取手机号登录流程

微信小程序获取手机号登录流程

首先前端使用wx.login 获取code

   wx.login({
            success(res) {
                if (res.code) {
                    that.setData({
                        code: res.code
                    });
                }
            },
            fail(res) {
                console.log('获取凭证失败!' + res);
            }
        })

在wxml文件里面的加上按钮，通过按钮触发getPhoneNumber方法，button的open-type="getPhoneNumber"加上

 <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">

在getPhoneNumber(e)函数里面
前端调取后端给的接口把code传过去，后端使用 code 换取 openid、unionid、session_key 等信息；

 request.request('jscode2session', {
            code: this.data.code
        }, res => {
            if (res.status == 1) {
                that.setData({
                    session_key: encodeURIComponent(res.data.session_key)
                });
            }
 })

记住：发送请求时前端传参如果用encodeURIComponent()转码，后端也一定要用转码，前端如果不用后端也不用，一定要前后端保持一致，不然后端拿到之后请求微信接口会报错！！！

然后通过getPhoneNumber(e)函数的e这个对象里面获取iv和encryptedData；

 var iv = encodeURIComponent(e.detail.iv)
 var encryptedData = encodeURIComponent(e.detail.encryptedData);

因为第一次wx.login()拿到的code为了获取session_key已经使用过了，所以后端获取手机号所需的code需要再次通过wx.login()获取一下；
至此后端通过微信获取手机号所需要的四个参数都已经凑齐wx_code、session_key、encryptedData、iv；

wx.login({
      success(res) {
        if (res.code) {
          // 成功回调获取用户解密手机号
          request.request('login', {
            wx_code: res.code,
            session_key: that.data.session_key,
            encryptedData: encryptedData,
            iv: iv
          }, res => {
            console.log('打印后端返回的值')
          }, fail => {})
        }
      }
    })

至此微信小程序获取手机号前后端交互完成!!!