[移动开发]微信小程序_头像昵称填写

头像昵称填写

前言

从基础库 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);
    },
})