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


Posted in Javascript onMay 15, 2019

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

上面方式实际上都没有太大的问题,需要在不同场景下做最合适的选择。

结语

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
Jun 06 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 #Javascript
JQuery常见节点操作实例分析
May 15 #jQuery
JS算法题之查找数字在数组中的索引位置
May 15 #Javascript
JQuery属性操作与循环用法示例
May 15 #jQuery
前端js中的事件循环eventloop机制详解
May 15 #Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 #Javascript
微信小程序的tab选项卡的实现效果
May 15 #Javascript
You might like
PHP4实际应用经验篇(8)
2006/10/09 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
Python爬取三国演义的实现方法
2016/09/12 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python3.5绘制随机漫步图
2018/08/27 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
python统计文章中单词出现次数实例
2020/02/27 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
体育教师工作总结的自我评价
2013/10/10 职场文书
五一家具促销方案
2014/01/10 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA