小程序綁定用戶方案 優化

在作過一系列小程序以後，對小程序的登錄鑑權的流程也有必定的理解，相似於 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%可能點擊所需求的按鈕，就算點擊到按鈕之間的空隙之處跳出要求綁定也沒有什麼問題。

上面方式實際上都沒有太大的問題，須要在不一樣場景下作最合適的選擇。

結語

人機交互功能是決定計算機系統「友善性」的一個重要因素。讀書學習時候要先把書讀厚，再把書讀薄，作程序也是同樣，如何把系統作的複雜而更加複雜，如何讓用戶的體驗簡單而更爲簡單都不是那麼容易的一件事。