小程序绑定用户方案 优化

在作过一系列小程序以后，对小程序的登录鉴权的流程也有必定的理解，相似于 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%可能点击所需求的按钮，就算点击到按钮之间的空隙之处跳出要求绑定也没有什么问题。

上面方式实际上都没有太大的问题，须要在不一样场景下作最合适的选择。

结语

人机交互功能是决定计算机系统“友善性”的一个重要因素。学习时候要先把书读厚，再把书读薄，作程序也是同样，如何把系统作的复杂而更加复杂，如何让用户的体验简单而更为简单都不是那么容易的一件事。