喜聞樂見的背景時間--由于最近接觸小程序比較多,又剛好經歷過小程序的自動登錄時代以及現在的點擊登錄時代。結合自己的實踐以及觀察到其他小程序的做法,就有了這篇小分享~
本文可能涉及的內容--
在本篇文章所講的登錄不僅僅指的是wx.login而是包括以下三點--
用戶頭像和昵稱對于我們開發小程序幾乎算是剛需,那么我們應該怎么樣正確高效的獲取&利用它們呢?
使用open-data時需要注意小程序基礎庫的版本。具體使用方式如下
其實可以將open-data看作圖片或字符串,想要控制樣式在外層加上view標簽以及相應的class即可。
相比之前獲取用戶基本信息的方式,這個方案還是比較走心的,如果一些小程序只是對用戶的頭像昵稱等基本信息有需求的話就不需要和以前一樣大費周章的調一個getUserInfo,拿回來一堆用不上的東西。
按照微信小程序的文檔,能在服務器端完成登錄(獲取用戶session_key/openid等),有三個前端傳回的參數是必不可少的:
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即可。
就個人而言,還是比較喜歡這種授權模式的,和微信自己生態內的授權有些許相似,對用戶來說不會那么突兀。
具體實現方式--相比上一種就復雜一些了,這一種方式屬于全局性質的攔截授權,會中斷當前頁面的所有動作,跳轉至登錄專用的頁面,在登錄頁登錄成功后再返回原頁面。
適用范圍:對用戶身份規劃十分明確、可以接受在用戶做出某些動作之后再獲取用戶身份的小程序。
授權模式:不會打斷小程序頁面的主流程,將授權加入主流程中。實現方式也是十分靈活,無論是列表或是圖片甚至是一段文字,只要是需要用戶手動觸發的,都可以作為授權的發起時機。
與上述強制授權中不跳轉頁面的方式類似,但是有一個巨大的差異--這種方式不會強制用戶授權,而是在需要授權時才會出現,相對沒有這么騷擾使用小程序的用戶。