微信小程序|【小程序】一文读懂微信小程序登录流程及获取手机号微信小程序|小程序

文章图片

目录
一、小程序的登录流程
首次登录
再次登录的时候，就要判断存储的session_key是否过期了
二、小程序怎么获取手机号
总结
一、小程序的登录流程
文章图片

首次登录

调用小程序api接口 wx.login() 获取临时登录凭证code ，这个code是有过期时间的.
将这个 code 回传到开发者服务器（就是请求开发者服务器的登录接口，通过凭证进而换取用
户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等）
拿到开发者服务器传回来的会话密钥（session_key）之后，前端需要保存起来.

wx.setStorageSync('sessionKey', 'value')

再次登录的时候，就要判断存储的session_key是否过期了
1. 获取缓存中的session_key， wx.getStorageSync('sessionKey')
2. 果缓存中存在session_key，那么调用小程序api接口 wx.checkSession() 来判断登录态是否过期，回调成功说明当前 session_key 未过期，回调失败说明 session_key 已过期。登录态过期后前端需要再调用 wx.login()获取新的用户的code，然后再向开发者服务器发起登录请求.
3. 一般在项目开发，开发者服务器也会对用户的登录态做过期限制，所以这时在判断完微信服务器中登录态如果没有过期之后还要判断开发者服务器的登录态是否过期。（请求开发者服务器给定的接口进行请求判断就好）
二、小程序怎么获取手机号1.准备一个 button 组件 ,将button组件open - type的值设置为getPhoneNumber，当用户点击并同意之后，可以通过bindgetphonenumber事件回调获取到动态令牌code;

Page({ getPhoneNumber (e) { console.log(e.detail.code) } })

2.接着把code传到开发者后台，并在开发者后台调用微信后台提供的phonenumber.getPhoneNumber接口，消费code来换取用户手机号。每个code有效期为 5 分钟，且只能消费一次。

getPhoneNumber: function (e) { var that = this; console.log(e.detail.errMsg == "getPhoneNumber:ok"); if (e.detail.errMsg == "getPhoneNumber:ok") { wx.request({ url: 'http://localhost/index/users/decodePhone', data: { encryptedData: e.detail.encryptedData, iv: e.detail.iv, sessionKey: that.data.session_key, uid: "", }, method: "post", success: function (res) { console.log(res); } }) } }

注：getPhoneNumber返回的code与wx.login返回的code作用是不一样的，不能混用 .注：从基础库2.21.2开始，对获取手机号的接口进行了安全升级 ,需要用户主动触发才能发起获取手机号接口，所以该功能不由API来调用，需用button组件的点击来触发。另外，新版本接口不再需要提前调用wx.login进行登录 .总结 【微信小程序|【小程序】一文读懂微信小程序登录流程及获取手机号】本篇文章给大家分享了微信小程序开发过程中用户登录及获取手机号的方法。