最新解决微信小程序无法显示头像昵称，文末附案例喝酒神器小程序源码

完整代码展示 js文件。

// js
Page({
  data: {
    avatarUrl: defaultAvatarUrl,
    theme: wx.getSystemInfoSync().theme,
  },
  onLoad() {
    wx.onThemeChange((result) => {
      this.setData({
        theme: result.theme
      })
    })
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})
;

完整代码展示 wxml文件。

<view data-weui-theme="{{theme}}">
  <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">    <image class="avatar" src="{{avatarUrl}}"></image>  </button>   <mp-form>    <mp-cells>      <mp-cell title="昵称">        <input type="nickname" class="weui-input" placeholder="请输入昵称"/>      </mp-cell>    </mp-cells>  </mp-form></view>

完整代码展示 wxss文件。

.avatar-wrapper {
  padding: 0;  width: 56px !important;  border-radius: 8px;  margin-top: 40px;  margin-bottom: 40px;}.avatar {  display: block;  width: 56px;  height: 56px;}.container {  display: flex;}

点击下载测试案例小程序源码