Table of contents
1. Adjustment
Announcement on Adjustment of Mini Program User Avatar and Nickname Obtaining Rules
Previously, user information was obtained through wx.getUserProfile. After the user clicks to agree, the relevant information can be obtained directly. However, the official has recently made an adjustment to directly fill in the avatar and nickname with the default values, so We can no longer obtain user information directly, and need to add a new page for user-defined avatars and nicknames.
2. Countermeasures
WeChat has added the ability to fill in the avatar: fill in the avatar nickname
2.1 Update avatar
It is to set the open-type of the button to chooseAvatar. When the user clicks it, the "modify avatar" event will be triggered.
button button
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
修改头像
</button>
Callback function onChooseAvatar:
//用户选中自定义头像的回调
onChooseAvatar(e) {
const {
avatarUrl
} = e.detail
// 获取到的avatarUrl（临时地址）：http://tmp/ZENIKXqaUC20a19f3c2fd621b82c7662b952e000d532.jpeg
console.log(avatarUrl);
//更新当前页面信息
this.setData({
['userInfo.avatarUrl']: avatarUrl,
})
},
The obtained avatar address is a temporary address, which is not valid for a long time. We need to save the file corresponding to this address to our own server or cloud storage.
For example, use the storage capacity of cloud development: WeChat applet cloud development-storage
2.2 Update nickname
<input type="nickname" class="nick-name-input" placeholder="请输入昵称" bindblur="changeNickName"/>
// 用户修改昵称
changeNickName(e){
let name = e.detail.value;
if(name.length === 0) return;
this.setData({
['userInfo.nickName']: name
})
}
Bindtap is not used here but bindblur is directly used because if the personal WeChat nickname prompted is directly used, the bindtap event will not be triggered.
3. Complete code
It is mainly logic code, and the style needs to be adjusted according to your own business.
index.wxml
<!--index.wxml-->
<view class="container">
<view class="userinfo" wx:if="{
{hasUserInfo}}">
<block>
<image class="userinfo-avatar" src="{
{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{
{userInfo.nickName}}</text>
</block>
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
修改头像
</button>
<input type="nickname" class="nick-name-input" placeholder="请输入昵称" bindblur="changeNickName"/>
</view>
<button bindtap="getUserProfile" wx:else>获取用户信息</button>
</view>
index.js
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
userInfo: {
},
hasUserInfo: false
},
onLoad() {
},
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res.userInfo)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
//用户选中自定义头像的回调
onChooseAvatar(e) {
const {
avatarUrl
} = e.detail
// 获取到的avatarUrl（临时地址）：http://tmp/ZENIKXqaUC20a19f3c2fd621b82c7662b952e000d532.jpeg
console.log(avatarUrl);
this.setData({
['userInfo.avatarUrl']: avatarUrl,
})
},
// 用户修改昵称
changeNickName(e){
let name = e.detail.value;
if(name.length === 0) return;
this.setData({
['userInfo.nickName']: e.detail.value
})
}
})
index.wxss
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
color: #aaa;
}
.userinfo-avatar {
overflow: hidden;
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.avatar-wrapper{
margin: 10px 0;
}
.nick-name-input{
border: 1px solid #f1f1f1;
padding:5px;
}
After modification:
Note: The modified userInfo should be updated synchronously 数据库, because currently only the data in the data has been modified.