实现微信获取头像组件（小程序原生组件）

Tevin

2025-04-09 e9799a5b4b9f221447cba49e8fbf7bea6b6c0c42

实现微信获取头像组件（小程序原生组件）

 weappNative/chooseAvatar/weappChooseAvatar.js

New file
@@ -0,0 +1,46 @@
/**
 * 微信小程序原生头像选择组件
 * 用于在小程序环境中调用原生的头像选择功能
 * @author Tevin
 * @tutorial
 *  第一步：注册为 Taro 元素组件
 *      打开 Taro 页面的 config.js 配置文件，在 usingComponents 中注册为元素组件
 *      export default {
 *          usingComponents: {
 *              'weapp-choose-avatar': '@components/weappNative/chooseAvatar/weappChooseAvatar',
 *          }
 *      }
 *  第二步：在页面中使用元素组件（直接当元素使用）
 *      <weapp-choose-avatar @chooseAvatar="evt=>onChooseAvatar(evt)">
 *          <button>选择头像</button>
 *      </weapp-choose-avatar>
 *
 * @notice
 *  1. 样式完全由内容决定，组件内部所有样式已清空
 *  2. 绑定事件需要用“@”，返回参数为头像地址
 */
Component({
    behaviors: [],
    options: {
        styleIsolation: 'apply-shared',
    },
    // 相当于 props
    properties: {
        // 禁用状态
        disabled: {
            type: Boolean,
            value: false,
        },
        // 按钮文本
        content: {
            type: String,
            value: '按钮',
        },
    },
    data: {},
    methods: {
        handleChooseAvatar(evt) {
            this.triggerEvent('chooseAvatar', evt.detail);
        },
    },
});

 weappNative/chooseAvatar/weappChooseAvatar.json

New file
@@ -0,0 +1,4 @@
{
    "component": true,
    "usingComponents": {}
}

 weappNative/chooseAvatar/weappChooseAvatar.wxml

New file
@@ -0,0 +1,11 @@
<button
    class="c-choose-avatar"
    type="default"
    plain="true"
    size="mini"
    disabled="{{ disabled }}"
    open-type="chooseAvatar"
    bindchooseavatar="{{ 'handleChooseAvatar' }}"
>
    <slot></slot>
</button>

 weappNative/chooseAvatar/weappChooseAvatar.wxss

New file
@@ -0,0 +1,10 @@
.c-choose-avatar {
    width: auto;
    height: auto;
    padding-left: 0rpx !important;
    padding-right: 0rpx !important;
    margin: 0;
    border-width: 0 !important;
    border-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
}