uniapp上如何實(shí)現(xiàn)小程序的微信登錄功能？下面本篇文章給大家分享一下uniapp上小程序的微信登錄功能的具體操作流程，希望對(duì)大家有所幫助！

之前寫過(guò)一篇介紹uniapp開發(fā)微信登錄功能，那是個(gè)安卓app版本，今天介紹下在小程序上如何實(shí)現(xiàn)微信登錄，那篇文章沒(méi)有說(shuō)到微信登錄服務(wù)端接口這塊，這篇文章里會(huì)提到具體的接口設(shè)計(jì)及表結(jié)構(gòu)設(shè)計(jì)思路。相比app，在微信小程序上實(shí)現(xiàn)微信登錄還是比較方便的，因?yàn)樯倭藨?yīng)用id的生成過(guò)程，不過(guò)前提也是要有一個(gè)微信開放平臺(tái)，如果沒(méi)有的話要到官網(wǎng)注冊(cè)一個(gè)賬號(hào)。

接下來(lái)就講下步驟，流程比較簡(jiǎn)單，需要注意一點(diǎn)的就是，每個(gè)小程序都是用郵箱注冊(cè)的，而且一個(gè)郵箱只能綁定一個(gè)小程序，所以一個(gè)人擁有的郵箱數(shù)直接限制了一個(gè)人擁有的小程序數(shù)量。

1、注冊(cè)開放平臺(tái)

這一步跟前面app的那個(gè)app微信登錄功能方法一樣的，網(wǎng)上有教程，注冊(cè)過(guò)程還有點(diǎn)麻煩，要用到企業(yè)信息，這里只是提一下，注冊(cè)一個(gè)開放平臺(tái)就夠用了，能滿足app、小程序、公眾號(hào)、網(wǎng)站等等共用，我只是為了這篇文章又提到了，畢竟文章雖小，五臟要全。

2、開發(fā)者資質(zhì)認(rèn)證

這塊跟之前是一樣的，因?yàn)樵陂_放平臺(tái)上的開發(fā)者資質(zhì)認(rèn)證通過(guò)之后，就給你開放了app、小程序、公眾號(hào)、網(wǎng)站等各平臺(tái)的微信開放功能權(quán)限，而且每個(gè)還能加多個(gè)，像小程序可以加50個(gè)。這么算起來(lái)的話，這300塊還是有點(diǎn)價(jià)值的。

3、添加小程序到開放平臺(tái)

這里填小程序的相關(guān)信息就可以了，下一步需要微信掃碼，沒(méi)太明白這個(gè)掃碼是什么意思，因?yàn)猷]箱跟微信關(guān)系不大，掃碼后小程序就成功綁定到開放平臺(tái)了。

點(diǎn)擊查看進(jìn)去看下，發(fā)現(xiàn)內(nèi)容非常少。

這里跟app綁定到開放平臺(tái)完全不同，其實(shí)也好理解，因?yàn)檫@畢竟是微信小程序，那微信小程序掛載到微信上本來(lái)就要基于微信的基礎(chǔ)權(quán)限，所以意思是說(shuō)微信小程序你直接可以用微信的幾乎所有功能了，只要你能開發(fā)出來(lái)，show me the code 就行了。

4、獲取AppSecret

在開發(fā)管理，開發(fā)設(shè)置里可以得到小程序密鑰，這個(gè)得到后就自己保存下，系統(tǒng)不幫你明文保存，如果后期丟了，你可以重置生成。密鑰在一般的小程序業(yè)務(wù)中用不到，只有在做微信開放功能(登錄、分享等)時(shí)才會(huì)用到。

5、微信登錄業(yè)務(wù)設(shè)計(jì)

微信登錄的業(yè)務(wù)在一般的互聯(lián)網(wǎng)產(chǎn)品上就是帶有注冊(cè)、登錄功能，但是在非互聯(lián)網(wǎng)產(chǎn)品上，一般不會(huì)讓普通微信用戶注冊(cè)的，都要是在本應(yīng)用上注冊(cè)的用戶。所以這個(gè)登錄，需要將普通用戶與微信賬號(hào)進(jìn)行綁定。

業(yè)務(wù)流程依然是微信登錄功能中這張圖里的業(yè)務(wù)：

那問(wèn)題來(lái)了，如何實(shí)現(xiàn)登錄呢? 這篇文章重點(diǎn)就要講清楚上圖中登錄這塊的具體內(nèi)容。

這里有張微信官方的登錄業(yè)務(wù)設(shè)計(jì)圖，可以理解下，這個(gè)圖對(duì)于剛開始做的人來(lái)說(shuō)有點(diǎn)復(fù)雜，不要緊，可以按我下面分析的來(lái)就大概知道思路了。

下面是我結(jié)合項(xiàng)目實(shí)際情況的具體的業(yè)務(wù)分析， 具體內(nèi)容分前后端兩塊來(lái)說(shuō)：

前端業(yè)務(wù)

比如小明在手機(jī)上用微信登錄，他如果是首次登錄，就要用一個(gè)系統(tǒng)賬號(hào)綁定，比如admin賬號(hào)，他得完成兩步操作：1、微信授權(quán)并獲取微信賬號(hào)信息；2、微信賬號(hào)綁定系統(tǒng)賬號(hào)；

第一步，獲取微信賬號(hào)信息，簡(jiǎn)單總結(jié)就是先獲得用戶授權(quán)，然后用開發(fā)者AppID及AppSecret調(diào)用特定的登錄接口得到用戶信息及openid等信息。

