附解决方案,小程序用户昵称突然变成了“微信用户”,而且头像也显示不了?

简介: 附解决方案,小程序用户昵称突然变成了“微信用户”,而且头像也显示不了?

最近好多小伙伴在使用getUserInfo获取小程序用户昵称和头像时,突然变成了下面这样。


错误图示



很多小伙伴肯定就疑虑了,明明我代码没有做任何改动啊,怎么突然就这样了呢。还记得我们之前应该长这样啊。


石头哥最近也遇到这样的问题了,我第一时间想到的原因有两个

1,微信官方服务器挂了(概率很小)

2,微信又改规则了。。。


带着这样的疑虑,去问了下微信小程序官方人员。得到的答案是。。。

心理一万个。。。。。  哎,没办法,既然官方说改规则,咱们作为弱势群体,只能跟着官方规则来改了啊。


代码改动


好在代码改动量不是很大,基本上改动5行代码就可以完事了。下面就来教大家如何改动代码吧。

1,先来看看老代码

js里的老代码

可以看到我们用老代码,获取的就是下面这样灰色的头像和 微信用户 这样的昵称

2,认识wx.getUserProfile

其实这个wx.getUserProfile和我们之前使用button结合open-type="getUserInfo" 和bindgetuserinfo事件获取用户信息没有太大区别,所以我们先来认识下wx.getUserProfile

这样改动其实还有点点好处,就是我们只需要在点击事件里调用wx.getUserProfile就可以调起授权弹窗,没必要非得在button组件里使用点击事件了。


解决问题的代码


1,wxml里的代码改动

2 js里的代码改动

这里我们主要是使用


wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
      success: (res) => {
        console.log("获取用户信息成功", res)
      },
      fail: res => {
        console.log("获取用户信息失败", res)
      }
})

可以看到能成功的调起授权弹窗了

并且可以获取真实的昵称了

其实到这里我们就改造好了,其实改造起来也就几行代码的事,麻烦的就是我们的小程序要因为这个改动要重新提交审核了。。。。


补充知识点:保存用户信息到缓存


如果我们每次进入页面都让用户点击授权,就有点太烦锁了,其实可以在第一次授权成功获取用户信息的时候把数据缓存在本地缓存的。下面就来教大家如何缓存用户信息。

代码以及完整的注释都贴出来给到大家

主要就是要调用

wx.setStorageSync存数据到本地缓存

wx.getStorageSync取缓存数据


wxml页面的代码也贴出来给到大家

还有我们的wxss样式

到这里我们就把官方的这个坑给填好了。

相关文章
|
20天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的校园水电费管理微信小程序的详细设计和实现
41 0
|
20天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
38 0
|
10天前
|
小程序 开发工具 Android开发
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(二)
|
10天前
|
小程序 JavaScript 开发工具
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
微信小程序开发工具的使用,各个配置文件详解,小程序开发快速入门(一)
|
10天前
|
移动开发 小程序 安全
使用阿里云短信+微信短链接跳转微信小程序
此内容是关于使用阿里云短信带传递参数的微信短链接跳转到微信小程序。首先,需要准备微信开发者工具和一个已认证的小程序。接着,开通云开发并配置云开发权限。然后,配置H5静态网页,包括设置云开发权限和处理不同设备的跳转方式。最后,上传云函数并修改其权限,获取微信短信链接,配置短链接参数,并开通阿里云短信服务以进行测试验证。整个过程涉及到了微信开发者工具、云开发、H5页面配置、云函数的创建和部署以及阿里云短信服务的开通和使用等步骤。
36 0
|
20天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的在线课堂微信小程序的详细设计和实现
32 3
|
20天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
55 3
|
20天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信点餐小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信点餐小程序的详细设计和实现
30 1
|
20天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的助农扶贫微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的助农扶贫微信小程序的详细设计和实现
33 2
|
20天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
42 2

热门文章

最新文章