头像昵称填写
前言
从基础库 2.21.2 开始支持
当小程序需要让用户完善个人资料时,可以通过微信提供的头像昵称填写能力快速完善。
根据相关法律法规,为确保信息安全,由用户上传的图片、昵称等信息微信侧将进行安全检测,组件从基础库2.24.4版本起,已接入内容安全服务端接口(mediaCheckAsync、msgSecCheck),以减少内容安全风险对开发者的影响。
🌈 官方文档
头像选择
需要将 button 组件 open-type 的值设置为 chooseAvatar ,当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。
从基础库2.24.4版本起,若用户上传的图片未通过安全监测,不触发bindchooseavatar 事件。
昵称填写
需要将 input 组件 type 的值设置为 nickname ,当用户在此 input 进行输入时,键盘上方会展示微信昵称。
从基础库2.24.4版本起,在onBlur 事件触发时,微信将异步对用户输入的内容进行安全监测,若未通过安全监测,微信将清空用户输入的内容,建议开发者通过 form 中form-type 为submit 的button 组件收集用户输入的内容。
使用示例
wxml
<view>
<form catchsubmit="formSubmit">
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar" style="width: 100px; padding: 0;">
<image class="avatar" src="{{avatarUrl}}" mode="widthFix" style="width: 100px;"></image>
</button>
<input type="nickname" class="weui-input" name="nickname" placeholder="请输入昵称" style="border: 1px solid #ccc;padding: 5px 15px;margin-top: 20px;" />
<button style="margin: 30rpx 0" type="primary" formType="submit" style="width: 100%; margin-top: 20px;">Submit</button>
</form>
</view>
js
Page({
data: {
avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
},
onChooseAvatar(e) {
const {
avatarUrl
} = e.detail;
console.log(avatarUrl);
this.setData({
avatarUrl,
});
},
formSubmit(e) {
const {
value
} = e.detail;
const {
nickname
} = value;
console.log('头像地址:', this.data.avatarUrl);
console.log('昵称:', nickname);
},
})
|