小程序登錄流程圖（具體詳情可看官網(wǎng)鏈接）：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html
小程序可以通過微信官方提供的登錄能力方便地獲取微信提供的用戶身份標識，快速建立小程序內(nèi)的用戶體系。

前端開發(fā)者需要做的任務(wù)是從小程序到開發(fā)者服務(wù)器這一條線路的工作。
開發(fā)者服務(wù)器到微信接口服務(wù)是后臺人員的解密拿openid和session_key的工作。

1、登錄流程解析
首次登錄：
1、首先需要調(diào)用小程序api接口 wx.login() 獲取 臨時登錄憑證code ，這個code是有過期時間的。
2、將這個code回傳到開發(fā)者服務(wù)器（就是請求開發(fā)者服務(wù)器的登錄接口，通過憑證進而換取用戶登錄態(tài)信息，包括用戶的唯一標識（openid）及本次登錄的會話密鑰（session_key）等）。
3、拿到開發(fā)者服務(wù)器傳回來的會話密鑰（session_key）之后，前端要保存wx.setStorageSync('sessionKey', 'value')

再次登錄的時候，就要判斷存儲的session_key是否過期了：
1、獲取緩存中的session_key，wx.getStorageSync('sessionKey')
2、如果緩存中存在session_key，那么調(diào)用小程序api接口wx.checkSession()來判斷登錄態(tài)是否過期，回調(diào)成功說明當前 session_key 未過期，回調(diào)失敗說明 session_key 已過期。登錄態(tài)過期后前端需要再調(diào)用 wx.login()獲取新的用戶的code，然后再向開發(fā)者服務(wù)器發(fā)起登錄請求。
3、一般在項目開發(fā)，開發(fā)者服務(wù)器也會對用戶的登錄態(tài)做過期限制，所以這時在判斷完微信服務(wù)器中登錄態(tài)如果沒有過期之后還要判斷開發(fā)者服務(wù)器的登錄態(tài)是否過期。（請求開發(fā)者服務(wù)器給定的接口進行請求判斷就好）。
4、無論是微信服務(wù)器過期了還是開發(fā)者服務(wù)器登錄態(tài)過期了，都要像首次登錄那樣開始三步驟。所以注意封裝代碼。

wx.checkSession()詳情了解：
https://developers.weixin.qq.com/miniprogram/dev/api/wx.checkSession.html

2、代碼封裝解析
通過上面的文字解析，我們把登錄流程進行封裝：
?

/**
* 用戶相關(guān)服務(wù) 登陸，檢查登錄態(tài)
*/
const api = require('api.js');  // 這里是本人對統(tǒng)一接口地址封裝
import {
HTTP
} from 'http.js'  // 這個是本人對wx.request()這個api進行了封裝

// 一般都把登錄代碼封裝為一個類，然后export 類出去。當多個組件使用到的時候就繼承這個類就可以使用登錄接口了。
class USER extends HTTP {  

/**
* Promise封裝登錄接口
* 判斷本地緩存是否有sessionKey
* 有的情況下判斷它是否過期
* **如果微信服務(wù)器沒過期，繼續(xù)從開發(fā)者服務(wù)器校驗是否過期
* ****如果沒過期，跳過登錄，過期則調(diào)用登錄接口
* **如果微信服務(wù)器登錄態(tài)過期，則調(diào)用登錄接口
* 沒有則說明無登錄態(tài)，調(diào)用登錄接口
*/
login() {
return new Promise((resolve, reject) => {
	let sessionKey = wx.getStorageSync('sessionKey')
	if (sessionKey) {
		console.log('sessionKey不為空')
		this._checkWXSession() //檢查用戶的登錄態(tài)在微信服務(wù)端是否過期
		.then(() => {
			console.log('微信后臺未過期>>>開始檢測開發(fā)者服務(wù)器登錄態(tài)')
			return this._checkSerSession() // 檢查用戶登錄態(tài)在開發(fā)者服務(wù)器端是否過期
		}).then(res => {
			console.log('sessionKey校驗通過')
			resolve()
		})
		.catch((res) => {
			console.log('sessionKey校驗未通過，過期了')
			this._wxLogin().then(res => {
				console.log(res)
				return this._serLogin(res.code)
			}).then(() => {
				resolve()
			})
		})
	} else {
		console.log('sessionKey為空，先微信服務(wù)器登錄，再進行開發(fā)者服務(wù)器登錄')
		this._wxLogin().then(res => {
			console.log(res)
			return this._serLogin(res.code)
		}).then(() => {
			resolve()
		})
	}
})
}

檢查微信服務(wù)器登錄態(tài)是否過期的代碼封裝：

/**
* Promise封裝wx.checkSession(),檢查微信服務(wù)器登錄態(tài)是否過期
*/
_checkWXSession() {
	return new Promise((resolve, reject) => {
		wx.checkSession({
			success: () => {
				resolve(true)
			},
			fail: () => {
				reject(false)
			}
		})
	})
}

檢查開發(fā)者服務(wù)器登錄態(tài)的代碼封裝：

/**
* Promise封裝開發(fā)者服務(wù)器sessionKey，檢查開發(fā)者服務(wù)器登錄態(tài)
*/
_checkSerSession() {
	return new Promise((resolve, reject) => {
		this.request({
			url: api.checkSession,
			header: {
			sessionKey: wx.getStorageSync('sessionKey')
			},
			method: 'POST'
			})
		.then(res => {
			resolve(res);
		})
		.catch(res => {
			reject(res)
			console.log('后臺登錄態(tài)過期')
		})
	})
}

wx.login()微信登錄接口api的封裝：

/**
* Promise封裝wx.login
*/
_wxLogin() {
	return new Promise((resolve, reject) => {
		wx.login({
			success: (res) => {
				if (res.code) {
					resolve(res);
				} 
				else {
					reject(res);
				}
			},
			fail: (err) => {
				reject(err);
			}
		})
	})
}

開發(fā)者服務(wù)器請求接口登錄的封裝：文章來源地址http://www.zghlxwxcb.cn/news/detail-492416.html

/**
* Promise封裝開發(fā)者服務(wù)器登陸（獲取登錄后的sessionKey）
*/
_serLogin(code) {
	return new Promise((resolve, reject) => {
		this.request({
			url: api.login,
			data: {
			code: code
			},
			method: 'post'
			})
		.then(res => {
			wx.setStorageSync('sessionKey', res.data)
			console.log('登錄成功的回調(diào)')
			resolve()
			})
		.catch(err => {
			this._show_error('開發(fā)者服務(wù)器登錄失敗')  //這個是消息提示框，在請求中封裝了，這里簡單理解錯誤彈出消息提示。
		})
	})
}

到了這里，關(guān)于微信小程序的登錄流程——代碼詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！