微信小程序登录获取不到头像和昵称解决办法！

微信小程序登录获取不到头像和昵称主要原因是：小程序wx.getUserProfile接口被收回！

大家可以按照文档操作↓

PS：

针对小程序wx.getUserProfile接口将被收回后做出的授权调整

小程序文档中提出的调整说明

对于此次变化，现将小程序授权方式做以调整

添加判断当前基础库是否支持头像昵称填写能力
在根目录App.vue中加入判断基础库是否大于2.21.2版本（大于此版本支持头像/昵称填写能力）

// #ifdef MPconst version = uni.getSystemInfoSync().SDKVersionif (Routine.compareVersion(version, '2.21.2') >= 0) {that.$Cache.set('MP_VERSION_ISNEW', true)} else {that.$Cache.set('MP_VERSION_ISNEW', false)}
// #endif

Copy
2.修改/pages/users/wechat_login.vue文件

(1) 在data中加入基础库判断，决定授权逻辑

mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false

Copy
(2)dom中新增逻辑判断

(3) methods中加入方法userLogin

// 小程序 22.11.8日删除getUserProfile 接口获取用户昵称头像userLogin() {Routine.getCode().then(code => {uni.showLoading({title: '正在登录中'});authLogin({code,spread_spid: app.globalData.spid,spread_code: app.globalData.code}).then(res => {if (res.data.key !== undefined && res.data.key) {uni.hideLoading();this.authKey = res.data.key;this.isPhoneBox = true;} else {uni.hideLoading();let time = res.data.expires_time - this.$Cache.time();this.$store.commit('LOGIN', {token: res.data.token,time: time});this.getUserInfo()}})}).catch(err => {console.log(err)});},

3.新增用户头像/昵称获取能力

（1）调整pages/users/user_info.vue文件
data中添加

mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false

（2）调整dom中

（3）methods中加入方法

onChooseAvatar(e) {const { avatarUrl } = e.detailthis.$util.uploadImgs('upload/image', avatarUrl, (res) => {this.userInfo.avatar = res.data.url}, (err) => {console.log(err)})
},

这里有一个公共方法uploadImgs需要在/utils/util.js中添加

uploadImgs(uploadUrl, filePath, successCallback, errorCallback) {let that = this;uni.uploadFile({url: HTTP_REQUEST_URL + '/api/' + uploadUrl,filePath: filePath,fileType: 'image',name: 'pics',formData: {'filename': 'pics'},header: {// #ifdef MP"Content-Type": "multipart/form-data",// #endif[TOKENNAME]: 'Bearer ' + store.state.app.token},success: (res) => {uni.hideLoading();if (res.statusCode == 403) {that.Tips({title: res.data});} else if (res.statusCode == 413) {that.Tips({title: '上传图片失败,请重新上传小尺寸图片'});} else {let data = res.data ? JSON.parse(res.data) : {};if (data.status == 200) {successCallback && successCallback(data)} else {errorCallback && errorCallback(data);that.Tips({title: data.msg});}}},fail: (err) => {uni.hideLoading();that.Tips({title: '上传图片失败'});}})
},

微信小程序登录获取不到头像和昵称解决办法！相关推荐

uniapp微信小程序新版本获取用户的头像和昵称，手机号
新版本微信小程序通过getUserInfo获取到用户的头像是灰色,昵称显示为微信用户,这是微信版本更新了,现在需要用getUserProfile来获取用户的头像和昵称,并且只能页面产生点击事件(例如 ...
微信小程序登录获取Token以及微信支付
微信小程序登录获取Token 在调用登录接口api之前,要先获取以下五个参数后四个参数获取:通过为button按钮添加 open-type="getUserInfo" (固定写法 ...
微信小程序 - 登录获取openid和用户信息（适配getUserProfile）
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类小程序码微信小程序中如果需要使用微信的用户信息建立自己的用户体系,需拿到唯一标识openid,然后 ...
Java实现微信小程序登录获取用户信息
小程序比公众号授权登录更加简单其实没什么是后台需要处理的前端传过来一个code 我们保存以下通过code获取过来的openid就可以其他的用户信息前端小程序那边可以获取. 首先既然是小程序登 ...
企业微信小程序_获取准确定位的方法及解决定位不准确的问题
文章目录一.经验分享 1. 微信api现状 2. 解决方案 3. 适用场景二.小程序集成腾讯定位服务 2.1. 注册腾讯开发者 2.2. 创建应用 2.3. 添加key 2.4. 下载sdk 2. ...
微信小程序分享朋友圈的实现思路与解决办法
转自:https://www.cnblogs.com/till-the-end/p/8470557.html 简介截止我写这篇文章的时候,小程序应该是还没有能够直接分享到朋友圈的api,转发给朋友和 ...
微信小程序input弹出键盘挡住文字的解决办法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 解决思路:阻止键盘弹起时,自动上推页面.输入框获取焦点的时候让页面绝对定位,相对底部 100 像素.失去焦点的 ...
微信小程序image图无法加载出来的解决办法（亲测有效）
在微信小程序中,第一次加载页面时图片(线上图)加载不出来/图片灰色背景显示,这个时候该如何解决这个问题呢?请带着问题查看这篇博客,希望对您有所帮助(点赞skr) 看官方文档? 自行解决? 写在前面(初 ...
微信小程序中图片高度被压扁的解决办法
微信小程序开发中使用image标签展示的长图因为太长,就会被压扁变形,让人看起来很难看,那如何才能让图片的高度自适应呢?使用css的height:auto也没办法实现. 翻看了小程序社区的问答,发现了 ...

微信小程序登录获取不到头像和昵称解决办法！

微信小程序登录获取不到头像和昵称解决办法！相关推荐

最新文章

热门文章