小程序 【头像昵称填写能力】使用
小程序 【头像昵称填写能力】使用
·
小程序 【头像昵称填写能力】使用
引言
由于小程序在不久之后将对 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;
};
注意
【头像昵称填写能力】在用户登录成功之后进行或者未登录前进行都可以
此方法是查询资料以及根据官方示例作出,如有错误,欢迎各位大神指出
更多推荐
已为社区贡献7条内容
所有评论(0)