微信小程序Getuserinfo解决方案图解


Posted in Javascript onAugust 24, 2018

问题

在微信小程序开发中,获取用户信息是经常会用到的!在之前,我们直接调用wx.getUserInfo接口,就可以直接获取用户的信息,然而为了安全考虑,从2018年4月30号开始,wx.getUserInfo接口不能直接调用(接口调整),需要使用<button open-type="getUserInfo"></button> 引导用户主动进行授权操作,意外就是来的这么突然,防不胜防!!!

微信小程序Getuserinfo解决方案图解

处理方法

1、<open-data></open-data> :只是简单的获取信息用于显示

微信小程序Getuserinfo解决方案图解

其中,type="userAvatarUrl"是获取用户头像,type="userNickName"是获取用户昵称,具体使用详情查看小程序开发文档,此方法仅用于直接简单的展示用户信息。

2、使用 <button open-type="getUserInfo">获取用户信息

小程序官方文档有在说明wx.getUserInfo 当用户未授权过,调用该接口将直接报错,即使调用该接口将直接jinru进入fail的回调; 当用户授权过,可以使用该接口获取用户信息。

微信小程序Getuserinfo解决方案图解

但是,如何有更好的用户体验来引导用户手动调用此方法呢?这里思考了几种实现方案:

1、在项目首页直接调用getUserInfo方法,若从未授权过,跳转到授权页面引导用户手动授权

微信小程序Getuserinfo解决方案图解

在授权页面authorize 写入按钮组件

微信小程序Getuserinfo解决方案图解

并在js中,加入手动点击按钮的方法,返回首页

微信小程序Getuserinfo解决方案图解

此方案可行,但是授权页面就一个授权的按钮未免显得突兀些,进一步做优化方案。

考虑到是不是能够直接通过条件渲染wx-if 在首页多加一部分遮罩层作为引导用户授权的页面展示,因为用户使用小程序一经授权以后,再次进入小程序就不用授权了,也就是说只有在用户第一次使用小程序的时候才会引导用户授权操作,所以这里考虑通过遮罩层来实现。

在首页多加一个遮罩层

微信小程序Getuserinfo解决方案图解

同时查阅微信小程序开发文档在页面加载后调用wx.getSetting方法可以获取当前用户的设置,返回值中只会出现小程序已经向用户请求过的权限,这样可以判断用户是否授权过权限

微信小程序Getuserinfo解决方案图解

未授权授权遮罩层显示

微信小程序Getuserinfo解决方案图解 微信小程序Getuserinfo解决方案图解

引导用户授权后

hasUserInfo: true

遮罩层消失,完成授权。

微信修改getUSerInfo这个接口后确实不如之前直接进入小程序自动调用获取用户信息方便些,但是确实是为了加强安全性的考究,才通过按钮的方式让用户自己主动去授权,虽然对于开发者我们来讲不太习惯,但是对于加强了用户信息的安全性,网络信息安全确实是比较重要的一环。

总结

以上所述是小编给大家介绍的微信小程序Getuserinfo解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
div层的移动及性能优化
Nov 16 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
layui表单验证select下拉框实现验证的方法
Sep 05 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 #Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 #Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 #Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 #Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 #Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 #Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 #Javascript
You might like
php中神奇的fastcgi_finish_request
2011/05/02 PHP
学习php设计模式 php实现适配器模式
2015/12/07 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
超链接的禁用属性Disabled使用示例
2014/07/31 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
Python中random模块生成随机数详解
2016/03/10 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
Django 用户认证组件使用详解
2019/07/23 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
python用什么编辑器进行项目开发
2020/06/17 Python
python 获取计算机的网卡信息
2021/02/18 Python
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
军训的自我鉴定
2013/12/10 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
《花木兰》教学反思
2014/04/09 职场文书
做人民满意的公务员活动方案
2014/08/25 职场文书
科技活动周标语
2014/10/08 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript
oracle重置序列从0开始递增1
2022/02/28 Oracle
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android