最終效果
1、背景
自 2022 年 10 月 25 日 24 時后，用戶頭像昵稱獲取規(guī)則將進(jìn)行如下調(diào)整
2、頭像昵稱填寫
從基礎(chǔ)庫 2.21.2 開始支持
當(dāng)小程序需要讓用戶完善個人資料時，可以通過微信提供的頭像昵稱填寫能力快速完善。
根據(jù)相關(guān)法律法規(guī)，為確保信息安全，由用戶上傳的圖片、昵稱等信息微信側(cè)將進(jìn)行安全檢測，組件從基礎(chǔ)庫2.24.4版本起，已接入內(nèi)容安全服務(wù)端接口（mediaCheckAsync、msgSecCheck），以減少內(nèi)容安全風(fēng)險(xiǎn)對開發(fā)者的影響。
具體使用方法
需要將 button 組件 open-type 的值設(shè)置為 chooseAvatar，當(dāng)用戶選擇需要使用的頭像之后，可以通過 bindchooseavatar 事件回調(diào)獲取到頭像信息的臨時路徑。
官方示例效果
3、昵稱填寫
具體使用方法
需要將 input 組件 type 的值設(shè)置為 nickname，當(dāng)用戶在此input進(jìn)行輸入時，鍵盤上方會展示微信昵稱。
從基礎(chǔ)庫2.24.4版本起，在onBlur 事件觸發(fā)時，微信將異步對用戶輸入的內(nèi)容進(jìn)行安全監(jiān)測，若未通過安全監(jiān)測，微信將清空用戶輸入的內(nèi)容，建議開發(fā)者通過 form 中form-type 為submit 的button 組件收集用戶輸入的內(nèi)容。
官方示例效果
4、代碼示例
1、wxml
<page-layout>
<view slot="header">
<header-navbar title="個人信息"></header-navbar>
</view>
<!-- 關(guān)鍵代碼 start -->
<view slot="scroll" class="content">
<view class="row">
<view class="text1">頭像：</view>
<button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
<image class="avatar" src="{{userInfo.avatar || ''}}"></image>
</button>
</view>
<view class="row">
<view class="text1">昵稱：</view>
<input type="nickname" class="name-input" name="nickname" value="{{userInfo.nickName||''}}" bindchange="onInput" placeholder="請輸入昵稱" />
</view>
</view>
<!-- 關(guān)鍵代碼 end -->
<view slot="bottom" class="info__footer">
<t-button t-class="footer-btn" theme="primary" content="保存" size="medium" shape="round" hover-class="none" bindtap="tapSave"></t-button>
</view>
</page-layout>
2、js
import request from '../../utils/request'
const baseUrl = require('../../utils/baseUrl')
Page({
data: {
userInfo: {
avatar: '',
customerId: '',
depositNum: '',
mobile: '',
nickName: '',
waterNum: ''
}
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
this.getUserInfo()
},
// 最終提交保存
async tapSave() {
await this.uploadFile()
console.log(this.data.userInfo);
// return
const res = await request('/customerInfo/update', 'PUT', {
"avatar": this.data.userInfo.avatar,
"nickName": this.data.userInfo.nickName,
})
console.log('res', res);
if (res.success) {
wx.showToast({
title: '保存成功',
icon: 'none'
})
wx.switchTab({ url: '/pages/usercenter/index' });
}
},
// 輸入昵稱
onInput(e) {
const { value } = e.detail
console.log('輸入昵稱', value);
this.setData({
['userInfo.nickName']: value
})
},
// 選擇頭像
onChooseAvatar(e) {
console.log('選擇頭像', e);
const { avatarUrl } = e.detail
this.setData({
['userInfo.avatar']: avatarUrl
})
},
uploadFile() {
let that = this
return new Promise((resolve, reject) => {
console.log('uploadFile');
let url = `${baseUrl}/waterStoreFile/upload`
// res.tempFiles[0].tempFilePath
wx.uploadFile({
filePath: this.data.userInfo.avatar,
name: 'file',
url: url,
header: {
'Authorization': wx.getStorageSync('token') || ''
},
success(res) {
let result = JSON.parse(res.data)
console.log('上傳成功', result);
if (result.success) {
console.log('成功');
that.setData({
['userInfo.avatar']: result.data.outsideUrl
})
}
resolve()
},
fail(rej) {
console.log('rej', rej);
resolve(rej)
}
})
})
},
async getUserInfo() {
const res = await request('/customerInfo/get', 'GET')
console.log('個人信息', res);
this.setData({
userInfo: res.data || {}
})
}
})
3、wxss
.content {
padding: 20rpx;
}
.info__footer {
display: flex;
justify-content: center;
align-items: flex-start;
height: 80rpx;
padding-top: 20rpx;
background: #fff;
}
.info__footer .footer-btn {
width: 398rpx;
}
.footer-btn {
background: linear-gradient(90deg, #34AAFF 0%, #0A73EE 100%) !important;
border: none !important;
}
.footer-btn::after {
border: none !important;
}
.content .row {
display: flex;
align-items: center;
height: 110rpx;
padding-left: 20rpx;
}
.content .text1 {
flex: 2;
}
.content .name-input,
.content .avatar-wrapper {
flex: 6;
text-align: right;
}
.content .avatar-wrapper::after {
border: none !important;
}
.content .avatar-wrapper {
display: flex;
justify-content: flex-end;
}
.content .avatar-wrapper .avatar {
display: block;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}
5、手機(jī)示例圖
其他文章
Vue3 + Vite + Ts開源后臺管理系統(tǒng)模板
基于ElementUi或AntdUI再次封裝基礎(chǔ)組件文檔文章來源：http://www.zghlxwxcb.cn/news/detail-714335.html
基于Element-plus再次封裝基礎(chǔ)組件文檔(vue3+ts)文章來源地址http://www.zghlxwxcb.cn/news/detail-714335.html
到了這里，關(guān)于微信小程序獲取用戶頭像和昵稱完美解決方法（最新方法）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
