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

今天的“小程序課”，我們請(qǐng)來(lái)了開(kāi)發(fā)哥來(lái)分享讓用戶微信登錄的姿勢(shì)。

用戶通過(guò)小程序可以快速獲取服務(wù)，因此在訪問(wèn)小程序的第一個(gè)頁(yè)面非常重要。

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

? 按鈕組件的登錄方式，用戶主動(dòng)點(diǎn)擊按鈕可以拉起用戶授權(quán)彈框，獲取用戶頭像、昵稱等信息;

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

也提醒大家：

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

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

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

推出這兩個(gè)接口的初衷是希望：

當(dāng)用戶使用小程序時(shí)，只有訪問(wèn)到真正需要登錄的頁(yè)面，才需要授權(quán)并登錄。

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

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

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

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

因此良好的用戶登錄體驗(yàn)非常重要。

2如何設(shè)計(jì)登錄流程?

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

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

? 將用戶流量進(jìn)行轉(zhuǎn)化，讓用戶能方便操作或者交易。

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

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

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

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

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

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

3簡(jiǎn)單的開(kāi)發(fā)建議

1當(dāng)用戶打開(kāi)小程序時(shí)訪問(wèn)第一個(gè)頁(yè)面時(shí)，先通過(guò) wx.login，獲取用戶 openID 。這時(shí)無(wú)需彈框授權(quán)，開(kāi)發(fā)者拿到 openID 可以建立自身的帳號(hào) ID。

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

3當(dāng)需要獲取用戶頭像昵稱的時(shí)候，對(duì)用戶展示一個(gè)登錄頁(yè)面，這個(gè)頁(yè)面只有一個(gè)最重要的操作，引導(dǎo)用戶進(jìn)行登錄。

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

以小程序?yàn)槔?/p>

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

Tips：

1、在用戶登錄后，開(kāi)發(fā)者需要存儲(chǔ)用戶的 unionID，而且建議只把 unionID 作為互通的用戶標(biāo)識(shí)，不要直接使用 unionID 作為用戶 ID。因?yàn)橐坏┬〕绦蜻w移到其他的開(kāi)放平臺(tái)下，unionID 是會(huì)改變的，而 openID 是不變的。

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

這里兩個(gè)小提示：

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

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