微信小程序Getuserinfo解决方案图解

问题

在微信小程序开发中，获取用户信息是经常会用到的！在之前，我们直接调用wx.getUserInfo接口，就可以直接获取用户的信息，然而为了安全考虑，从2018年4月30号开始，wx.getUserInfo接口不能直接调用（接口调整），需要使用<button open-type="getUserInfo"></button> 引导用户主动进行授权操作，意外就是来的这么突然，防不胜防！！！

处理方法

1、<open-data></open-data> ：只是简单的获取信息用于显示

其中，type="userAvatarUrl"是获取用户头像，type="userNickName"是获取用户昵称，具体使用详情查看小程序开发文档,此方法仅用于直接简单的展示用户信息。

2、使用 <button open-type="getUserInfo">获取用户信息

小程序官方文档有在说明wx.getUserInfo 当用户未授权过，调用该接口将直接报错，即使调用该接口将直接jinru进入fail的回调； 当用户授权过，可以使用该接口获取用户信息。

但是，如何有更好的用户体验来引导用户手动调用此方法呢？这里思考了几种实现方案：

1、在项目首页直接调用getUserInfo方法，若从未授权过，跳转到授权页面引导用户手动授权

在授权页面authorize 写入按钮组件

并在js中，加入手动点击按钮的方法，返回首页

此方案可行，但是授权页面就一个授权的按钮未免显得突兀些，进一步做优化方案。

考虑到是不是能够直接通过条件渲染wx-if 在首页多加一部分遮罩层作为引导用户授权的页面展示，因为用户使用小程序一经授权以后，再次进入小程序就不用授权了，也就是说只有在用户第一次使用小程序的时候才会引导用户授权操作，所以这里考虑通过遮罩层来实现。

在首页多加一个遮罩层

同时查阅微信小程序开发文档在页面加载后调用wx.getSetting方法可以获取当前用户的设置，返回值中只会出现小程序已经向用户请求过的权限，这样可以判断用户是否授权过权限

未授权授权遮罩层显示

 

引导用户授权后

hasUserInfo: true

遮罩层消失，完成授权。

微信修改getUSerInfo这个接口后确实不如之前直接进入小程序自动调用获取用户信息方便些，但是确实是为了加强安全性的考究，才通过按钮的方式让用户自己主动去授权，虽然对于开发者我们来讲不太习惯，但是对于加强了用户信息的安全性，网络信息安全确实是比较重要的一环。

总结

