當(dāng)用戶進(jìn)入微信小程序登陸時(shí)，會(huì)出現(xiàn)一個(gè)登錄界面，比如獲取用戶用戶頭像和昵稱等，這些在微信小程序開發(fā)者而言，是可以獲取用戶數(shù)據(jù)的，下面就為大家介紹小程序各種姿勢(shì)實(shí)現(xiàn)登錄的方法 

在本篇文章所講的登錄不僅僅指的是wx.login而是包括以下三點(diǎn)--

• 獲取用戶基本信息
• 調(diào)用微信wx.login接口
• 實(shí)現(xiàn)服務(wù)器端登錄

我需要獲取用戶頭像和昵稱要怎么做？

用戶頭像和昵稱對(duì)于我們開發(fā)小程序幾乎算是剛需，那么我們應(yīng)該怎么樣正確高效的獲取&利用它們呢？

舊時(shí)代--自動(dòng)授權(quán)一把梭

新時(shí)代--使用小程序的open-data

使用open-data時(shí)需要注意小程序基礎(chǔ)庫(kù)的版本。具體使用方式如下

其實(shí)可以將open-data看作圖片或字符串，想要控制樣式在外層加上view標(biāo)簽以及相應(yīng)的class即可。

相比之前獲取用戶基本信息的方式，這個(gè)方案還是比較走心的，如果一些小程序只是對(duì)用戶的頭像昵稱等基本信息有需求的話就不需要和以前一樣大費(fèi)周章的調(diào)一個(gè)getUserInfo，拿回來(lái)一堆用不上的東西。

我需要用戶在服務(wù)器端實(shí)現(xiàn)登錄該怎么做？

按照微信小程序的文檔，能在服務(wù)器端完成登錄（獲取用戶session_key/openid等），有三個(gè)前端傳回的參數(shù)是必不可少的：

• code
• encryptedData
• iv

code是通過(guò)wx.login獲取的，而encryptedData & iv是從wx.getUserInfo中獲取的。

但是，因?yàn)槲⑿呕A(chǔ)庫(kù)更新，取消通過(guò)api調(diào)用getUserInfo的能力，需要使用button組件的開放能力[open-type]去調(diào)用getUserInfo方法。

上述獲取數(shù)據(jù)的方法具體建議閱讀官方文檔：

有關(guān)getUserInfo的文檔

有關(guān)login的文檔

踩坑心得：請(qǐng)確保wx.login早于getUserInfo，不僅是代碼執(zhí)行層面的早，最好是login回調(diào)成功之后才去getUserInfo，不然可能會(huì)出現(xiàn)后端解密失敗的情況，導(dǎo)致登錄失敗。

（還可以通過(guò)API方式調(diào)用getUserInfo的時(shí)候如何實(shí)現(xiàn)后端登錄就不在此贅述了。）

盡管已經(jīng)無(wú)法自動(dòng)授權(quán)，我們還可以這樣實(shí)現(xiàn)小程序的登錄授權(quán)

總體來(lái)說(shuō)有兩種授權(quán)模式，一種是強(qiáng)制授權(quán)，另一種則是按需授權(quán)，無(wú)論是怎么樣的流程基本都可以歸類為這兩種授權(quán)。

強(qiáng)制授權(quán)

• 適用范圍：對(duì)用戶身份強(qiáng)依賴的小程序，用戶一進(jìn)來(lái)就必須要知道用戶的相關(guān)信息，或者是用戶一進(jìn)來(lái)就必須根據(jù)用戶id來(lái)拉取相關(guān)資源。

• 授權(quán)模式：模式多種，但共同特點(diǎn)都是會(huì)打斷用戶正常進(jìn)入小程序的流程，體驗(yàn)上有點(diǎn)瑕疵，在此列出兩種模式：

  • 不跳轉(zhuǎn)頁(yè)面，無(wú)論點(diǎn)擊頁(yè)面中的任何地方都會(huì)彈出授權(quán)彈窗，(沒(méi)有將鼠標(biāo)點(diǎn)擊錄進(jìn)去，實(shí)際是無(wú)論點(diǎn)哪都會(huì)觸發(fā)授權(quán))↓↓

   

  這種方案的實(shí)現(xiàn)方式其實(shí)很簡(jiǎn)單也很粗暴--將一個(gè)覆蓋全屏的button組件以position: fixed的方式蓋在需要這樣登錄的頁(yè)面上，然后將其opacity設(shè)為0即可。

   

  • 跳轉(zhuǎn)頁(yè)面，檢測(cè)到非登錄用戶則強(qiáng)制跳轉(zhuǎn)到登錄頁(yè)，在里面進(jìn)行登錄邏輯的處理。

   

  就個(gè)人而言，還是比較喜歡這種授權(quán)模式的，和微信自己生態(tài)內(nèi)的授權(quán)有些許相似，對(duì)用戶來(lái)說(shuō)不會(huì)那么突兀。

  具體實(shí)現(xiàn)方式--相比上一種就復(fù)雜一些了，這一種方式屬于全局性質(zhì)的攔截授權(quán)，會(huì)中斷當(dāng)前頁(yè)面的所有動(dòng)作，跳轉(zhuǎn)至登錄專用的頁(yè)面，在登錄頁(yè)登錄成功后再返回原頁(yè)面。

   

按需授權(quán)

• 適用范圍：對(duì)用戶身份規(guī)劃十分明確、可以接受在用戶做出某些動(dòng)作之后再獲取用戶身份的小程序。

• 授權(quán)模式：不會(huì)打斷小程序頁(yè)面的主流程，將授權(quán)加入主流程中。實(shí)現(xiàn)方式也是十分靈活，無(wú)論是列表或是圖片甚至是一段文字，只要是需要用戶手動(dòng)觸發(fā)的，都可以作為授權(quán)的發(fā)起時(shí)機(jī)。

  與上述強(qiáng)制授權(quán)中不跳轉(zhuǎn)頁(yè)面的方式類似，但是有一個(gè)巨大的差異--這種方式不會(huì)強(qiáng)制用戶授權(quán)，而是在需要授權(quán)時(shí)才會(huì)出現(xiàn)，相對(duì)沒(méi)有這么騷擾使用小程序的用戶。

以上就是微信小程序登錄授權(quán)界面如何開發(fā) ，更多小程序開發(fā)文檔可以關(guān)注網(wǎng)站。

HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面，所看即所得，只需要美工就能做出精美商城。更多小程序請(qǐng)查看：小程序商店