小程序中头像昵称填写

官方文档

参考小程序用户头像昵称获取规则调整公告

新的小程序版本不能通过wx.getUserProfile和wx.getUserInfo获取用户信息

      <van-field label="{{Avatar}}" label-class="field-label" right-icon-class="field-right-icon-class"
        input-class="field-input" input-align="right" readonly>
        <view slot="right-icon" class="right-icon">
          <button class="right-icon__btn" open-type="chooseAvatar" bindchooseavatar="getAvater"
            style="border: 1px solid;"></button>
          <image class="right-icon__avatar" src="{{userinfo.avatarUrl}}" />
        </view>
      </van-field>
      <van-field label="{{Name}}" required label-class="field-label" error-message="{{nicknameMessage}}" input-class="field-input" input-align="right">
        <input slot="input" value="{{ userinfo.nickname }}"  type="nickname" class="right-input field-input" placeholder="{{PleaseInput}}{{Name}}"
        placeholder-style="color: #c4c4c4"  maxlength="{{30}}" bind:input="changeName" bind:change="changeName" />
      </van-field>

注意昵称填写，同时绑定了input和change事件（input是用户输入时触发，change是直接选择微信昵称时触发）

    getAvater(event) {
        console.log(9, event);
        console.log('event', event.detail.avatarUrl);
        this.setData({
            changeAvatar: true,
            userinfo: Object.assign({}, this.data.userinfo, {
                avatarUrl: event.detail.avatarUrl,
            })
        })
    },

    changeName(e) {
        console.log('e.detail.value', e.detail.value);
        this.setData({
            userinfo: Object.assign({}, this.data.userinfo, {
                nickname: e.detail.value
            }),
            nicknameMessage: !e.detail.value ? this.data.PleaseInput + this.data.Name : '',
        })
    },