小程序头像昵称获取

· 2 分钟阅读时长

最近处理小程序，发现微信小程序中获取用户头像和昵称有变动，当然官方文档给的容易让人搞错。这里mark下当前方案。

当前方案如下

wx.getUserProfile-服务端解密获取用户信息

注意：wx.getUserProfile不再提示授权弹窗，但会正常获取encrypted_data/code/iv信息。消息体里的userinfo只是为了兼容老版本，不要使用。

小程序端支持用户修改头像/昵称信息

1. 头像获取

使用 <button open-type="chooseAvatar"> 让用户主动选择头像：

<!-- wxml -->
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl || '/images/default-avatar.png'}}"></image>
</button>

// js
Page({
  data: {
    avatarUrl: ''
  },
  
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail
    this.setData({
      avatarUrl: avatarUrl
    })
    
    // 可选：上传到服务器
    this.uploadAvatar(avatarUrl)
  },
  
  uploadAvatar(tempFilePath) {
    wx.uploadFile({
      url: 'https://your-server.com/upload',
      filePath: tempFilePath,
      name: 'avatar',
      success: (res) => {
        console.log('头像上传成功', res)
      }
    })
  }
})

2. 昵称获取

使用 <input type="nickname"> 让用户输入昵称：

<!-- wxml -->
<form bindsubmit="onSubmit">
  <input
    type="nickname" 
    class="weui-input" 
    placeholder="请输入昵称"
    value="{{nickname}}"
    bindinput="onNicknameInput"
  />
  <button formType="submit">保存</button>
</form>

// js
Page({
  data: {
    nickname: ''
  },
  
  onNicknameInput(e) {
    this.setData({
      nickname: e.detail.value
    })
  },
  
  onSubmit(e) {
    const { nickname } = e.detail.value
    if (!nickname.trim()) {
      wx.showToast({
        title: '请输入昵称',
        icon: 'none'
      })
      return
    }
    
    this.saveUserInfo(nickname)
  },
  
  saveUserInfo(nickname) {
    // 保存到本地或服务器
    wx.setStorageSync('nickname', nickname)
    wx.showToast({
      title: '保存成功'
    })
  }
})

写在最后

微信小程序的文档还是如此烂，大家只能一边恶心，一边用吧，珍重。