以下是微信小程序获取用户头像和昵称的最新实现方案（2025年），基于微信官方最新的用户信息获取规则：

核心要点（2025年更新）

1. 必须使用<button>组件触发
2. 需添加open-type属性
3. 头像和昵称分开获取
4. 需要用户主动点击授权

完整代码示例

WXML 文件

<!-- 获取头像 -->
<button 
  open-type="chooseAvatar" 
  bindchooseavatar="onChooseAvatar"
  class="avatar-btn"
>
  <image 
    src="{{avatarUrl || '/default-avatar.png'}}" 
    class="avatar"
  />
</button>

<!-- 获取昵称 -->
<input 
  type="nickname" 
  class="nickname-input"
  value="{{nickName}}"
  placeholder="请输入昵称"
  bindblur="onNickNameInput"
/>

JS 文件

Page({
  data: {
    avatarUrl: '',
    nickName: ''
  },

  // 获取头像回调
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail
    this.setData({
      avatarUrl: avatarUrl // 临时头像路径
    })
    // 需要自行上传到服务器保存
    this.uploadAvatar(avatarUrl)
  },

  // 获取昵称回调
  onNickNameInput(e) {
    this.setData({
      nickName: e.detail.value
    })
    // 保存昵称到服务器
    wx.request({
      url: 'https://your-api.com/saveUserInfo',
      method: 'POST',
      data: { nickName: e.detail.value }
    })
  },

  // 上传头像到服务器
  uploadAvatar(tempPath) {
    wx.uploadFile({
      url: 'https://your-api.com/uploadAvatar',
      filePath: tempPath,
      name: 'avatar',
      success: (res) => {
        const data = JSON.parse(res.data)
        this.setData({
          avatarUrl: data.permanentUrl // 替换为永久地址
        })
      }
    })
  }
})

WXSS 样式

.avatar-btn {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.nickname-input {
  width: 80%;
  margin: 30rpx auto;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

关键说明（2025年规则）

1. 头像获取

   • 使用 <button open-type="chooseAvatar">
   • 通过 bindchooseavatar 事件回调获取临时路径
   • 必须使用<button>包裹<image>组件

2. 昵称获取

   • 使用 <input type="nickname"> 特殊输入框
   • 通过 bindblur 或 bindinput 获取值
   • 自动触发微信昵称授权弹窗

3. 注意事项

   • 头像临时路径2小时内有效
   • 需自行上传到服务器保存
   • 用户首次操作需要授权弹窗
   • 基础库要求 ≥ 2.21.0

最新授权流程

重要提示：微信已全面禁止自动弹出授权窗口，必须由用户主动触发操作

最佳实践建议

1. 在个人资料页使用半屏引导设计
2. 首次使用时添加图文操作指引
3. 提供默认头像/昵称占位符
4. 处理用户拒绝授权场景（引导二次授权）
5. 敏感接口调用需配置wx.request合法域名

以上代码已适配微信小程序最新用户信息获取规则（截至2025年），实际开发时请参考https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html。