第二步，當(dāng)拿到這些信息后，還要回到前端界面，再給一個(gè)登錄操作界面，這一步，是用來(lái)輸入系統(tǒng)用戶名及密碼的。

后端業(yè)務(wù)

第二步操作在一個(gè)新用戶訪問(wèn)這個(gè)app時(shí)必須走的一步，這一步之后，系統(tǒng)用戶賬號(hào)信息和當(dāng)前用戶的微信信息(openid)就可以同時(shí)傳到后臺(tái)，登錄接口除了常規(guī)登錄驗(yàn)證，還要匹配這個(gè)openid,全對(duì)了才能登錄成功。系統(tǒng)賬號(hào)與openid是一對(duì)多的關(guān)系，這很容易理解，就是admin賬號(hào)，可以讓多個(gè)微信用戶登錄。當(dāng)然，如果當(dāng)前微信用戶是第一次登錄，那在登錄時(shí)就要插入一條當(dāng)前微信用戶與系統(tǒng)賬號(hào)的綁定信息。

前端這塊的業(yè)務(wù)，其實(shí)可以把微信登錄這塊進(jìn)行業(yè)務(wù)封裝，也做成服務(wù)后置來(lái)調(diào)用，因?yàn)锳ppID及AppSecret這些信息比較敏感，最好放后端存儲(chǔ)。

登錄業(yè)務(wù)實(shí)現(xiàn)

1、登錄授權(quán)并獲取臨時(shí)登錄憑證code

下面貼出了代碼，我具體分析下思路。微信登錄要彈出授權(quán)頁(yè)面，視圖層代碼有特殊格式，得這么寫"",然后在觸發(fā)按鈕事件方法時(shí)才會(huì)彈出授權(quán)頁(yè)面，授權(quán)后再調(diào)用uni.login這個(gè)api，這一步是獲取code，code相當(dāng)于一個(gè)憑證，是臨時(shí)的，每次調(diào)用都不同。前端拿到這個(gè)憑證，到后端調(diào)用服務(wù)端接口'wxlogin'

<button id="btnwx" class="login-wxpng" open-type="getUserInfo" @getuserinfo="xcxWxLogin"></button>

...

xcxWxLogin() {
				var self = this;
				uni.login({
					provider: &#39;weixin&#39;,
					success: function(res) {
						if (res.code) {
							//發(fā)起網(wǎng)絡(luò)請(qǐng)求
							uni.request({
								method: &#39;POST&#39;,
								url: &#39;http://************/wxlogin&#39;,
								data: {
									code: res.code
								},
								success(res) {
									//將openid存入本地緩存
									uni.setStorage({
										key: &#39;openid_key&#39;,
										data: res.data.openid
									});
									if (res.statusCode == 200 && res.data && res.data.username) {
										self.isFirstWXLogin = false;
										self.name = res.data.username;
										self.password = res.data.password;
										setTimeout(function() {
											self.tologin({
												username: res.data.username,
												password: res.data.password,
												encrypted: true
											})
										}, 0)
									} else {
										//首次登錄，可以跳轉(zhuǎn)到一個(gè)綁定賬號(hào)的頁(yè)面
										uni.navigateTo({
											url: &#39;wxlogin&#39;
										});
								}
							})
						} else {
							console.log(&#39;登錄失敗！&#39; + res.errMsg)
						}
					},
					fail(e) {
						console.log(e);
					},
					complete(e) {
						console.log(e);
					}
				});
			}

2、微信登錄并獲取用戶唯一標(biāo)識(shí)

這一步放在服務(wù)端，我用node寫的接口，提供你參考下：

router.post("/wxlogin", (req, res, next) => {
    //將請(qǐng)求地址的url后面的參數(shù)拼接起來(lái)
    var data = {
        'appid': config.appId,
        'secret': config.appSecret,
        'js_code': req.body.code,
        'grant_type': 'authorization_code'
    };
    console.log(data);
    // querystring的stringify用于拼接查詢
    var content = querystring.stringify(data);
    // 根據(jù)微信開發(fā)者文檔給的API
    var url = 'https://api.weixin.qq.com/sns/jscode2session?' + content;
    // 對(duì)url發(fā)出一個(gè)get請(qǐng)求
    request({
        'url': url
    }, (error, response, body) => {
        // 將body的內(nèi)容解析出來(lái)
        let abody = JSON.parse(body);
        // body里面包括openid和session_key
        console.log(abody)

        //根據(jù)openid查找用戶，如果查到則返回用戶名密碼登錄，否則直接提示登錄
        getAllUsers(abody, res)
    })
})

上面的代碼僅供參考，思路就是用appId、appSecret(這兩個(gè)在后端配置，或者存在數(shù)據(jù)庫(kù))及前端傳過(guò)來(lái)的code參數(shù)，調(diào)用接口'api.weixin.qq.com/sns/jscode2…

3、前端存入用戶信息到本地緩存

這一步在授權(quán)后就可以調(diào)用了，這個(gè)根據(jù)你實(shí)際需要來(lái)，可以不要，我用這個(gè)來(lái)存頭像、微信呢稱之類的。uni相關(guān)api不熟的可以先讀下api文檔。

uni.getUserInfo({
					provider: 'weixin',
					success: function(infoRes) {
						uni.setStorageSync('auth_service', infoRes.userInfo)
					}
				});

好了，小程序登錄的基本步驟到這里就結(jié)束了，希望有幫到你，如果有用就點(diǎn)個(gè)贊吧，謝謝！

推薦：《uniapp教程》

以上是uniapp上如何實(shí)現(xiàn)小程序的微信登錄功能（流程總結(jié)）的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！