小程序又修改了头像和昵称的获取方式，一个破玩意儿改来改去的。
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html
自 2022 年 10 月 25 日 24 时后：
小程序 wx.getUserProfile 接口将被收回
插件通过 wx.getUserInfo 接口获取用户昵称头像将被收回
如业务需获取用户头像昵称，可以使用头像昵称填写能力（基础库 2.21.2 版本开始支持）
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html
1.先放效果图
下图是应用实例的截图。
小程序古了个诗界面截图.JPG
2.page.wxml代码
以弹出窗口的效果让用户填写头像和昵称。
代码中：mask区域是遮罩层，用于屏蔽主页面内容，layoutWrap区域是弹出窗口内容，让用户填写。
<!--mask layout-->
<view class="mask bg-black" wx:if="{{popupInputNicknameBoxFlg || popupInputTeamBoxFlg}}">
</view>
<!--Input Nickname layout-->
<view class="layoutWrap" wx:if="{{popupInputNicknameBoxFlg}}">
<view class="layout light bg-mauve">
<view class="cuIcon-close hiddenPopup" bindtap="hiddenInputNicknameBox"></view>
<view class="title">头像昵称填写</view>
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{user_data.avatarUrl?user_data.avatarUrl:defaultAvatarUrl}}" mode="aspectFill"></image>
</button>
<form bindsubmit="onSaveAvatarNickname">
<input name="nickname" maxlength="20" value="{{user_data.nickname}}" placeholder="请输入昵称"/>
<button form-type="submit" class="saveBtn bg-mauve">保存</button>
</form>
</view>
</view>
3.page.wxss
/* mask layout */
.mask {
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity:0.8;
z-index: 2;
}
/* layout */
.layoutWrap {
position: absolute;
top: 20%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
font-size: small;
z-index: 3;
}
.layout {
position: relative;
width: 600rpx;
height: 700rpx;
border-radius: 15rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.layout .title {
font-size: larger;
margin-bottom: 25rpx;
}
.layout .avatar {
width: 150rpx;
height: 150rpx;
border: 1rpx solid #ffffff;
border-radius: 50%;
}
.layout input {
margin-top: 25rpx;
margin-bottom: 50rpx;
width: 300rpx;
border: 1rpx solid #ffffff;
text-align: center;
}
.layout .saveBtn {
width: 300rpx;
padding: 15rpx 0;
text-align: center;
border-radius: 5rpx;
margin-top: 25rpx;
}
.hiddenPopup {
position: absolute;
right: 15rpx;
top: 15rpx;
font-size: xx-larger;
}
4.page.js
用户使用场景：
- 用户选择头像后，后台通过onChooseAvatar将其保存到临时路径。
- 用户输入昵称。
- 用户点击保存按钮
后台处理逻辑：
- 校验是否选择头像（否，则提示；是，继续处理）
- 校验是否填写昵称（否，则提示；是，继续处理）
- 上传头像（将其从本地路径上传到云存储）
- 保存用户昵称和头像地址数据到数据库
// 当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。
onChooseAvatar: myUtils.throttleFunc(function(e) {
const { avatarUrl } = e.detail
this.setData({
['user_data.avatarUrl']: avatarUrl,
})
}, 3000), // 节流，xx毫秒内重复点击无效
// 点击保存按钮，先上传头像到存储，再保存数据到数据库
onSaveAvatarNickname: myUtils.throttleFunc(function(e) {
// 没有openid，则不继续处理
if(!this.data.user_data.openid) {return}
// 判断是否选择了头像
let avatarUrl = this.data.user_data.avatarUrl
if(!avatarUrl) {
console.log('please choose avatar...')
wx.showToast({
icon: 'none',
title: '请选择头像',
})
return
}
// 判断是否输入了昵称
let nickname = e.detail.value.nickname.trim()
if(!nickname) {
console.log('please input nickname...')
wx.showToast({
icon: 'none',
title: '请输入昵称',
})
return
}
// 提示
wx.showLoading({
mask: true,
title: '保存...',
})
// 上传头像
this.uploadAvatarUrl(avatarUrl, nickname)
}, 3000), // 节流，xx毫秒内重复点击无效
// 上传头像
uploadAvatarUrl(avatarUrl, nickname) {
var that = this
// 每个用户的头像唯一，采用openid命名
let cloudPath = 'avatar/' + this.data.user_data.openid + '.jpg'
console.log('avatarUrl is %s', avatarUrl )
wx.cloud.uploadFile({
cloudPath: cloudPath, // 保存到存储中的路径及文件名
filePath: avatarUrl, // 本地待上传的文件路径
success: res => {
let fileID = res.fileID
console.log("upload file success, file id is ", fileID)
// 再将fileID和nickname存储到数据库
that.saveNickname(fileID, nickname)
},
fail: err => {
console.log("upload file failure.", err)
},
complete: res => {
console.log("upload option complete.", res)
}
})
},
// 保存头像和昵称
saveNickname(fileID, nickname) {
var that = this
// 调用云函数
wx.cloud.callFunction({
// 要调用的云函数名称
name: 'saveRecord',
// 传递给云函数的参数
data: {
action: 'saveNickname',
avatarUrl: fileID,
nickname: nickname,
},
success: res => {
console.log('save nickname success', res)
that.setData({
['user_data.avatarUrl']: fileID,
['user_data.nickname']: nickname
})
},
fail: err => {
console.error('save nickname fail', err)
},
complete: () => {
console.log('save nickname complete')
// 关闭提示
wx.hideLoading({
success: (res) => {
that.setData({
popupInputNicknameBoxFlg: false
})
},
})
}
})
},
