微信小程式授權 獲取使用者資訊
小程式在18年4月25日做了一次更新,不再支援直接彈出授權資訊框
使用者開啟小程式時,直接彈框獲取使用者資訊授權,可能會立馬懵圈:
你是誰?
我在哪裡?
我為什麼要同意?……
相當一部分使用者下意識會拒絕授權——這樣不合理的登入流程既造成了使用者的困擾,還流失了使用者。
使用者通過小程式可以快速獲取服務,因此在訪問小程式的第一個頁面非常重要。
小程式和小遊戲內的使用者登入,我們推薦使用以下兩種方式獲取使用者資訊:
▷ 按鈕元件的登入方式,使用者主動點選按鈕可以拉起使用者授權彈框,獲取使用者頭像、暱稱等資訊;
▷ 在不獲取使用者資訊的情況下,可展示使用者頭像暱稱。
也提醒大家:
使用者在沒有任何操作的情況直接彈出授權的登入方式將逐漸不再支援,受影響的有 wx.getUserInfo 介面,以及 wx.authorize 介面傳入 scope="scope.userInfo"
為什麼平臺要做介面調整?
小程式提供wx.login 和 wx.getUserInfo 介面,用於獲取使用者的 openID 和基本資訊。
推出這兩個介面的初衷是希望:
當用戶使用小程式時,只有訪問到真正需要登入的頁面,才需要授權並登入。
對於一個網際網路產品而言,第一個頁面決定了使用者對這個產品的認知,使用者會選擇是否繼續使用這個產品。
一個優秀的網際網路產品,能夠給使用者留下一個好的第一印象,使用者可以快速瞭解你的產品,接收到你想要傳遞的服務資訊,從而產生相應的操作行為。
一個優秀的小程式會吸引使用者在小程式裡進行探索,完成你期望他們去做的事,比如會員註冊、商品購買等。
試想一下如果一個品牌的商品官網,一進入要求使用者登入才能檢視產品資訊是什麼感覺呢?
因此良好的使用者登入體驗非常重要。
如何設計登入流程?使用者開啟小程式時,看第一眼的時候,開發者需要專注以下兩個目標:
▷ 精準快速地傳達產品理念,開發者要讓使用者能夠快速瞭解自己的產品和服務;
▷ 將使用者流量進行轉化,讓使用者能方便操作或者交易。
一般而言,使用者開啟小程式後看到的第一個頁面,先不要直接彈出授權框,第一個頁面可以包含以下內容:
▷ 展示你的小程式功能(如產品、服務、活動等) ,讓使用者清晰地知道小程式是做什麼用的,這些內容可以是你的精選內容;
▷ 激發使用者的探索欲,通過描述或者圖片吸引使用者注意力;
▷ 按照自己的產品目標,給使用者提供清晰明確的下一步操作(檢視詳情、購買等)。
如果某些
為什麼需要我授權?
需要我什麼資訊?
授權後我得到什麼好處呢?
接下來在頁面上放置一個明顯的登入按鈕, 建議這個頁面上不要有額外的點選區域,以免分散使用者注意力,讓使用者專注於登入這件事情。
簡單的開發建議1當用戶開啟小程式時訪問第一個頁面時,先通過 wx.login,獲取使用者 openID 。這時無需彈框授權,開發者拿到 openID 可以建立自身的帳號 ID。2在第一步中,拿到 openID 後,判斷是新使用者還是老使用者。如果是老使用者,可以直接登入;如果是新使用者,可先在小程式首頁展示你的資訊服務,讓使用者對這個小程式有大概的瞭解,再引導使用者進行下一步的操作。3當需要獲取使用者頭像暱稱的時候,對使用者展示一個登入頁面,這個頁面只有一個最重要的操作,引導使用者進行登入。小程式中,在頁面中加入一個 button 按鈕,並將 open-type 屬性設定為 getUserInfo 。
以小程式為例:
<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler">微信登入</button>
對於功能較簡單的小程式或者小遊戲而言,如果不是必須要獲得使用者的頭像暱稱,建議可先通過wx.login 拿到 openID 後,使用 open-data 方式或者開放資料域的方式展示使用者資訊,整個過程都無需使用者授權。
Tips:
1、在使用者登入後,開發者需要儲存使用者的 unionID,而且建議只把 unionID 作為互通的使用者標識,不要直接使用 unionID 作為使用者 ID。因為一旦小程式遷移到其他的開放平臺下,unionID 是會改變的,而 openID 是不變的。
2、用 button 元件的方式獲得使用者授權後,呼叫 wx.getUserInfo 就可以直接獲取使用者資訊。這個的意義在於獲取過一次之後,使用者有可能改暱稱頭像,因此為了及時同步,最好是定期獲取使用者資訊。
這裡兩個小提示:
▷ 定期使用 wx.getUserInfo 獲取並更新使用者的資訊;
▷ 如果使用者授權過一次之後,又在設定中關掉了授權(或者本地刪除了小程式),那這時再呼叫 wx.getUserInfo 也是不會成功的,需要重新獲得授權。
相關開發文件參考:
▷ 小程式
▷ 小遊戲