在做過一系列小程序之后，對小程序的登陸鑒權(quán)的流程也有一定的理解，類似于 B 端小程序自不必說，要用戶信息手機號地址可以一把梭，做一個引導(dǎo)頁面進(jìn)行判斷然后要求用戶給與綁定，用戶自然不會多說什么，畢竟這是企業(yè)級別應(yīng)用。但是當(dāng)涉及到 C 端小程序時候。想讓用戶進(jìn)行綁定，就勢必要給與用戶便利。這里我列出一些我覺得較為不錯的小程序應(yīng)用方案以供參考。

預(yù)先綁定類

該類小程序在使用之前就需要綁定用戶信息。常見于線下門店類功能性小程序。線下操作時有大量的優(yōu)惠活動來支持小程序的流量。

功能介紹

例如 便利蜂。之前在上海經(jīng)常使用，價格和優(yōu)惠都非常不錯，這類小程序?qū)儆诰€下功能類小程序，內(nèi)部有抽獎，付款等一系列功能。該小程序第一次打開就先用戶直接要求用戶綁定信息和地址，考慮到線下門店都會有一定的店員輔助。所以該小程序的綁定操作實際上用戶都是可以接受的。圖片如下所示。

技術(shù)要點

技術(shù)1： 使用自定義導(dǎo)航欄讓頭部可以配置

全局配置

"window": {
 "navigationStyle": "custom"
}

如果微信 app 的版本在 7.0.0之上，我們就可以使用頁面級別的配置了。

{
 "usingComponents": {},
 "navigationStyle": "custom"
}

該配置默認(rèn)時default，當(dāng)使用custom時候可以自定義導(dǎo)航，可以在頭部配置 loading。

第二種這個需要 app 版本，所以如果是想簡化，反而在全局下定義，再使用微信官方的組件 avigation-bar 即可。

技術(shù)2：使用小程序骨架屏

骨架屏方案在后端不能很快給與前端數(shù)據(jù)時候采用這種方案，亦或者前端可以使用 Service Worker 把上次緩存數(shù)據(jù)返回到前端，等到從后端獲取數(shù)據(jù)之后刷新頁面也是一種方案，但是因為這是第一次打開小程序，所以采用骨架屏是一個很好的方法。

采用 小程序骨架屏 組件，如果不需要骨架屏動畫效果，可以試試直接加載圖片作為骨架屏。

惰性綁定類

該類小程序在展示時無需綁定用戶信息，但是當(dāng)用戶進(jìn)行操作時在詢問綁定。常用于線上商城等一系列無需專人引導(dǎo)的用戶項目。

功能介紹

基本上線上大部分 c 端小程序都采用此做法，功能上倒是沒什么可以介紹的，但是實踐上卻有不同做法。

實踐方式

方式 1: 頁面跳轉(zhuǎn) (京東購物)

在每個需要綁定的按鈕上添加跳轉(zhuǎn)邏輯，如果當(dāng)前小程序沒有綁定，可以跳轉(zhuǎn)到另外一個頁面上確認(rèn)授權(quán)。

方式2: 按鈕控制 (華為商城+)

在每個需要綁定按鈕上添加 open-type='getuserinfo'，后續(xù)可以根據(jù)狀態(tài)變化，切換掉按鈕(也可以不切換，因為第二次綁定數(shù)據(jù)不會跳出組件)。

方式3: 遮罩層攔截 (抽獎助手)

在需要綁定的頁面添加一個 透明模態(tài)框，增加以整個頁面大小的button。用fixed布局，還可以向下滾動。無論在當(dāng)前頁面點擊任何地方都會出現(xiàn)需要綁定選項。

組件代碼：

// 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 消失。該方案初看起來不是那么的合適，但是仔細(xì)想想?yún)s也沒什么問題，因為用戶99%可能點擊所需求的按鈕，就算點擊到按鈕之間的空隙之處跳出要求綁定也沒有什么問題。

上面方式實際上都沒有太大的問題，需要在不同場景下做最合適的選擇。

結(jié)語

人機交互功能是決定計算機系統(tǒng)“友善性”的一個重要因素。讀書學(xué)習(xí)時候要先把書讀厚，再把書讀薄，做程序也是一樣，如何把系統(tǒng)做的復(fù)雜而更加復(fù)雜，如何讓用戶的體驗簡單而更為簡單都不是那么容易的一件事。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論