uniapp 微信小程序 选择头像按钮 使用open-type=chooseavatar 完整代码

UniApp 提供了一个方便的方式来集成微信小程序的功能，包括选择用户头像。以下是一个使用 `open-type="chooseAvatar"` 的完整代码示例，这个属性用于打开微信的相册选择图片功能：

<view class="container">
  <button open-type="chooseAvatar" bindgetuserinfo="getUserInfo" catchcatch="catchError">选择头像</button>
</view>

<script>
Page({
  getUserInfo: function (e) {
    let avatarUrl = e.detail.userInfo.avatarUrl; // 获取到用户头像 URL
    if (!avatarUrl) { // 如果没有获取到头像，提示用户授权
      wx.showModal({
        title: '提示',
        content: '请先授权获取您的头像信息。',
        showCancel: false,
      });
    } else {
      console.log('用户头像已选中:', avatarUrl);
      // 这里可以将 avatarUrl 存储在本地或者提交到服务器
    }
  },
  catchError: function (err) {
    console.error('选择头像出错:', err);
  },
})
</script>

在这个例子中，`bindgetuserinfo` 是事件处理器，当用户选择好头像并授权后，会触发该函数，并返回用户的头像信息。如果用户拒绝授权或者操作过程中出现问题，`catchcatch` 事件处理器会被调用。

记得在项目配置文件（`config.json`）中添加对相机和相册权限的请求：

{
  "permissions": {
    "scope.userProfile": {
      "desc": "获取用户个人信息，用于显示用户头像"
    },
    "scope.imagePicker": {
      "desc": "访问相册数据，允许获取用户上传的图片"
    }
  }
}