From e9799a5b4b9f221447cba49e8fbf7bea6b6c0c42 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Wed, 09 Apr 2025 20:25:41 +0800
Subject: [PATCH] 实现微信获取头像组件（小程序原生组件）
---
weappNative/chooseAvatar/weappChooseAvatar.js | 46 +++++++++++++++++++++++
weappNative/chooseAvatar/weappChooseAvatar.wxml | 11 +++++
weappNative/chooseAvatar/weappChooseAvatar.json | 4 ++
weappNative/chooseAvatar/weappChooseAvatar.wxss | 10 +++++
4 files changed, 71 insertions(+), 0 deletions(-)
diff --git a/weappNative/chooseAvatar/weappChooseAvatar.js b/weappNative/chooseAvatar/weappChooseAvatar.js
new file mode 100644
index 0000000..2071405
--- /dev/null
+++ b/weappNative/chooseAvatar/weappChooseAvatar.js
@@ -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);
+ },
+ },
+});
diff --git a/weappNative/chooseAvatar/weappChooseAvatar.json b/weappNative/chooseAvatar/weappChooseAvatar.json
new file mode 100644
index 0000000..59a1db6
--- /dev/null
+++ b/weappNative/chooseAvatar/weappChooseAvatar.json
@@ -0,0 +1,4 @@
+{
+ "component": true,
+ "usingComponents": {}
+}
diff --git a/weappNative/chooseAvatar/weappChooseAvatar.wxml b/weappNative/chooseAvatar/weappChooseAvatar.wxml
new file mode 100644
index 0000000..84d82ae
--- /dev/null
+++ b/weappNative/chooseAvatar/weappChooseAvatar.wxml
@@ -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>
diff --git a/weappNative/chooseAvatar/weappChooseAvatar.wxss b/weappNative/chooseAvatar/weappChooseAvatar.wxss
new file mode 100644
index 0000000..4581835
--- /dev/null
+++ b/weappNative/chooseAvatar/weappChooseAvatar.wxss
@@ -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;
+}
\ No newline at end of file
--
Gitblit v1.9.1