小程序用户头像昵称获取不到解决办法

1. 根据官方要求，不会要求强制性授权，头像和昵称也将被收回，给的是统一的头像和昵称，需要我们调用接口去获取微信头像和昵称。

2. 通过原生的标签调用来获取微信头像和微信昵称。注意：这里的标签不能够修改，修改会导致头像回显问题和昵称获取问题。头像获取的是本地，需要我们调用上传接口上传到服务器。

3. 因为我这里头像显示调用的是登录接口，将头像存到全局，所以我直接调用修改登录接口将头像和昵称进行修改将数据重新存到全局，这样就导致我的头像和昵称不能为空，不然修改后的头像和昵称会被修改为空。

<template><view><Navbar titleText="个人信息" @goBack="goBack"></Navbar><view class="box"><view class="title">头像</view><buttonclass="box"open-type="chooseAvatar"@chooseavatar="onChooseAvatar"><image class="avatar" :src="avatarUrl"></image></button></view><view class="box"><view class="title">昵称</view><inputtype="nickname"@blur="userNameInput"class="name"placeholder="请输入昵称"/></view><view class="pushBtn"><u-button@click="login"shape="circle":custom-style="customStyle":ripple="true"ripple-bg-color="#909399">确定</u-button></view></view>
</template><script>
import Navbar from "@/components/navBar/index.vue";
import store from "@/store/index.js";
const defaultAvatarUrl ="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
export default {components: {Navbar,},data() {return {avatarUrl: defaultAvatarUrl,nickname: undefined,customStyle: {width: "100%",height: "100%",color: "white",fontWhite: "600",backgroundImage: "linear-gradient(to right, #648CEA , #285EDA);",border: "2rpx soild #285EDA",fontSize: "36rpx",},header: {},action: "",images: undefined,};},onLoad() {this.header = {Authorization: "Bearer " + this.$store.state.user.userinfo.wxToken,};this.action = this.$BASE_URL + "/property/home/upload";},methods: {onChooseAvatar(e) {const { avatarUrl } = e.detail;this.avatarUrl = avatarUrl;uni.uploadFile({url: this.$BASE_URL + "/property/home/upload",filePath: avatarUrl,header: this.header,name: "file",formData: {user: "test",},success: (uploadFileRes) => {let obj = JSON.parse(uploadFileRes.data);this.images = obj.url;},});},//获取昵称输入内容userNameInput(e) {this.nickname = e.detail.value;},login() {if (this.images == "" || this.images == undefined) {this.$u.toast("头像不能为空");return;}if (this.nickname == "" || this.nickname == undefined) {this.$u.toast("昵称不能为空");return;}let wechatId = this.$store.state.user.userinfo.wechatId;let nickname = this.nickname;let headimgUrl = this.images;let wxToken = this.$store.state.user.userinfo.wxToken;let params = {wechatId: wechatId,nickname: nickname,headimgUrl: headimgUrl,wxToken: wxToken,};this.$u.api.updateWechatUser(params).then((res) => {store.commit("SET_USERINFO", res.data);this.goBack();});},goBack() {let pages = getCurrentPages();let prevPage = pages[pages.length - 2];prevPage.$vm.refresh = Math.random() * 100;this.$u.route({type: "navigateBack",delta: 1,});},},
};
</script><style lang="scss" scoped>
.box {display: flex;background: white;justify-content: space-between;padding: 10rpx 20rpx;margin-top: 10rpx;.title {line-height: 100rpx;}.avatar {width: 100rpx;height: 100rpx;}.name {padding: 30rpx 80rpx;border-color: #dcdfe6;text-align: left;}
}
.pushBtn {margin: 32rpx;letter-spacing: 2rpx;height: 100rpx;width: calc(100% - 64rpx);
}
</style>

4. 最后看看效果

5. 如果有更好的建议，或者问题，欢迎小伙伴评论提出。

小程序用户头像昵称获取不到解决办法相关推荐

小程序用户头像昵称获取规则调整公告及微信小程序基础库的问题
更新时间:2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访问,小程序通过 wx.getUserProfile 接口将正常返回用户头 ...
关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式
一.背景小程序用户头像昵称获取规则调整公告:小程序用户头像昵称获取规则调整公告 | 微信开放社区二.案例 1.点击登录按钮点击登录按钮,先去检查用户授权信息,会弹出用户授权弹窗(首次),用户点击 ...
taro小程序用户头像昵称获取
微信发布<小程序用户头像昵称获取规则调整公告>之后,无法再使用getUserProfile获取用户头像和昵称,因此小程序官方提供了头像昵称填写功能来完善个人资料. 对button添加ope ...
微信小程序用户头像昵称获取规则调整对应
根据微信社区的最新公告,自2022年11月8日24时起,小程序 wx.getUserProfile 接口.wx.getUserInfo 接口获取用户昵称头像将被收回对于来自低于2.27.1版本的访问 ...
微信小程序用户头像昵称获取规则
学习了一下写小程序,随手记录一下,就当提醒自己不要半途而废. 2022年10月底起,基础库2.27.1以上版本的小程序已无法直接通过授权获取用户的头像和昵称.b站的很多教程使用的仍是wx.getUse ...
微信小程序用户头像昵称获取新规适配教程，用户自定义头像昵称
关于login接口,大家可以看官方文档,相信大家程序也都已经写好了这个接口 // pages/login/index.js Page({/*** 页面的初始数据*/data: {},showNameC ...
小程序用户头像昵称，微信头像昵称填写onChooseAvatar（2022最佳实践uniapp和原生）
官方调整公告小程序用户头像昵称获取规则调整公告解决方案1 如有必要场景需收集用户头像昵称,可在个人中心或设置等页面让用户完善个人资料解决方案二(官方) 微信头像昵称填写使用方法头像选择需要 ...
小程序用户头像昵称，微信头像昵称填写能力 uniapp和原生小程序
官方调整公告链接:小程序用户头像昵称获取规则调整公告 | 微信开放社区使用方法头像选择需要将 button 组件 open-type 的值设置为 chooseAvatar,当用户选择需要使用的头 ...
微信小程序最新用户头像昵称获取规则调整应对措施（2022）
目录一.调整二.应对措施 2.1 更新头像 2.2 更新昵称三.完整代码一.调整小程序用户头像昵称获取规则调整公告以前通过wx.getUserProfile获取用户信息,用户点击同意以后, ...

小程序用户头像昵称获取不到解决办法

小程序用户头像昵称获取不到解决办法相关推荐

最新文章

热门文章