當用戶進入微信小程序登陸時，會出現一個登錄界面，比如獲取用戶用戶頭像和昵稱等，這些在微信小程序開發者而言，是可以獲取用戶數據的，下面就為大家介紹小程序各種姿勢實現登錄的方法 

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

• 獲取用戶基本信息
• 調用微信wx.login接口
• 實現服務器端登錄

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

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

舊時代--自動授權一把梭

新時代--使用小程序的open-data

使用open-data時需要注意小程序基礎庫的版本。具體使用方式如下

其實可以將open-data看作圖片或字符串，想要控制樣式在外層加上view標簽以及相應的class即可。

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

我需要用戶在服務器端實現登錄該怎么做？

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

• code
• encryptedData
• iv

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

但是，因為微信基礎庫更新，取消通過api調用getUserInfo的能力，需要使用button組件的開放能力[open-type]去調用getUserInfo方法。

上述獲取數據的方法具體建議閱讀官方文檔：

有關getUserInfo的文檔

有關login的文檔

踩坑心得：請確保wx.login早于getUserInfo，不僅是代碼執行層面的早，最好是login回調成功之后才去getUserInfo，不然可能會出現后端解密失敗的情況，導致登錄失敗。

（還可以通過API方式調用getUserInfo的時候如何實現后端登錄就不在此贅述了。）

盡管已經無法自動授權，我們還可以這樣實現小程序的登錄授權

總體來說有兩種授權模式，一種是強制授權，另一種則是按需授權，無論是怎么樣的流程基本都可以歸類為這兩種授權。

強制授權

• 適用范圍：對用戶身份強依賴的小程序，用戶一進來就必須要知道用戶的相關信息，或者是用戶一進來就必須根據用戶id來拉取相關資源。

• 授權模式：模式多種，但共同特點都是會打斷用戶正常進入小程序的流程，體驗上有點瑕疵，在此列出兩種模式：

  • 不跳轉頁面，無論點擊頁面中的任何地方都會彈出授權彈窗，(沒有將鼠標點擊錄進去，實際是無論點哪都會觸發授權)↓↓

   

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

   

  • 跳轉頁面，檢測到非登錄用戶則強制跳轉到登錄頁，在里面進行登錄邏輯的處理。

   

  就個人而言，還是比較喜歡這種授權模式的，和微信自己生態內的授權有些許相似，對用戶來說不會那么突兀。

  具體實現方式--相比上一種就復雜一些了，這一種方式屬于全局性質的攔截授權，會中斷當前頁面的所有動作，跳轉至登錄專用的頁面，在登錄頁登錄成功后再返回原頁面。

   

按需授權

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

• 授權模式：不會打斷小程序頁面的主流程，將授權加入主流程中。實現方式也是十分靈活，無論是列表或是圖片甚至是一段文字，只要是需要用戶手動觸發的，都可以作為授權的發起時機。

  與上述強制授權中不跳轉頁面的方式類似，但是有一個巨大的差異--這種方式不會強制用戶授權，而是在需要授權時才會出現，相對沒有這么騷擾使用小程序的用戶。

以上就是微信小程序登錄授權界面如何開發 ，更多小程序開發文檔可以關注網站。

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