小程序获取微信头像昵称（头像昵称填写）

一、头像选择

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

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

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
    <image class="avatar" wx:if="{{avatarUrl == ''}}" src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"></image>
    <image class="avatar" wx:else src="{{avatarUrl}}"></image>
</button>

二、昵称填写

需要将 input 组件 type 的值设置为 nickname，当用户在此input进行输入时，键盘上方会展示微信昵称。
提示：从基础库2.24.4版本起，在onBlur 事件触发时，微信将异步对用户输入的内容进行安全监测，若未通过安全监测，微信将清空用户输入的内容，建议开发者通过 form 中form-type 为submit 的button 组件收集用户输入的内容。

<form bindsubmit="getUserName">
    <input type="nickname" name="nickname" value="{{nickname}}" class="nickname" placeholder="请输入昵称" placeholder-style="text-align: center;" />
    <button class="submit-btn" form-type="submit">确定</button>
</form>

getUserName(e) {
    // 填入之后获取不到填入的数据，在提交表单的时候可以获取到
    const that = this;
    let { nickname } = that.data;
    nickname = e.detail.value.nickname;
    that.setData({
      nickname,
    });
    // 下面可以写一些判断，判断是否填入图像昵称
  },

---

完整代码

 <!-- 头像昵称填写弹窗 -->
  <view class="userinfo-mask" wx:if="{{userInfoMask}}">
    <view class="userinfo">
      <!-- 关闭按钮 -->
      <view class="close-btn" bindtap="closeUserInfoMask">
        <van-icon name="cross" />
      </view>
      <view class="notice">请点击设置图像昵称</view>
      <!-- 头像选择 -->
      <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
        <image class="avatar" wx:if="{{avatarUrl == ''}}" src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0"></image>
        <image class="avatar" wx:else src="{{avatarUrl}}"></image>
      </button>
      <!-- 昵称填写 -->
      <form bindsubmit="getUserName">
        <input type="nickname" name="nickname" value="{{nickname}}" class="nickname" placeholder="请输入昵称" placeholder-style="text-align: center;" />
        <view wx:if="{{disabled}}" class="submit-btn">图像上传中</view>
        <button wx:else class="submit-btn" form-type="submit">确定</button>
      </form>
    </view>
  </view>

Page({
  data: {
    avatarUrl: "",
    nickname: "",
    // 判断是否显示填写图像昵称弹窗
    userInfoMask: false,
    // 判断图像是否正在上传
    disabled: false,
  },

  onChooseAvatar(e) {
    const { avatarUrl } = e.detail;
    console.log(avatarUrl);
    // avatarUrl是图像的临时地址，传给后台返回真正的地址
    this.setData({
        avatarUrl
    })
  },

  getUserName(e) {
    const that = this;
    let { nickname, avatarUrl } = that.data;
    nickname = e.detail.value.nickname;
    that.setData({
      nickname,
    });
    if (avatarUrl == "") {
      wx.showToast({
        title: "请填入图像",
        icon: "none",
      });
    } else if (nickname == "") {
      wx.showToast({
        title: "请输入昵称",
        icon: "none",
      });
    }
  },

  closeUserInfoMask() {
    this.setData({
      userInfoMask: false,
    });
  },
});