微信小程序获取头像昵称能力API

先贴出官方文档

头像昵称填写 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html自 2022 年 10 月 25 日 24 时后小程序 wx.getUserProfile 接口将被收回。

还记得刚开始的时候 getUserInfo 返回信息齐全，头像昵称性别地区都有，一步一步被阉割取消，而如今getUserProfile 也被收回，前端工程师们的头发也被一根根的掉落。为了让大家少掉几根头发，整理了下最近自己的项目要用到的头像昵称填写能力。

uniapp封装了微信登录的组件

头像上传是可以自定义传图片的，我们可以让后端给个上传图片接口，将临时本地路径改成自己项目线上的路径，如果用户不使用自己头像用上传相册的图片也是一样的

回显的时候直接回显线上的路径

获取昵称的时候注意，最好不要使用v-mode，因为点击获取的时候拿不到自己的昵称，只有去输入了才会有效。使用change事件去拿到value值

这样我们的头像和昵称又回来啦！！

以下就是组件代码

<template><view class="loginbox"><view class="title">点击获取微信头像和昵称</view><button class="avatar" open-type="chooseAvatar"  @chooseavatar="changeAvatar"><image :src="avatarUrl" v-if="avatarUrl"></image><text v-else>点击获取头像</text></button> <input type="nickname" class="weui-input" placeholder="点击获取昵称" @change="getNickname"/><view class="btn-img" @click="upmsg">确认</view></view>
</template><script>import {uploadtempFile} from "@/utils/upload.js"import {updateProfileAPI} from "@/api/api.js"export default {name:"wxlogin",data() {return {avatarUrl:"",nickname:""};},methods:{changeAvatar(e){console.log(e)var temp=e.detail.avatarUrl;uploadtempFile(temp).then(res=>{this.avatarUrl=res})},getNickname(e){console.log(e.detail.value)this.nickname=e.detail.value},upmsg(){var data={avatar:this.avatarUrl,nickname:this.nickname}console.log(data)updateProfileAPI(data).then(res=>{this.$emit("over")})}}}
</script><style lang="less" scoped>
.loginbox{border-radius: 20rpx;width: 500rpx;height: 500rpx;background-color: #fff;padding: 30rpx;.title{text-align: center;line-height: 80rpx;font-weight: bold;font-size: 35rpx;}.avatar{width: 150rpx;height: 150rpx;border-radius: 50%;background-color: #efefef;margin-top: 20rpx;padding: 0;display: flex;align-items: center;justify-content: center;image{width: 150rpx;height: 150rpx;border-radius: 50%;}text{color: #666;font-size:20rpx;}}.weui-input{background-color: #efefef;margin-top: 30rpx;height: 70rpx;line-height: 70rpx;border-radius: 5rpx;padding-left: 10rpx;}.btn-img{width: 500rpx;height: 90rpx;border-radius: 50rpx;background-color: #E93E34;line-height: 90rpx;color: #fff;text-align: center;           margin: 50rpx auto;}
}
</style>

utils.js上传图片方法

export function uploadtempFile(path) {return new Promise((resolve, reject) => {const token = uni.getStorageSync('token');uni.uploadFile({url: `${baseURL}/api/wx/uploadAvatar`,filePath: path,name: 'avatar',header: {"authorization": "Bearer " + token,"Content-Type": "application/json;charset=UTF-8"},success(res) {var data = JSON.parse(res.data)if (data.code == 200) {resolve(data.data)} else {reject(data.msg);}},fail(err) {reject(err);} })})}

微信小程序获取头像昵称能力API相关推荐

微信小程序获取头像昵称保存头像到服务器
微信官方推荐的替代做法: 头像昵称填写 | 微信开放文档 (qq.com) wxml <button class="avatar" open-type="choos ...
微信小程序获取头像昵称，限制头像大小
把用户的头像上传,限制在2M以内代码 that.onChooseAvatar = (e) => {console.log('onChooseAvatar2', e);const avatarU ...
微信小程序获取头像地址
微信小程序获取头像地址获取用户信息开发接口 wx.getUserInfo 接口参数说明: 微信文档地址: 获取用户信息开发接口 wx.getUserInfo 下面展示一些内联代码片. // 必须是 ...
关于微信小程序新版头像昵称API 接口处理
根据微信官方文档的说法,2022年10月之后,原本的获取昵称和头像的api,也就是wx.getUserProfile和wx.getUserInfo将停止支持,在那之后发布和更新的小程序必须停止使用这两 ...
关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式
一.背景小程序用户头像昵称获取规则调整公告:小程序用户头像昵称获取规则调整公告 | 微信开放社区二.案例 1.点击登录按钮点击登录按钮,先去检查用户授权信息,会弹出用户授权弹窗(首次),用户点击 ...
最新uniapp 微信小程序获取头像操作指南
小程序用户头像昵称获取规则调整公告调整说明自 2022 年 10 月 25 日 24 时后(以下统称 "生效期" ),用户头像昵称获取规则将进行如下调整: 自生效期起,小程序 ...
修复微信小程序不能获取头像和昵称的bug，微信小程序新版头像昵称API使用
导读: 大厂程序员都是有KPI绩效考核的,所以他们不能闲着,每天要想着怎么优化程序代码.怎么满足奇葩用户的需求,所以苦逼了我们这些小公司程序员,微信一个小小的API接口改动,可能就让一个小公司因此损失 ...
微信小程序用户头像昵称获取规则
学习了一下写小程序,随手记录一下,就当提醒自己不要半途而废. 2022年10月底起,基础库2.27.1以上版本的小程序已无法直接通过授权获取用户的头像和昵称.b站的很多教程使用的仍是wx.getUse ...
微信小程序获取用户昵称和头像
getUserInfo.js Page({data: {userInfo: {},hasUserInfo: false,canIUseGetUserProfile: false,},onLoad() ...

微信小程序获取头像昵称能力API

微信小程序获取头像昵称能力API相关推荐

最新文章

热门文章