501 字
3 分钟
uniapp开发的微信小程序获取头像昵称
自 2022 年 10 月 25 日 24 时后,用户头像昵称获取规则将进行如下调整:
wx.getUserProfile 接口将被收回
wx.getUserInfo 接口获取用户昵称头像将被收回
最新获取头像昵称的方式是输入头像和昵称: 文档地址
所以我在小程序首页进行引导:
点击进入小程序,进行弹框:
弹框的代码:
<uni-popup ref="popup" type="bottom">
<view class="panal">
<view class="bold">设置你的头像、昵称</view>
<view class="border-b small">方便快速在个人中心展示你的信息</view>
<view class="iptdiv border-b">
<text class="bold">头像</text>
<view>
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<view v-if="!avatarUrl">点击设置微信头像</view>
<image v-else class="avatar" :src="avatarUrl"></image>
<uni-icons type="right" size="16"></uni-icons>
</button>
</view>
</view>
<view class="iptdiv border-b">
<text class="bold">昵称</text>
<view class="fc">
<input v-model="nickName" type="nickname" class="weui-input" placeholder="请输入昵称" />
<uni-icons type="right" size="16"></uni-icons>
</view>
</view>
<view class="btndiv">
<button @click="closePopup" class="cancel-btn">拒绝</button>
<button @click="goHome" class="confirm-btn" :class="{ opc: !canClick }" :disabled="!canClick">确认</button>
</view>
</view>
</uni-popup>
主要代码为:
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<view v-if="!avatarUrl">点击设置微信头像</view>
<image v-else class="avatar" :src="avatarUrl"></image>
</button>
<input v-model="nickName" type="nickname" class="weui-input" placeholder="请输入昵称" />
输入后获得avatarUrl,nickName
此时的 avatarUrl 为临时地址,所以需要在合适的时候将他放入 uniapp 云存储中:
const result = await uniCloud.uploadFile({
filePath: avatarUrl.value,
cloudPath: `avatar-${uni.getStorageSync("xzs-openId")}.png`,
});
console.log(result.fileID);
fileID 就是可以使用的外链
将头像昵称使用 uniapp 的云函数上传到云数据库中
const obj = {
avatarUrl: result.fileID,
nickName: nickName.value,
};
uniCloud
.callFunction({
name: "create-user",
data: {
openId: uni.getStorageSync("xzs-openId"),
avatarUrl: obj.avatarUrl,
nickName: obj.nickName,
},
})
.then((res) => {
console.log("create-user==>", res.result);
if (res.result.code == 0) {
//
} else {
uni.showToast({
icon: "none",
title: res.result.msg,
});
}
});
云函数:
"use strict";
exports.main = async (event, context) => {
//event为客户端上传的参数
console.log("event : ", event);
const db = uniCloud.database();
const collection = db.collection("user");
const list = await collection
.where({
openId: event.openId,
})
.get();
if (list.data.length > 0) {
return {
code: 0,
};
}
const indexNum = (await collection.get()).data.length;
const data = {
openId: event.openId,
userInfo: {
nickName: event.nickName,
avatarUrl: event.avatarUrl,
signature: null,
sex: 1,
age: 0,
area: null,
occupation: null,
hobby: null,
privateId: null,
},
createNum: indexNum + 1,
createTime: new Date().getTime(),
updateTime: new Date().getTime(),
};
const result = await collection.add(data);
if (result) {
return {
code: 0,
};
} else {
return {
code: -1,
msg: "网络异常",
};
}
};