微信小程序登錄流程的開發(fā)

今天的“小程序課”，我們請來了開發(fā)哥來分享讓用戶微信登錄的姿勢。

用戶通過小程序可以快速獲取服務，因此在訪問小程序的第一個頁面非常重要。

小程序和小游戲內(nèi)的用戶登錄，我們推薦使用以下兩種方式獲取用戶信息：

? 按鈕組件的登錄方式，用戶主動點擊按鈕可以拉起用戶授權彈框，獲取用戶頭像、昵稱等信息;

? 在不獲取用戶信息的情況下，可展示用戶頭像昵稱。

也提醒大家：

用戶在沒有任何操作的情況直接彈出授權的登錄方式將逐漸不再支持，受影響的有 wx.getUserInfo 接口，以及 wx.authorize 接口傳入 scope="scope.userInfo" 的情況。

1為什么平臺要做接口調(diào)整?

我們提供wx.login 和 wx.getUserInfo 接口，用于獲取用戶的 openID 和基本信息。

推出這兩個接口的初衷是希望：

當用戶使用小程序時，只有訪問到真正需要登錄的頁面，才需要授權并登錄。

對于一個互聯(lián)網(wǎng)產(chǎn)品而言，第一個頁面決定了用戶對這個產(chǎn)品的認知，用戶會選擇是否繼續(xù)使用這個產(chǎn)品。

一個優(yōu)秀的互聯(lián)網(wǎng)產(chǎn)品，能夠給用戶留下一個好的第一印象，用戶可以快速了解你的產(chǎn)品，接收到你想要傳遞的服務信息，從而產(chǎn)生相應的操作行為。

一個優(yōu)秀的小程序會吸引用戶在小程序里進行探索，完成你期望他們?nèi)プ龅氖?，比如會員注冊、商品購買等。

試想一下如果一個品牌的商品官網(wǎng)，一進入要求用戶登錄才能查看產(chǎn)品信息是什么感覺呢?

因此良好的用戶登錄體驗非常重要。

2如何設計登錄流程?

用戶打開小程序時，看第一眼的時候，開發(fā)者需要專注以下兩個目標：

? 精準快速地傳達產(chǎn)品理念，開發(fā)者要讓用戶能夠快速了解自己的產(chǎn)品和服務;

? 將用戶流量進行轉化，讓用戶能方便操作或者交易。

一般而言，用戶打開小程序后看到的第一個頁面，先不要直接彈出授權框，第一個頁面可以包含以下內(nèi)容：

? 展示你的小程序功能(如產(chǎn)品、服務、活動等) ，讓用戶清晰地知道小程序是做什么用的，這些內(nèi)容可以是你的精選內(nèi)容;

? 激發(fā)用戶的探索欲，通過描述或者圖片吸引用戶注意力;

? 按照自己的產(chǎn)品目標，給用戶提供清晰明確的下一步操作(查看詳情、購買等)。

如果某些特殊小程序在使用前一定需要用戶登錄，或者已經(jīng)進行到需要用戶登錄的操作時，可以將 button 組件(其中 open-type 屬性指定為 getUserInfo)放置到頁面中，頁面上可以大致說明以下要點：

接下來在頁面上放置一個明顯的登錄按鈕， 建議這個頁面上不要有額外的點擊區(qū)域，以免分散用戶注意力，讓用戶專注于登錄這件事情。

3簡單的開發(fā)建議

1當用戶打開小程序時訪問第一個頁面時，先通過 wx.login，獲取用戶 openID 。這時無需彈框授權，開發(fā)者拿到 openID 可以建立自身的帳號 ID。

2在第一步中，拿到 openID 后，判斷是新用戶還是老用戶。如果是老用戶，可以直接登錄;如果是新用戶，可先在小程序首頁展示你的信息服務，讓用戶對這個小程序有大概的了解，再引導用戶進行下一步的操作。

3當需要獲取用戶頭像昵稱的時候，對用戶展示一個登錄頁面，這個頁面只有一個最重要的操作，引導用戶進行登錄。

小程序中，在頁面中加入一個 button 按鈕，并將 open-type 屬性設置為 getUserInfo 。

以小程序為例：

對于功能較簡單的小程序或者小游戲而言，如果不是必須要獲得用戶的頭像昵稱，建議可先通過wx.login 拿到 openID 后，使用 open-data 方式或者開放數(shù)據(jù)域的方式展示用戶信息，整個過程都無需用戶授權。

Tips：

1、在用戶登錄后，開發(fā)者需要存儲用戶的 unionID，而且建議只把 unionID 作為互通的用戶標識，不要直接使用 unionID 作為用戶 ID。因為一旦小程序遷移到其他的開放平臺下，unionID 是會改變的，而 openID 是不變的。

2、用 button 組件的方式獲得用戶授權后，調(diào)用 wx.getUserInfo 就可以直接獲取用戶信息。這個的意義在于獲取過一次之后，用戶有可能改昵稱頭像，因此為了及時同步，最好是定期獲取用戶信息。

這里兩個小提示：

? 定期使用 wx.getUserInfo 獲取并更新用戶的信息;

? 如果用戶授權過一次之后，又在設置中關掉了授權(或者本地刪除了小程序)，那這時再調(diào)用 wx.getUserInfo 也是不會成功的，需要重新獲得授權。