头像昵称填写

前言

从基础库 开始支持

头像选择

需要将 组件 open-type 的值设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。

从基础库2.24.4版本起，若用户上传的图片未通过安全监测，不触发bindchooseavatar 事件。

昵称填写

使用示例

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);
    },
})