用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

:小程序綁定用戶方案 優化

巴黎彩票计划 www.hknsi.icu Rolan 2019-5-15 00:16

在做過一系列小程序之后,對小程序的登陸鑒權的流程也有一定的理解,類似于 B 端小程序自不必說,要用戶信息手機號地址可以一把梭,做一個引導頁面進行判斷然后要求用戶給與綁定,用戶自然不會多說什么,畢竟這是企 ...

在做過一系列巴黎彩票计划之后,對小程序的登陸鑒權的流程也有一定的理解,類似于 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%可能點擊所需求的按鈕,就算點擊到按鈕之間的空隙之處跳出要求綁定也沒有什么問題。

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

結語

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

鮮花
鮮花
雞蛋
雞蛋 (1)

剛表態過的朋友 (1 人)

分享至 : QQ空間
收藏
原作者: jump__jump 來自: segmentfault
赛车pk10计划 电子游戏娱乐 pk10走势图要怎么分析 188比分直播 4码免费计划 918通比牛牛手机版 后二组选稳赚技巧方法 欢乐生肖全天稳定计划 幸运28有什么稳赚法 欢乐生肖开奖结果 冰球 彩票投注单打印机 重庆时时彩必中规律 在线购彩 快速时时官网 电玩下载app领取38元彩金