微信小程序登錄流程的開(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)。