引言

由于小程序在不久之后将对 getUserProfile 接口进行回收，届时将无法获取用户的头像以及昵称，只能使用【头像昵称填写能力】的方法获取，本文章使用的是uniapp，同时适用于原生小程序

【头像昵称填写能力】使用方法

// 创建页面
<template><view class="info-set"><button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="changeAvatar"><img :src="avatar" class="avatar-img" /></button><form @submit="formSubmit"><view class="username-content"><view class="user-title">昵称</view><input class="user-input" type="nickname" name="input" placeholder="请输入昵称" /></view><button class="submit-btn" formType="submit">提交</button></form></view>
</template><script>
import { showToast, uploadFile } from '@/utils/asyncWx.js';
import { isHttpOrHttps, randomString } from '@/utils/replace.js';
// 此方法是项目获取用户信息方法，根据自己项目进行替换
import { getStorageUserInfo, setStorageUserInfo } from '@/utils/storage.js';
// 此方法是项目获取oss参数接口，根据自己项目进行替换
import { getOssPolicy } from '@/api/ossUpload';
export default {data() {return {// 上传oss所需签名uploadOssPolicy: {},userInfo: getStorageUserInfo(),avatar: getStorageUserInfo().avatar};},methods: {changeAvatar(e) {this.avatar = e.detail.avatarUrl;},async formSubmit(e) {// 后缀名const suffix = this.avatar.split('.').pop();// 图片的正式路径（项目只需要上传半路径，因此此路径不包含基准路径）const imgRelativePath = this.uploadOssPolicy.dir + '/' + randomString(6, suffix);const imageType = /\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(imgRelativePath);if (!this.avatar || !imageType) return showToast({ title: '请上传图片或正确图片' });if (!e.detail.value.input) return showToast({ title: '请输入昵称' });// oss上传参数，根据自己项目进行替换const uploadData = {name: imgRelativePath,key: imgRelativePath,policy: this.uploadOssPolicy.policy,OSSAccessKeyId: this.uploadOssPolicy.accessKeyId,signature: this.uploadOssPolicy.signature,success_action_status: '200',callback: this.uploadOssPolicy.callback};// 上传图片所有参数，属性值根据自己项目进行替换const uploadImagesData = {url: this.uploadOssPolicy.host,filePath: this.avatar,fileType: 'image',name: 'file',formData: uploadData};// 由于图片路径为临时路径，因此需要上传至项目服务器转化为正式路径await uploadFile(uploadImagesData);const data = {avatar: imgRelativePath,nickname: e.detail.value.input};// 发送信息修改请求...this.userInfo.avatar = isHttpOrHttps(imgRelativePath);this.userInfo.nickName = e.detail.value.input;setStorageUserInfo(this.userInfo);}},onLoad() {getOssPolicy().then(res => {this.uploadOssPolicy = res.data;});}
};
</script><style lang="scss" scoped>
.info-set {.avatar-btn {width: 200rpx;height: 200rpx;margin: 50rpx auto;padding: 0;background: none;border-radius: 50%;.avatar-img {width: 100%;height: 100%;}}.username-content {display: flex;align-items: center;padding: 20rpx;border-top: 1px solid #f5f5f5;border-bottom: 1px solid #f5f5f5;.user-title {width: 20%;height: 80rpx;line-height: 80rpx;font-size: 28rpx;}.user-input {flex: 1;height: 80rpx;line-height: 80rpx;padding: 0 28rpx;color: #333;font-size: 28rpx;}}.submit-btn {margin: 80rpx 24rpx 0;color: #fff;font-size: 32rpx;background-color: #333;border-radius: 4rpx;box-sizing: border-box;}
}
</style>

页面使用到的封装方法

asyncWx.js 文件

/*** 消息提示框*/export const showToast = ({ title }) => {return new Promise((resolve, reject) => {uni.showToast({title: title,icon: 'none',duration: 2000,success: (result) => {resolve(result)},fail: (err) => {reject(err)}});})
}// 上传资源
export const uploadFile = (data) => {uni.showLoading({ title: "正在上传..." });return new Promise((resolve, reject) => {uni.uploadFile({url: data.url,filePath: data.filePath,fileType: data.fileType,name: data.name,header: {'content-type': 'multipart/form-data'},formData: data.formData,success: (res) => {resolve(res)},fail: (err) => {reject(err)},complete: () => {uni.hideLoading();}});})
}

replace.js 文件

// 拼接图片视频路径
export const isHttpOrHttps = (url) => {const reg = /http[s]{0,1}:\/\/([\w.]+\/?)\S*/;if (url) {if (reg.test(url)) {return url} else {// process.uniEnv.UNI_BASE_OSS_IMAGES 是 oss 的基准路径return process.uniEnv.UNI_BASE_OSS_IMAGES + url}} else {return;}
};// 随机生成文件名
export const randomString = (len, suffix) => {const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz12345678';const maxPos = chars.length;let fileName = '';for (let i = 0; i < len; i++) {fileName += chars.charAt(Math.floor(Math.random() * maxPos));}return fileName + '_' + new Date().getTime() + '.' + suffix;
};

注意

【头像昵称填写能力】在用户登录成功之后进行或者未登录前进行都可以

此方法是查询资料以及根据官方示例作出，如有错误，欢迎各位大神指出

小程序【头像昵称填写能力】使用相关推荐

微信小程序头像昵称填写能力
1.基本介绍微信小程序获取头像昵称的能力,最近又进行了一次调整,如果没有记错这是今年第三次调整了,每次调整每个开发者心中我相信都跟我一样,万马奔腾...今天写个demo体验下实际效果如何. 详细信息 ...
微信小程序头像昵称填写功能
自 2022 年 10 月 25 日 24 时后(以下统称 "生效期" ),用户头像昵称获取规则将进行如下调整: 自生效期起,小程序 wx.getUserProfile 接口将被收 ...
2022年12月份最新小程序头像昵称获取方式
小程序头像昵称获取方式又双叒改变了,自小程序基础库2.21.2开始,小程序开始废弃wx.getUserProfile接口,新提交的小程序从此接口获取的头像昵称均变为默认头像和昵称,这对于一个开发了几百 ...
小程序授权头像昵称改为头像昵称填写能力详解
自 2022 年 10 月 25 日 24 时后,微信小程序不再能通过授权直接获取到用户的微信头像和昵称:为了保护用户隐私,改成头像昵称填写能力 ,获取头像昵称的流程变复杂了. 官方公告头像昵称获 ...
微信小程序获取用户头像和昵称(头像昵称填写能力)
开放能力调整公告总体来说就是通过按钮来授权获取用户基础信息的能力都没啦(wx.getUserProfile,wx.getUserInfo都不行了),都要使用新版本的 [头像昵称填写能力]啦. 小程序 ...
小程序用户头像昵称，微信头像昵称填写能力 uniapp和原生小程序
官方调整公告链接:小程序用户头像昵称获取规则调整公告 | 微信开放社区使用方法头像选择需要将 button 组件 open-type 的值设置为 chooseAvatar,当用户选择需要使用的头 ...
小程序头像和昵称填写能力用底部弹框界面实现
最近,微信小程序又更新了文档,关于获取头像和昵称需要进行适配. https://developers.weixin.qq.com/community/develop/doc/00022c683e8a8 ...
微信小程序_头像昵称填写
头像昵称填写前言从基础库 2.21.2 开始支持当小程序需要让用户完善个人资料时,可以通过微信提供的头像昵称填写能力快速完善. 根据相关法律法规,为确保信息安全,由用户上传的图片.昵称等信息微信 ...
微信小程序获取用户信息（getUserProfile接口回收后）——通过头像昵称填写获取用户头像和昵称
背景:最近在用uniapp写微信小程序授权登录的时候,发现项目在微信开发者工具中调试是正常的,但是在真机运行时,返回的用户数据中昵称变成了微信用户,头像变成了默认的灰底头像.接着去百度了一下发现出现这 ...

小程序【头像昵称填写能力】使用

小程序【头像昵称填写能力】使用

引言

【头像昵称填写能力】使用方法

页面使用到的封装方法

asyncWx.js 文件

replace.js 文件

注意

小程序【头像昵称填写能力】使用相关推荐

最新文章

热门文章

小程序 【头像昵称填写能力】使用

小程序 【头像昵称填写能力】使用

引言

【头像昵称填写能力】使用方法

页面使用到的封装方法

asyncWx.js 文件

replace.js 文件

注意

小程序 【头像昵称填写能力】使用相关推荐

最新文章

热门文章

小程序【头像昵称填写能力】使用

小程序【头像昵称填写能力】使用

小程序【头像昵称填写能力】使用相关推荐