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

引言

由于小程序在不久之后将对 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;
};

注意

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

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