小程式繫結使用者方案 優化
在做過一系列小程式之後，對小程式的登陸鑑權的流程也有一定的理解，類似於 B 端小程式自不必說，要使用者資訊手機號地址可以一把梭，做一個引導頁面進行判斷然後要求使用者給與繫結，使用者自然不會多說什麼，畢竟這是企業級別應用。但是當涉及到 C 端小程式時候。想讓使用者進行繫結，就勢必要給與使用者便利。這裡我列出一些我覺得較為不錯的小程式應用方案以供參考。
預先繫結類
該類小程式在使用之前就需要繫結使用者資訊。常見於線下門店類功能性小程式。線下操作時有大量的優惠活動來支援小程式的流量。
功能介紹
例如 便利蜂。之前在上海經常使用，價格和優惠都非常不錯，這類小程式屬於線下功能類小程式，內部有抽獎，付款等一系列功能。該小程式第一次開啟就先使用者直接要求使用者繫結資訊和地址，考慮到線下門店都會有一定的店員輔助。所以該小程式的繫結操作實際上使用者都是可以接受的。圖片如下所示。
技術要點
- 技術1： 使用自定義導航欄讓頭部可以配置
全域性配置
"window": {
"navigationStyle": "custom"
}
如果微信 app 的版本在 7.0.0之上，我們就可以使用頁面級別的配置了。
{
"usingComponents": {},
"navigationStyle": "custom"
}
該配置預設時default，當使用custom時候可以自定義導航，可以在頭部配置 loading。
第二種這個需要 app 版本，所以如果是想簡化，反而在全域性下定義，再使用微信官方的元件avigation-bar 即可。
- 技術2：使用小程式骨架屏
骨架屏方案在後端不能很快給與前端資料時候採用這種方案，亦或者前端可以使用 Service Worker 把上次快取資料返回到前端，等到從後端獲取資料之後重新整理頁面也是一種方案，但是因為這是第一次開啟小程式，所以採用骨架屏是一個很好的方法。
採用小程式骨架屏 元件，如果不需要骨架屏動畫效果，可以試試直接載入圖片作為骨架屏。
惰性繫結類
該類小程式在展示時無需繫結使用者資訊，但是當用戶進行操作時在詢問繫結。常用於線上商城等一系列無需專人引導的使用者專案。
功能介紹
基本上線上大部分 c 端小程式都採用此做法，功能上倒是沒什麼可以介紹的，但是實踐上卻有不同做法。
實踐方式
- 方式 1: 頁面跳轉 (京東購物)
在每個需要繫結的按鈕上新增跳轉邏輯，如果當前小程式沒有繫結，可以跳轉到另外一個頁面上確認授權。
- 方式2: 按鈕控制 (華為商城+)
在每個需要繫結按鈕上新增 open-type='getuserinfo'，後續可以根據狀態變化，切換掉按鈕(也可以不切換，因為第二次繫結資料不會跳出元件)。
- 方式3: 遮罩層攔截 (抽獎助手)
在需要繫結的頁面新增一個 透明模態框，增加以整個頁面大小的button。用fixed佈局，還可以向下滾動。無論在當前頁面點選任何地方都會出現需要繫結選項。
元件程式碼：
// wxml
<view style="z-index: {{zIndex}}" class="mask">
<button open-type="{{ openType }}"
bindtap="onClick"
bindgetuserinfo="bindGetUserInfo"
bindgetphonenumber="bindGetPhoneNumber"
bindopensetting="bindOpenSetting"
binderror="bindError"
class="mask"/>
</view>
// wxss
.mask{
position: fixed;
top: 0;
bottom:0;
left:0;
right:0;
background-color: inherit;
opacity: 0;
}
然後在繫結後令 mask 消失。該方案初看起來不是那麼的合適，但是仔細想想卻也沒什麼問題，因為使用者99%可能點選所需求的按鈕，就算點選到按鈕之間的空隙之處跳出要求繫結也沒有什麼問題。
上面方式實際上都沒有太大的問題，需要在不同場景下做最合適的選擇。
結語
人機互動功能是決定計算機系統“友善性”的一個重要因素。讀書學習時候要先把書讀厚，再把書讀薄，做程式也是一樣，如何把系統做的複雜而更加複雜，如何讓使用者的體驗簡單而更為簡單都不是那麼容易的一件事。