uniapp微信小程序登录（先授权微信后授权手机号）-- （1）

1.操作流程

①点击登录按钮，实现微信授权。

②授权允许后弹出绑定手机号授权。

③手机号授权成功后，跳转回登录界面。

2.逻辑流程

①登录之前自动加载出微信的code。

②微信登录后，将获取的微信信息（昵称、头像等）以及后台算出的openid、unionid等保存/更新到数据库的会员表中，并返回算出的session_key+会员信息。

③判断会员信息中手机号是否为空。如果手机号为空，获取手机号授权；否则返回登录界面。

④获取手机号授权，允许后在后台解密。得到手机号。更新数据库中会员表的手机号。

----------------------------------------------------------------------------------------------------------------------------

 

3.相关参数/组件/api

 

①开放接口-登录（wx.login）

功能：调用接口获取登录凭证（code）

微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

object.success 回调函数：code--用户登录凭证，有效期5分钟，每次登录都会更新，需要在服务器后台调用 auth.code2Session，使用 code 换取 openid 和 session_key 等信息。

注意：auth.code2Session的使用在本文档后边。

 

②微信授权-授权弹窗（wx.getSetting）

功能：获取用户当前的授权状态。

微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html

scope 列表：用户信息（wx.getUserInfo）、地理位置（wx.getLocation, wx.chooseLocation）等，更多可在微信官方文档中查看。此处用到用户信息。

 

③开放接口-用户信息（wx.getUserInfo）

功能：获取用户信息

微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html

参数：withCredentials（是否带上登录态信息）、lang（显示用户信息语言，简体中文：zh_CN）等。

object.success 回调函数：userInfo--对象，用户信息（微信用户昵称、图片url、性别等）；encryptedData--完整用户信息的加密数据；iv--加密算法的初始向量；

注意：userinfo对象的详细信息参照微信官方文档（https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/UserInfo.html）。

 

④指南-获取手机号（getPhoneNumber）

功能：获取微信用户绑定的手机号。需要先调用wx.login，需要用户主动触发才能发起接口，需要通过button触发。

使用方法：

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

返回参数：encryptedData--完整用户信息的加密数据；iv--加密算法的初始向量；

加密后得到参数：phoneNumber--用户绑定的手机号。 json 结构。

微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html