微信小程序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 相关文章推荐
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
js获取滚动距离的方法
May 30 Javascript
图解JavaScript中的this关键字
May 28 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
jquery插入兄弟节点的操作方法
Dec 07 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
May 03 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
财产公证书格式
2014/04/10 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
pandas中DataFrame检测重复值的实现
2021/05/26 Python