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

UniApp 是一套基于 Vue.js 的跨平台框架，用于快速开发微信小程序、H5、支付宝小程序以及更多。下面是一个简单的 UniApp 项目中，利用 `open-type=chooseAvatar` 属性来让用户选择头像的基本代码示例：

<!-- uni-app 页面模板 -->
<template>
  <view class="container">
    <button @click="handleChooseAvatar">选择头像</button>
    <image :src="selectedAvatar" :mode="isShowAvatar ? 'scaleToFill' : 'noBorder'" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedAvatar: '',
      isShowAvatar: false,
    };
  },
  methods: {
    handleChooseAvatar() {
      this.$api.openSetting({
        success(res) {
          if (res.authSetting['scope.userInfo']) {
            this.getUserInfo();
          } else {
            // 如果用户未授权，可以引导用户去设置中心开启权限
            console.log('用户未授权');
          }
        }
      });
    },
    getUserInfo() {
      uni.getUserInfo({
        openType: 'getAvatar', // 这里是关键部分，注意是 getAvatar 而不是 chooseAvatar
        avatarField: ['head肖像'],
        success(res) {
          const avatarUrl = res.tempAvatar;
          this.selectedAvatar = avatarUrl; // 更新头像 URL
          this.isShowAvatar = true; // 显示已选头像
        },
        fail(err) {
          console.error('获取用户信息失败', err);
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
}
</style>

在这个例子中，`getUserInfo` 方法负责调用微信小程序的用户信息接口，并指定需要头像 (`openType: 'getAvatar'`)。请注意，微信小程序的实际API可能会有所不同，此代码仅供参考。