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

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

最近好多小伙伴在使用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样式

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

相关文章
|
25天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
381 7
|
24天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
442 1
|
1月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
46 1
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
76 6
|
28天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
157 1
|
29天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
451 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
24天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
255 0
|
28天前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
384 0
|
1月前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
31 0
|
2月前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
87 3
下一篇
无影云桌面