小程序绑定用户方案优化总结

做了一系列小程序后，我也对小程序的登录认证流程有了一定的了解。类似于B端小程序，用户信息的手机号和地址不用多说都可以是一个穿梭机，可以做一个引导页来判断然后要求用户绑定。用户自然不会多说什么。毕竟，这是一个企业级应用程序。但是说到c端小程序。如果你想让用户绑定，你必须给他们方便。在这里，我列举一些我认为不错的小程序应用，供大家参考。

预绑定类

这种小程序在使用前需要绑定用户信息。线下商店常见的功能小程序。线下运营时有很多优惠活动支持小程序的流动。

功能介绍

例如方便蜂。以前在上海经常用，价格和折扣都很好。这类小程序属于线下功能小程序，具有抽奖、支付等一系列功能。第一次打开小程序时，考虑到线下门店会有一定的店员辅助，用户直接要求用户绑定信息和地址。所以这个小程序的绑定操作其实是用户可以接受的。图片如下。

技术要点

技术1:使用自定义导航栏使标题可配置

全局配置

window ' : { ' Navigation Style ' : ' Custom ' }如果微信app的版本在7.0.0以上，我们可以使用页面级配置。

{“使用组件”: {},“导航样式”:“自定义”}默认情况下，此配置是默认的。使用自定义时，您可以自定义导航并配置标题加载。

第二个需要app版本，所以如果想简化，可以全局定义，然后用微信官方组件导航栏。

技术2:使用小程序的框架屏幕

当后端无法快速给出前端数据，或者前端可以使用Service Worker将最后缓存的数据返回给前端时，采用骨架屏方案。从后端获取数据后刷新页面也是一种方案，但因为这是第一次打开小程序，所以采用骨架屏是一种不错的方法。

使用小程序的骨骼屏组件，如果不需要骨骼屏的动画效果，可以尝试直接加载图片作为骨骼屏。

惯性约束类

这种小程序在显示时不需要绑定用户信息，但是当用户操作时，它会要求绑定。常用于网上商场等没有特殊指导的用户项目。

功能介绍

基本上大多数C端小程序都是用这个方法，但是在函数上没有什么好介绍的，但是在实践中有不同的方法。

练习模式

模式1:页面跳转(JD.COM购物)

为每个需要绑定的按钮添加跳转逻辑。如果当前小程序没有绑定，可以跳转到另一个页面确认授权。

模式2:按钮控制(华为商城)

给每个需要绑定的按钮添加open-type='getuserinfo '，然后根据状态变化关闭按钮(或者不关闭，因为第二次绑定的数据不会跳出组件)。

模式3:屏蔽层拦截(抽奖助手)

向要绑定的页面添加一个透明的模式框，并添加一个整页大小的按钮。有了固定布局，还可以向下滚动。无论你点击当前页面的哪个位置，你都可以选择绑定。

组件代码：

//wxmlview style=' z-index : { { ZINDEX } } ' class=' mask '按钮open-type=' { { OpenType } } ' bind tap=' OnClick ' bind getuserinfo=' Bindgetuserinfo ' bind getphonenumber=' Bindopensetting ' bind error=' BindError ' c lass=' mask '/view///wxss . mask { position 3360 }已修复；top : 0；底部：0；left:0right:0背景-color:继承；opa city 3360 0；}然后使面膜在绑定后消失。乍一看，这个方案并不是那么适合，但仔细考虑后，没有问题，因为99%的用户可能会点击所需的按钮，即使点击了按钮之间的缝隙，也会跳出所需的绑定。

其实以上的方法都没有什么大问题，需要在不同的场景下做出最适合的选择。

结论

人机交互是决定计算机系统“友好性”的重要因素。读书学习时，要先读厚书，再读薄书。做程序也是如此。如何让系统变得更复杂，如何让用户体验变得简单明了，就没那么容易了。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。