以上所述是小编给大家介绍的微信小程序Getuserinfo解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Thinkphp5微信小程序获取用户信息接口的实例详解

    Thinkphp5微信小程序获取用户信息接口的实例详解 首先在官网下载示例代码, 选php的, 这里有个坑 官方的php文件,编码是UTF-8+的, 所以要把文件改为UTF-8 然后在Thinkphp5 extend文件夹下建立Wxxcx命名空间,把官方的几个类文件放进去(这里要注意文件夹名, 命名空间名, 类名的, 大小写,一定要一样,官方的文件名和类名大小写不一样) 然后是自己的thinkphp接口代码: <?php /** * Created by PhpStorm. * User: le

  • 微信小程序如何获取openid及用户信息

    微信小程序获取openid及用户信息的方法 1. 获取openid 1.1 获取code 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的会话密钥(session_key).用户数据的加解密通讯需要依赖会话密钥完成. wx.login({ //获取code success: function(res) { code = res.code //返回code } }) 1.2 获取openid 拿到上一步获取的code,结合小程序 appid

  • 微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

    微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析

    本文实例讲述了微信小程序获取用户信息的两种方法wx.getUserInfo与open-data.分享给大家供大家参考,具体如下: 在此之前,小程序获取微信的头像,昵称之类的用户信息,我用的都是wx.getUserInfo,例如: onLoad: function (options) { var that = this; //获取用户信息 wx.getUserInfo({ success: function (res) { console.log(res); that.data.userInfo

  • 微信小程序学习笔记之登录API与获取用户信息操作图文详解

    微信小程序学习笔记之登录API与获取用户信息操作图文详解

    本文实例讲述了微信小程序学习笔记之登录API与获取用户信息操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序跳转页面.传递参数获得数据,这里来分析一下登录API与获取用户信息操作方法. [小程序登录]wx.login() app.js: App({ onLaunch: function () { // 登录 wx.login({ success: function (res) { if (res.code) { //发起网络请求 wx.request({ url: 'https://w

  • 微信小程序-getUserInfo回调的实例详解

    微信小程序-getUserInfo回调的实例详解

    微信小程序-getUserInfo回调的实例详解 前言: 这里就不吹嘘微信小程序有多厉害了,毕竟也不是我写的,直接谈谈我在做小程序开发时遇到的奇异Bug. getUserInfo多次调用: 对于wx.getUserInfo应该很多开发者都用过,用于获取用户基本信息,前提是需要用户授权,如果用户先前没有授权,则弹出一个提示框如下: 点击允许后,我们就能拿到用户信息,再进行后面的一系列操作.这一切看起来都是那么美好,可是在某次运行中,点允许授权后,程序并没有按照我们的预期往下执行.最后发现在其他的地

  • 微信小程序用户信息encryptedData详解

    之前做过一个版本是根据encryptData和Session_key解密得到完整的用户信息(包含union_id)的方法去获取用户信息,由于小程序升级,如今需要废弃encryptData的方式去获取用户信息,改成使用encryptedData的方式获取用户信息. 新的数据解密方法 接口如果涉及敏感数据(如wx.getUserInfo当中的 openId 和unionId ),接口的明文内容将不包含这些敏感数据.开发者如需要获取敏感数据,需要对接口返回的加密数据( encryptedData )进

  • 微信小程序如何获取用户信息

    最近在研究微信小程序怎么玩的.接触后发现好多的坑. 比如在浏览器中我们可以通过document.getElementById 获取到页面的DOM对象.而在微信小程序中是获取不到DOM对象的.document.getElementById() 直接报错 getElementById not function 我也是醉了.不支持这个好多有趣的功能不能实现了. 言归正传,我谈下获取用户信息的感想. 有两种获取用户信息的方案. 1.不包含敏感信息openId 的json对象(包含:nickname.av

  • C#微信小程序服务端获取用户解密信息实例代码

     C#微信小程序服务端获取用户解密信息实例代码 实现代码: using AIOWeb.Models; using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; using System.Data; using System.Data.SqlClient; using System.Linq; using System.Web; namespace AIOWe

  • 微信小程序授权获取用户详细信息openid的实例详解

    微信小程序授权获取用户详细信息openid的实例详解

    小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that.setData({ nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl, }) }, }) 第二种 我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如

  • 微信小程序Getuserinfo解决方案图解

    问题 在微信小程序开发中,获取用户信息是经常会用到的!在之前,我们直接调用wx.getUserInfo接口,就可以直接获取用户的信息,然而为了安全考虑,从2018年4月30号开始,wx.getUserInfo接口不能直接调用(接口调整),需要使用<button open-type="getUserInfo"></button> 引导用户主动进行授权操作,意外就是来的这么突然,防不胜防!!! 处理方法 1.<open-data></open-da

  • 微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）

    本文实例为大家分享了微信小程序授权登录解决方案的具体代码,供大家参考,具体内容如下 getUserInfoF:function(){ var that = this; wx.getSetting({ success: (res) => { console.info(res.authSetting); wx.getUserInfo({ success: res => { this.globalData.userInfo = res.userInfo console.info("一开始同

  • 微信小程序登录会话密钥session失效解决方案

    微信小程序登录会话密钥session失效解决方案

    目录 一.登录会话密钥 session_key 有效性 二.解决登录session_key 的问题 案例:解决session_key 过期问题,发送个人信息后台解密 后端解密信息,存入数据库 mysql数据库存表情设置 三.后端,如何解析wx.getUserInfor中的用户信息. 用户信息官方文档 数据加密官方文档 一.登录会话密钥 session_key 有效性 https://developers.weixin.qq.com/miniprogram/dev/framework/open-a

  • 微信小程序 HTTPS报错整理常见问题及解决方案

    微信小程序 HTTPS报错整理常见问题及解决方案

    微信小程序 HTTPS报错常见问题及解决方案 微信小程序开放公测已经一个多月了,因官方需求文档要求后台使用HTTPS请求进行网络通信,不满足条件的域名和协议无法请求.越来越多的开发者纷纷使用SSL证书实践微信小程序的应用情况,但仍然会碰到各类问题.本文列举了SSL证书常见的报错和解决办法,供开发者参考. 常见问题一 在微信小程序内测的过程中,几乎每个开发者们在实践的过程中都遇到了下图的报错: 原因及解决办法: 这是因为wx.request 发起的是 https 请求,微信小程序读取大部分是请求A

  • 微信小程序开发常见问题及解决方案

    微信小程序开发常见问题及解决方案

    前言 我们在做微信小程序开发的过程中,总会遇到各种奇葩的问题.今天就把我在小程序开发过程中遇到的各种问题,及对应的解决方案总结在这里,方便以后自己回顾,也方便大家查看. 云开发相关 一 云函数调用失败问题 [云函数] [login] 调用失败 Error: errCode: -404011 cloud function execution error | errMsg: cloud.callFunction:fail requestID , cloud function service erro

  • 微信小程序iOS下拉白屏晃动问题解决方案

    这篇文章主要介绍了微信小程序iOS下拉白屏晃动问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 问题 感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText: "购物车", disableScroll:true } </config> 这样的话页面整个都拉不动了,下面溢

  • 微信小程序 textarea 层级过高问题简单解决方案

    这篇文章主要介绍了微信小程序 textarea 层级过高问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 建立一个新的textarea 组件代替原生textarea ,废话不多说,上代码 <template> <view class="ui-textarea"> <textarea class="textarea {{ hide? 'hidden':''}}" auto-he

  • 微信小程序http连接访问解决方案的示例

    HTTP + 加密 + 认证 + 完整性保护 = HTTPS,小程序考虑到信息安全的问题,选用了更为稳定安全的https 来进行信息传递. HTTPS协议的主要作用可以分为两种:一种是建立一个信息安全通道,来保证数据传输的安全:另一种就是确认网站的真实性. 这就导致了许多好用的http  API无法在小程序中被调用. 但是也有解决方案. 1.中继访问 中继访问有两种方式,一种需要自己拥有一个云服务和域名. 拥有域名和云服务器 域名完成备案之后下载证书 https指引教程如下------> 腾讯云

随机推荐