微信小程序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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
一些mootools的学习资源
Feb 07 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 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+memcache实现的网站在线人数统计代码
2014/07/04 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
node.js中的socket.io的广播消息
2014/12/15 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
mpvue写一个CPASS小程序的示例
2018/09/04 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
python实现多进程通信实例分析
2019/09/01 Python
Python文件操作方法详解
2020/02/09 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
汽修专业学生自我鉴定
2013/11/16 职场文书
怎么写工作检讨书
2014/11/16 职场文书
公司奖励通知
2015/04/21 职场文书
培训班通知
2015/04/25 职场文书
python xlwt模块的使用解析
2021/04/13 Python
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
Python保存并浏览用户的历史记录
2022/04/29 Python