快捷導(dǎo)航

小程序綁定用戶方案優(yōu)化小結(jié)

更新時(shí)間：2019年05月15日 11:17:26 作者：jump__jump

這篇文章主要介紹了小程序綁定用戶方案優(yōu)化小結(jié)，該類小程序在使用之前就需要綁定用戶信息。常見(jiàn)于線下門(mén)店類功能性小程序。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

預(yù)先綁定類

該類小程序在使用之前就需要綁定用戶信息。常見(jiàn)于線下門(mén)店類功能性小程序。線下操作時(shí)有大量的優(yōu)惠活動(dòng)來(lái)支持小程序的流量。

功能介紹

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

技術(shù)要點(diǎn)

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

全局配置

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

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

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

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

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

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

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

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

惰性綁定類

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

功能介紹

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

實(shí)踐方式

方式 1: 頁(yè)面跳轉(zhuǎn) (京東購(gòu)物)

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

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

在每個(gè)需要綁定按鈕上添加 open-type='getuserinfo'，后續(xù)可以根據(jù)狀態(tài)變化，切換掉按鈕(也可以不切換，因?yàn)榈诙谓壎〝?shù)據(jù)不會(huì)跳出組件)。

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

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

組件代碼：

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

上面方式實(shí)際上都沒(méi)有太大的問(wèn)題，需要在不同場(chǎng)景下做最合適的選擇。

結(jié)語(yǔ)

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

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

您可能感興趣的文章: