微信小程序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资料prototype 属性
Mar 13 Javascript
jquery tools系列 expose 学习
Sep 06 Javascript
JavaScript日历实现代码
Sep 12 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
浅析创建javascript对象的方法
May 13 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
node.js实现回调的方法示例
Mar 01 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 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+ajax实现无刷新分页的方法
2014/11/04 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
php的对象传值与引用传值代码实例讲解
2021/02/26 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
JavaScript中Math对象使用说明
2008/01/16 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
Bootstrap每天必学之前端开发框架
2015/11/19 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
python中for用来遍历range函数的方法
2018/06/08 Python
python抖音表白程序源代码
2019/04/07 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
生育关怀行动实施方案
2014/03/26 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
公司股份合作协议书
2014/12/07 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
防汛通知
2015/04/25 职场文书
浅析Python实现DFA算法
2021/06/26 Python
Vue的过滤器你真了解吗
2022/02/24 Vue.js
Python正则表达式中flags参数的实例详解
2022/04/01 Python
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android