微信小程序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 相关文章推荐
document.compatMode介绍
May 21 Javascript
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
jQuery插件开发基础简单介绍
Jan 07 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 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原生函数一定好吗?
2014/12/08 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
Jquery性能优化详解
2014/05/15 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
Bootstrap精简教程
2015/11/27 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
python引用DLL文件的方法
2015/05/11 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
什么是就业协议书
2014/04/17 职场文书
全国文明单位申报材料
2014/05/31 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
赔偿协议书怎么写
2015/01/28 职场文书
冲出亚马逊观后感
2015/06/03 职场文书
同乡会致辞
2015/07/30 职场文书
新学期感想
2015/08/10 职场文书
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA