小程序中头像昵称填写

官方文档

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

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

html 复制代码
      <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是直接选择微信昵称时触发)

javascript 复制代码
    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 : '',
        })
    },
相关推荐
Python智慧行囊10 分钟前
微信小程序交互精髓:点击操作与状态管理实战
微信小程序·小程序·交互
paopaokaka_luck20 小时前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
春哥的研究所1 天前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck1 天前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
贝格前端工场1 天前
小程序订阅消息设计:用户触达与隐私保护的平衡法则
大数据·小程序
weixin_lynhgworld1 天前
盲盒一番赏小程序:用科技重新定义“未知的快乐”
科技·小程序
Bruce_Json1 天前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
说私域1 天前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域1 天前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
The_era_achievs_hero2 天前
微信小程序71~80
微信小程序·小程序