微信小程序实现获取用户手机号getPhoneNumber详细操作步骤

步骤如下:
(1)小程序端调用 wx.login方法获取用户登录凭证code,将code发送给小程序后台服务器;服务器调用登录凭证校验接口(需要传参appid+appsecret+code),进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等,将这些信息存入缓存中。

// 官方实例如下:
wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://test.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})

注意
session_key会失效哦,多长时间失效微信不告诉你,可以通过wx.checkSession()方法校验用户当前session_key是否有效。

// 官方实例如下:
wx.checkSession({
  success: function(){
    //session_key 未过期,并且在本生命周期一直有效
  },
  fail: function(){
    // session_key 已经失效,需要重新执行登录流程
    wx.login() //重新登录
    ....
  }
})

注意
现在微信很注重用户体验,getPhoneNumber方法需要用户主动去触发才能调用的

wxml代码片.

// 官方实例如下:
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">授权获取</button>

js代码片

// 官方实例如下:
   getPhoneNumber: function (e) {
        console.log(e.detail.errMsg)
        console.log(e.detail.iv)
        console.log(e.detail.encryptedData)
    }

打印数据 console.log(e):.
微信小程序实现获取用户手机号getPhoneNumber详细操作步骤_第1张图片

通过getPhoneNumber可以获取encryptedData,iv参数

注意
sessionKey不建议服务器返回给小程序端做逻辑处理,这里只做getPhoneNumber方法的讲解

 getPhoneNumber: function (e) {
        console.log(e.detail.errMsg)
        //授权后的处理
        if (e.detail.errMsg == "getPhoneNumber:ok") {
            //用户信息
            let params = {
                encrypdata:e.detail.encryptedData,
                ivdata: e.detail.iv,
                sessionkey:this.data.userInfo.sessionKey
            }
            console.log('参数', params)
            //后端获取参数进行解密
            Api.getPhoneNumber(params).then(datas => {
                console.log('手机号码',res)
            })
        }
    }

打印返回结果 console.log(result):.
微信小程序实现获取用户手机号getPhoneNumber详细操作步骤_第2张图片

你可能感兴趣的:(微信小程序,小程序,前端)