微信小程序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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
简单的三步vuex入门
May 20 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
vue实现输入框自动跳转功能
May 20 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使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
javascript感应鼠标图片透明度显示的方法
2015/02/24 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
js实现将json数组显示前台table中
2017/01/10 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
2019/07/22 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python版学生管理系统
2018/01/10 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
岗位廉洁从业承诺书
2014/03/28 职场文书
学校就业推荐信范文
2014/05/19 职场文书
国庆节活动总结
2014/08/26 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
工程部部长岗位职责
2015/02/12 职场文书
大学生党员个人总结
2015/02/13 职场文书
遗嘱范文
2015/08/07 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript