基本功能开发

官方推荐小程序登录时序图

了解这个流程对后续的开发很有必要

image

Unionid 机制

如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 UnionID 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 UnionID 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid是相同的。

基于这个机制，在设计账号登录的时候，就可以考虑将 unionid 作为第三方登录的唯一标示，即使当前只有一个小程序或者一个公众号， 也应该用unionid 而不是 openid

授权登录

获取 authorization code

api : wx.login

wx.login({
    success: res => {
    const { code } = res;
        // 请求后端服务器， 后端完成验证后，设置自定义登录态，
       // 如果希望在设定自定义登录态时同时保存用户基本信息，
      // 可通过 wx.getUserInfo 获取基本信息后，一起提交到后端
   }
})

获取 用户基本信息

api: wx.getUserInfo

wx.getUserInfo({
  success: res => {
    const { encryptedData, iv, userInfo } = res;
    // encryptedData, iv 等可用于解密得到目标数据
   }
})

获取手机号

api: getPhoneNumber

需要按钮触发, 后端需要用 sessionKey 解密加密过的数据

• 按钮触发

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>

• js code

getPhoneNumber (e) {
   console.log(e.detail.encryptedData)
   console.log(e.detail.iv)
}

关于 解密数据

链接含 sessionKey 的解释
解密数据链接

开发中遇到的坑

• 加密数据 encryptedData 字符串中 + 在传输到后端后，+ 被转化成空格， 解密提示 Illegal Buffer
  解决方式：
  • 方法1:对数据进行编码，保证 + 不转化为空格
  • 方法2: 对 encryptedData 的空格，全局替换为+ 后再解密

关于 getUserInfo 返回的 encryptedData

encryptedData： 解密后其实可以得到基本信息及 unionid, openid 等信息，接口设计的时候，可以不用前端传 userInfo 等数据到后端

可参考以下文章，整合小程序，公众号，微信开发平台应用

设计可拓展的账号系统【二】：支持微信、QQ、 微博第三方登录