From de63cd4c6a62cb2a46604193530c18d63356395e Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Wed, 7 Jan 2026 16:42:28 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=BE=AE=E4=BF=A1=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E5=8F=B7):=20=E5=A2=9E=E5=8A=A0=E5=BE=AE=E4=BF=A1=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E5=8F=B7=E5=92=8C=E5=BE=AE=E4=BF=A1=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E5=8F=B7=E5=88=97=E8=A1=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components-diy/diy-group.vue               |  12 +-
 components-diy/diy-wechat-channel-list.vue | 416 +++++++++++++++++++++
 components-diy/diy-wechat-channel.vue      | 183 +++++++++
 docs/WECHAT_CHANNEL_INTEGRATION.md         | 381 +++++++++++++++++++
 docs/example/wechat-channel-demo.vue       | 165 ++++++++
 5 files changed, 1156 insertions(+), 1 deletion(-)
 create mode 100644 components-diy/diy-wechat-channel-list.vue
 create mode 100644 components-diy/diy-wechat-channel.vue
 create mode 100644 docs/WECHAT_CHANNEL_INTEGRATION.md
 create mode 100644 docs/example/wechat-channel-demo.vue

diff --git a/components-diy/diy-group.vue b/components-diy/diy-group.vue
index 41541b4..16eebc3 100644
--- a/components-diy/diy-group.vue
+++ b/components-diy/diy-group.vue
@@ -251,6 +251,16 @@
 				<diy-icon :value="item"></diy-icon>
 			</template>
 
+			<template v-if="item.componentName == 'WechatChannel'">
+				<!-- 微信视频号 -->
+				<diy-wechat-channel :value="item"></diy-wechat-channel>
+			</template>
+
+			<template v-if="item.componentName == 'WechatChannelList'">
+				<!-- 微信视频号列表 -->
+				<diy-wechat-channel-list :value="item"></diy-wechat-channel-list>
+			</template>
+
 			<!-- 自定义扩展组件 -->
 			<diy-comp-extend :value="item"></diy-comp-extend>
 		</view>
@@ -260,8 +270,8 @@
 <script>
 // 组件组展示
 import DiyMinx from './minx.js'
+
 export default {
-	components: {},
 	props: {
 		diyData: {
 			type: Object
diff --git a/components-diy/diy-wechat-channel-list.vue b/components-diy/diy-wechat-channel-list.vue
new file mode 100644
index 0000000..0b027ed
--- /dev/null
+++ b/components-diy/diy-wechat-channel-list.vue
@@ -0,0 +1,416 @@
+<template>
+	<view :style="componentStyle">
+		<!-- 固定布局模式 -->
+		<view v-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]"
+			style="padding:20rpx;">
+			<view v-for="(item, index) in value.list" :key="index" class="channel-item" @tap="playVideo(item)">
+				<view class="channel-img-wrap">
+					<image class="channel-img" style="border-radius:10rpx;" :src="$util.img(item.coverUrl)"
+						mode="aspectFill" @error="imgError(index)"></image>
+					<view class="channel-play-btn">
+						<image class="play-icon" style="width:30rpx;" :src="$util.img('addon/personnel/shop/view/enterprise/play.png')"
+							mode="widthFix"></image>
+					</view>
+					<view class="channel-stats">
+						<text>{{ item.viewCount }}次观看</text>
+					</view>
+				</view>
+				<view class="channel-info-wrap">
+					<view class="channel-name" :style="{
+						'font-size': (value.font.size * 2 + 'rpx') + ';',
+						'font-weight': value.font.weight + ';',
+						'color': value.font.color + ';'
+					}">{{ item.channelName }}</view>
+					<view class="video-title" :style="{
+						'font-size': (value.font.size * 1.8 + 'rpx') + ';',
+						'color': '#666;'
+					}">{{ item.videoTitle }}</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 其他布局模式 -->
+		<scroll-view v-else :class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
+			:scroll-x="value.showStyle == 'singleSlide'">
+			<view class="uni-scroll-view-content">
+				<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]"
+					:style="{ width: (100 / value.rowCount + '%') + ';' }" @tap="playVideo(item)">
+					<view class="channel-img">
+						<image :style="{
+							'max-width': '100%;',
+							'border-radius': '8rpx;'
+						}" :src="$util.img(item.coverUrl)" mode="aspectFill"
+							:show-menu-by-longpress="true"></image>
+						<view class="channel-play-btn">
+							<image class="play-icon" style="width:30rpx;" :src="$util.img('addon/personnel/shop/view/enterprise/play.png')"
+								mode="widthFix"></image>
+						</view>
+						<view class="channel-stats">
+							<text>{{ item.viewCount }}次观看</text>
+						</view>
+					</view>
+					<view class="channel-text" :style="{
+						'margin-left': '16rpx;',
+						'font-size': (value.font.size * 2 + 'rpx') + ';',
+						'font-weight': value.font.weight + ';',
+						'color': value.font.color + ';'
+					}">{{ item.videoTitle }}</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+
+import DiyMinx from './minx.js'
+export default {
+	name: 'diy-wechat-channel-list',
+	props: {
+		value: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	mixins: [DiyMinx],
+	data() {
+		return {
+			pageWidth: '',
+			indicatorDots: false,
+			swiperCurrent: 0
+		}
+	},
+	created() {
+		// 组件创建时的逻辑
+	},
+	watch: {
+		componentRefresh(newValue) {
+			// 监听组件刷新
+		}
+	},
+	computed: {
+		componentStyle() {
+			let style = '';
+			style += 'background-color:' + this.value.componentBgColor + ';';
+
+			if (this.value.componentAngle == 'round') {
+				style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
+				style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
+				style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
+				style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
+			}
+
+			style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
+			style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
+
+			return style;
+		},
+
+		swiperHeight() {
+			let height = 0;
+
+			if (this.value.mode == 'graphic') {
+				height = (49 + this.value.imageSize) * this.value.pageCount;
+			} else if (this.value.mode == 'img') {
+				height = (22 + this.value.imageSize) * this.value.pageCount;
+			} else if (this.value.mode == 'text') {
+				height = 43 * this.value.pageCount;
+			}
+
+			return 'height:' + (2 * height) + 'rpx';
+		},
+
+		isIndicatorDots() {
+			return this.value.carousel.type != 'hide' &&
+				1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
+		}
+	},
+	methods: {
+		// 播放视频
+		async playVideo(item) {
+			await this.__$emitEvent({
+				eventName: 'video-play', data: item, promiseCallback: (event, handler, awaitedResult) => {
+					if (!awaitedResult) return;
+					// 调用微信视频号播放API
+					if (typeof wx !== 'undefined' && wx.openChannelsActivity) {
+						wx.openChannelsActivity({
+							feedId: item.feedId,
+							success: (res) => {
+								console.log('打开视频号成功', res);
+							},
+							fail: (err) => {
+								console.error('打开视频号失败', err);
+							}
+						});
+					} else {
+						console.error('当前环境不支持微信视频号');
+					}
+				}
+			})
+		},
+
+		// 图片加载错误处理
+		imgError(index) {
+			// 图片加载失败的处理逻辑
+			console.log('图片加载失败:', index);
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.channel-list {
+	&.row1-of3 {
+		display: flex;
+		flex-wrap: wrap;
+
+		.channel-item {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			margin-top: 20rpx;
+			width: calc(33.3333333% - 14rpx);
+			box-sizing: border-box;
+
+			&:nth-child(3n + 3) {
+				width: calc(33.33% - 15rpx);
+			}
+
+			&:nth-of-type(1),
+			&:nth-of-type(2),
+			&:nth-of-type(3) {
+				margin-top: 0;
+			}
+
+			&:nth-child(3n) {
+				width: calc(33.3333333% - 15rpx);
+			}
+
+			&:nth-child(3n-1) {
+				margin-left: 20rpx;
+				margin-right: 20rpx;
+			}
+
+			.channel-img-wrap {
+				position: relative;
+				overflow: hidden;
+				height: 220rpx;
+				border-radius: 10rpx;
+			}
+
+			.channel-img {
+				width: 100%;
+				height: 100%;
+			}
+
+			.channel-play-btn {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				width: 60rpx;
+				height: 60rpx;
+				background-color: rgba(0, 0, 0, 0.4);
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.channel-stats {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+				padding: 10rpx;
+				color: #fff;
+				font-size: 20rpx;
+			}
+
+			.channel-info-wrap {
+				display: flex;
+				flex-direction: column;
+				flex: 1;
+				padding: 10rpx 0;
+
+				.channel-name {
+					margin-bottom: 4rpx;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+				}
+
+				.video-title {
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+				}
+			}
+		}
+	}
+
+	&.row1-of2 {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		.channel-item {
+			position: relative;
+			margin-top: 20rpx;
+			width: calc(50% - 10rpx);
+			display: flex;
+			flex-direction: column;
+			box-sizing: border-box;
+
+			&:nth-child(2n) {
+				margin-right: 0 !important;
+			}
+
+			&:nth-of-type(1),
+			&:nth-of-type(2) {
+				margin-top: 0;
+			}
+
+			.channel-img-wrap {
+				position: relative;
+				overflow: hidden;
+				height: 340rpx;
+				border-radius: 10rpx;
+			}
+
+			.channel-img {
+				width: 100%;
+				height: 100%;
+			}
+
+			.channel-play-btn {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				width: 80rpx;
+				height: 80rpx;
+				background-color: rgba(0, 0, 0, 0.4);
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.channel-stats {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+				padding: 10rpx;
+				color: #fff;
+				font-size: 20rpx;
+			}
+
+			.channel-info-wrap {
+				display: flex;
+				flex-direction: column;
+				flex: 1;
+				padding: 10rpx 0;
+
+				.channel-name {
+					margin-bottom: 4rpx;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+				}
+
+				.video-title {
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					overflow: hidden;
+				}
+			}
+		}
+	}
+}
+
+.channel-nav {
+	padding: 16rpx;
+	box-sizing: border-box;
+
+	&.fixed-layout {
+		.uni-scroll-view-content {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+		}
+	}
+
+	&.singleSlide {
+		.uni-scroll-view-content {
+			display: flex;
+		}
+
+		.channel-nav-item {
+			flex-shrink: 0;
+		}
+	}
+
+	.channel-nav-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 14rpx 0;
+		box-sizing: border-box;
+
+		.channel-img {
+			position: relative;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 200rpx;
+			border-radius: 10rpx;
+			overflow: hidden;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+
+			.channel-play-btn {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				width: 60rpx;
+				height: 60rpx;
+				background-color: rgba(0, 0, 0, 0.4);
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.channel-stats {
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+				padding: 10rpx;
+				color: #fff;
+				font-size: 20rpx;
+			}
+		}
+
+		.channel-text {
+			padding-top: 12rpx;
+			line-height: 1.5;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			width: 100%;
+			text-align: center;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/components-diy/diy-wechat-channel.vue b/components-diy/diy-wechat-channel.vue
new file mode 100644
index 0000000..748c456
--- /dev/null
+++ b/components-diy/diy-wechat-channel.vue
@@ -0,0 +1,183 @@
+<template>
+	<view class="diy-wechat-channel" :style="channelWarpCss">
+		<view class="channel-header" @tap="handlerClick">
+			<image class="channel-avatar" :src="$util.img(value.avatarUrl)" mode="aspectFill"></image>
+			<view class="channel-info">
+				<view class="channel-name">{{ value.channelName }}</view>
+				<view class="channel-follow" v-if="value.showFollow">关注</view>
+			</view>
+			<image class="channel-arrow" :src="$util.img('addon/personnel/shop/view/enterprise/arrow.png')" mode="aspectFill"></image>
+		</view>
+		<view class="channel-video" @tap="playVideo">
+			<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
+			<view class="video-play-btn">
+				<image class="play-icon" :src="$util.img('addon/personnel/shop/view/enterprise/play.png')" mode="aspectFill"></image>
+			</view>
+			<view class="video-info">
+				<view class="video-title">{{ value.videoTitle }}</view>
+				<view class="video-stats">
+					<text>{{ value.viewCount }}次观看</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+// 微信视频号组件
+import DiyMinx from './minx.js'
+export default {
+	name: 'diy-wechat-channel',
+	props: {
+		value: {
+			type: Object
+		}
+	},
+	data() {
+		return {};
+	},
+	created() { },
+	mixins: [DiyMinx],
+	watch: {
+		// 组件刷新监听
+		componentRefresh: function (nval) { }
+	},
+	computed: {
+		channelWarpCss: function () {
+			var obj = '';
+			if (this.value.componentAngle == 'round') {
+				obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
+				obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
+				obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
+				obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
+			}
+			return obj;
+		}
+	},
+	methods: {
+		async handlerClick() {
+			await this.__$emitEvent({
+				eventName: 'channel-tap', data: this.value, promiseCallback: (event, handler, awaitedResult) => {
+					if (!awaitedResult) return;
+				}
+			})
+		},
+		async playVideo() {
+			await this.__$emitEvent({
+				eventName: 'video-play', data: this.value, promiseCallback: (event, handler, awaitedResult) => {
+					if (!awaitedResult) return;
+					// 调用微信视频号播放API
+					if (typeof wx !== 'undefined' && wx.openChannelsActivity) {
+						wx.openChannelsActivity({
+							feedId: this.value.feedId,
+							success: (res) => {
+								console.log('打开视频号成功', res);
+							},
+							fail: (err) => {
+								console.error('打开视频号失败', err);
+							}
+						});
+					} else {
+						console.error('当前环境不支持微信视频号');
+					}
+				}
+			})
+		}
+	}
+};
+</script>
+
+<style scoped>
+.diy-wechat-channel {
+	width: 100%;
+	background-color: #fff;
+	border-radius: 12rpx;
+	overflow: hidden;
+	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+}
+
+.channel-header {
+	display: flex;
+	align-items: center;
+	padding: 16rpx;
+	border-bottom: 1rpx solid #f0f0f0;
+}
+
+.channel-avatar {
+	width: 60rpx;
+	height: 60rpx;
+	border-radius: 50%;
+	margin-right: 12rpx;
+}
+
+.channel-info {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+.channel-name {
+	font-size: 28rpx;
+	font-weight: 500;
+	color: #333;
+	margin-bottom: 4rpx;
+}
+
+.channel-follow {
+	font-size: 24rpx;
+	color: #07c160;
+}
+
+.channel-arrow {
+	width: 24rpx;
+	height: 24rpx;
+	margin-left: 8rpx;
+}
+
+.channel-video {
+	position: relative;
+}
+
+.video-cover {
+	width: 100%;
+	height: 320rpx;
+	object-fit: cover;
+}
+
+.video-play-btn {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 80rpx;
+	height: 80rpx;
+	background-color: rgba(0, 0, 0, 0.4);
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.play-icon {
+	width: 40rpx;
+	height: 40rpx;
+}
+
+.video-info {
+	padding: 16rpx;
+}
+
+.video-title {
+	font-size: 28rpx;
+	font-weight: 500;
+	color: #333;
+	margin-bottom: 8rpx;
+	line-height: 1.4;
+}
+
+.video-stats {
+	font-size: 24rpx;
+	color: #999;
+}
+</style>
\ No newline at end of file
diff --git a/docs/WECHAT_CHANNEL_INTEGRATION.md b/docs/WECHAT_CHANNEL_INTEGRATION.md
new file mode 100644
index 0000000..ffb5ac7
--- /dev/null
+++ b/docs/WECHAT_CHANNEL_INTEGRATION.md
@@ -0,0 +1,381 @@
+# 微信视频号集成指南
+
+## 1. 概述
+
+本文档提供了在UniApp项目中集成微信视频号的详细指导，包括组件实现、配置修改和使用方法。
+
+## 2. 准备工作
+
+### 2.1 微信小程序配置
+
+在 `manifest.json` 文件中，需要确保微信小程序配置正确：
+
+```json
+"mp-weixin": {
+    "appid": "你的小程序appid",
+    "setting": {
+        "urlCheck": false,
+        "postcss": false,
+        "es6": true,
+        "minified": true
+    },
+    "usingComponents": true,
+    "permission": {
+        "scope.userLocation": {
+            "desc": "为了更好地为您提供服务"
+        }
+    },
+    "requiredPrivateInfos": ["chooseLocation", "getLocation", "chooseAddress"],
+    "__usePrivacyCheck__": true,
+    "optimization": {
+        "subPackages": true
+    }
+}
+```
+
+### 2.2 微信视频号API权限
+
+#### 2.2.1 开通视频号相关权限
+
+1. **登录微信小程序后台**
+   - 访问 [微信公众平台](https://mp.weixin.qq.com/)
+   - 使用小程序管理员账号登录
+
+2. **进入开发管理**
+   - 左侧菜单：开发 → 开发管理
+   - 进入「接口设置」页面
+
+3. **开通视频号权限**
+   - 找到「视频号」相关接口，具体名称为「打开视频号内容」
+   - 点击「开通」按钮
+   - 阅读并同意相关协议
+   - 等待审核通过（通常为即时审核，无需人工审核）
+
+4. **权限开通失败处理**
+   - 确保小程序已发布上线
+   - 确保小程序未被处罚或限制
+   - 如仍无法开通，请联系微信公众平台客服
+
+#### 2.2.2 小程序后台配置相关权限
+
+1. **配置manifest.json**
+   在UniApp项目的 `manifest.json` 文件中，需要确保以下配置正确：
+   
+   ```json
+   "mp-weixin": {
+       "appid": "你的小程序appid",
+       "setting": {
+           "urlCheck": false,
+           "postcss": false,
+           "es6": true,
+           "minified": true
+       },
+       "usingComponents": true,
+       "requiredPrivateInfos": [],
+       "__usePrivacyCheck__": true,
+       "optimization": {
+           "subPackages": true
+       }
+   }
+   ```
+
+2. **小程序后台权限设置**
+   - 登录微信小程序后台
+   - 左侧菜单：设置 → 基本设置
+   - 向下滚动找到「服务内容声明」部分
+   - 确保已勾选「视频」相关服务内容
+   - 如有必要，上传相关资质证明
+
+#### 2.2.3 小程序与视频号关联
+
+1. **小程序管理员操作**
+   - 登录微信小程序后台
+   - 左侧菜单：设置 → 基本设置
+   - 向下滚动找到「关联设置」部分
+   - 点击「关联视频号」按钮
+   - 输入视频号名称或视频号ID
+   - 点击「搜索」找到对应的视频号
+   - 点击「发送关联邀请」
+
+2. **视频号管理员操作**
+   - 视频号管理员需要在24小时内确认关联邀请
+   - 视频号管理员登录 [视频号助手](https://channels.weixin.qq.com/)
+   - 进入「设置」→「关联设置」→「小程序关联」
+   - 找到待确认的关联邀请
+   - 点击「同意」完成关联
+
+3. **关联失败处理**
+   - 检查视频号是否已完成实名认证
+   - 检查小程序是否已发布上线
+   - 检查视频号名称或ID是否输入正确
+   - 如超过24小时未确认，需要重新发送关联邀请
+
+#### 2.2.4 关联条件
+
+- **小程序要求**：必须已经发布上线，未被处罚或限制
+- **视频号要求**：必须已经完成实名认证，状态正常
+- **数量限制**：同一个小程序最多可以关联50个视频号，同一个视频号最多可以关联50个小程序
+- **权限要求**：关联操作需要小程序管理员和视频号管理员共同确认
+- **主体要求**：小程序和视频号的主体可以不同，但需要双方管理员确认
+
+#### 2.2.5 权限验证
+
+完成关联后，可以通过以下方式验证权限是否开通：
+
+1. **在微信开发者工具中验证**
+   - 在微信开发者工具中打开小程序
+   - 在控制台执行以下代码：
+     ```javascript
+     console.log('是否支持视频号API:', typeof wx !== 'undefined' && typeof wx.openChannelsActivity === 'function');
+     ```
+   - 如果返回 `true`，则表示权限开通成功
+
+2. **在真机环境中验证**
+   - 使用微信扫码打开小程序
+   - 触发视频号相关功能
+   - 检查是否能正常打开视频号内容
+
+3. **权限验证失败处理**
+   - 确认小程序是否已与视频号关联
+   - 确认视频号API权限是否已开通
+   - 检查微信小程序基础库版本是否支持视频号API（建议使用最新版本）
+   - 尝试重新关联视频号
+
+## 3. 组件使用
+
+### 3.1 单个视频号组件 (diy-wechat-channel.vue)
+
+#### 基本用法
+
+```vue
+<diy-wechat-channel :value="channelData" />
+```
+
+#### 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| channelName | String | "" | 视频号名称 |
+| avatarUrl | String | "" | 视频号头像URL |
+| videoTitle | String | "" | 视频标题 |
+| coverUrl | String | "" | 视频封面URL |
+| feedId | String | "" | 视频号内容ID，用于播放视频 |
+| viewCount | Number | 0 | 视频观看次数 |
+| showFollow | Boolean | false | 是否显示关注按钮 |
+| componentAngle | String | "" | 组件圆角类型，可选值：round |
+| topAroundRadius | Number | 0 | 顶部圆角半径 |
+| bottomAroundRadius | Number | 0 | 底部圆角半径 |
+
+#### 事件说明
+
+| 事件名 | 说明 | 参数 |
+|--------|------|------|
+| channel-tap | 点击视频号头像或名称时触发 | 视频号数据对象 |
+| video-play | 点击视频播放时触发 | 视频号数据对象 |
+
+### 3.2 视频号列表组件 (diy-wechat-channel-list.vue)
+
+#### 基本用法
+
+```vue
+<diy-wechat-channel-list :value="channelListData" />
+```
+
+#### 属性说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| list | Array | [] | 视频号列表数据 |
+| rowCount | Number | 2 | 每行显示的视频号数量 |
+| showStyle | String | "fixed" | 显示样式，可选值：fixed, singleSlide |
+| mode | String | "" | 显示模式 |
+| font | Object | {} | 字体样式配置 |
+| componentBgColor | String | "#fff" | 组件背景颜色 |
+| componentAngle | String | "" | 组件圆角类型，可选值：round |
+| topAroundRadius | Number | 0 | 顶部圆角半径 |
+| bottomAroundRadius | Number | 0 | 底部圆角半径 |
+| ornament | Object | {} | 装饰样式配置 |
+
+#### list数组项说明
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| channelName | String | "" | 视频号名称 |
+| coverUrl | String | "" | 视频封面URL |
+| videoTitle | String | "" | 视频标题 |
+| feedId | String | "" | 视频号内容ID，用于播放视频 |
+| viewCount | Number | 0 | 视频观看次数 |
+
+## 4. 视频播放实现
+
+组件内部使用微信小程序的 `wx.openChannelsActivity` API 来打开视频号内容：
+
+```javascript
+if (typeof wx !== 'undefined' && wx.openChannelsActivity) {
+    wx.openChannelsActivity({
+        feedId: item.feedId, // 视频号内容ID，必填
+        success: (res) => {
+            console.log('打开视频号成功', res);
+        },
+        fail: (err) => {
+            console.error('打开视频号失败', err);
+            // 常见错误处理
+            if (err.errCode === 40001) {
+                console.error('未授权，请检查小程序是否与视频号关联');
+            } else if (err.errCode === 40002) {
+                console.error('参数错误，请检查feedId是否正确');
+            } else if (err.errCode === 40003) {
+                console.error('视频号内容不存在或已被删除');
+            }
+        }
+    });
+} else {
+    console.error('当前环境不支持微信视频号');
+}
+```
+
+### 4.1 API参数说明
+
+- **feedId**：视频号内容ID，必填，必须是有效的视频号内容ID
+- **success**：调用成功的回调函数
+- **fail**：调用失败的回调函数
+- **complete**：调用完成的回调函数（无论成功或失败）
+
+### 4.2 错误码说明
+
+| 错误码 | 说明 | 解决方案 |
+|--------|------|----------|
+| 40001 | 未授权 | 检查小程序是否与视频号关联，确认视频号API权限是否已开通 |
+| 40002 | 参数错误 | 检查feedId是否正确，确保是有效的视频号内容ID |
+| 40003 | 视频号内容不存在或已被删除 | 确认feedId对应的视频号内容是否仍然存在 |
+| 40004 | 系统错误 | 稍后重试，或联系微信公众平台客服 |
+
+## 5. 注意事项
+
+### 5.1 环境限制
+
+- 微信视频号API只能在微信小程序环境中使用，其他环境（如H5、App）不支持
+- 需要在微信小程序后台配置相关权限
+- 小程序需要与视频号进行关联
+- 微信小程序基础库版本建议使用2.10.0及以上
+
+### 5.2 数据格式
+
+确保传递给组件的数据格式正确，特别是 `feedId` 必须是有效的视频号内容ID
+
+### 5.3 图片资源
+
+- 视频号头像和封面图片建议使用CDN地址，确保加载速度
+- 图片尺寸建议：
+  - 头像：200x200px
+  - 封面：640x360px
+
+### 5.4 权限和关联
+
+- 确保在微信小程序后台开通了「打开视频号内容」权限
+- 确保小程序已与视频号成功关联
+- 关联操作需要小程序管理员和视频号管理员共同确认
+
+## 6. 常见问题
+
+### 6.1 视频无法播放
+
+- 检查 `feedId` 是否正确，确保是有效的视频号内容ID
+- 确认小程序是否与视频号关联
+- 确认小程序是否开通了视频号相关权限
+- 检查微信小程序基础库版本是否支持视频号API
+- 检查视频号内容是否仍然存在（未被删除）
+
+### 6.2 权限开通失败
+
+- 确保小程序已发布上线
+- 确保小程序未被处罚或限制
+- 确认小程序管理员账号权限是否正确
+- 如仍无法开通，请联系微信公众平台客服
+
+### 6.3 关联失败
+
+- 检查视频号是否已完成实名认证
+- 检查小程序是否已发布上线
+- 检查视频号名称或ID是否输入正确
+- 确认视频号管理员是否在24小时内确认关联邀请
+- 如超过24小时未确认，需要重新发送关联邀请
+
+### 6.4 组件显示异常
+
+- 检查传递给组件的数据格式是否正确
+- 确认图片资源是否可访问
+- 检查微信小程序基础库版本是否支持视频号API
+
+### 6.5 样式问题
+
+- 可通过组件的 `componentAngle`、`topAroundRadius`、`bottomAroundRadius` 等属性调整组件样式
+- 可通过 `componentBgColor` 属性调整组件背景颜色
+- 可通过 `font` 属性调整字体样式
+
+### 6.6 环境兼容性问题
+
+- 微信视频号API只能在微信小程序环境中使用
+- 在其他环境中，组件会显示但无法播放视频
+- 建议在非小程序环境中添加友好的提示信息
+
+## 7. 示例代码
+
+### 7.1 单个视频号示例
+
+```javascript
+// 单个视频号数据
+const channelData = {
+    channelName: "示例视频号",
+    avatarUrl: "https://example.com/avatar.jpg",
+    videoTitle: "这是一个示例视频",
+    coverUrl: "https://example.com/cover.jpg",
+    feedId: "v02004g10000c3f7l7j5u87l33n8f160",
+    viewCount: 12345,
+    showFollow: true,
+    componentAngle: "round",
+    topAroundRadius: 10,
+    bottomAroundRadius: 10
+};
+```
+
+### 7.2 视频号列表示例
+
+```javascript
+// 视频号列表数据
+const channelListData = {
+    list: [
+        {
+            channelName: "示例视频号1",
+            coverUrl: "https://example.com/cover1.jpg",
+            videoTitle: "这是示例视频1",
+            feedId: "v02004g10000c3f7l7j5u87l33n8f160",
+            viewCount: 12345
+        },
+        {
+            channelName: "示例视频号2",
+            coverUrl: "https://example.com/cover2.jpg",
+            videoTitle: "这是示例视频2",
+            feedId: "v02004g10000c3f7m7j5u87l33n8f161",
+            viewCount: 67890
+        }
+    ],
+    rowCount: 2,
+    showStyle: "fixed",
+    font: {
+        size: 14,
+        weight: "normal",
+        color: "#333"
+    },
+    componentBgColor: "#fff",
+    componentAngle: "round",
+    topAroundRadius: 10,
+    bottomAroundRadius: 10
+};
+```
+
+## 8. 总结
+
+通过本文档提供的组件和配置指导，你可以在UniApp项目中轻松集成微信视频号功能，为用户提供更加丰富的内容体验。
+
+如果在集成过程中遇到问题，请参考本文档的常见问题部分，或查阅微信官方文档获取更多帮助。
\ No newline at end of file
diff --git a/docs/example/wechat-channel-demo.vue b/docs/example/wechat-channel-demo.vue
new file mode 100644
index 0000000..045beba
--- /dev/null
+++ b/docs/example/wechat-channel-demo.vue
@@ -0,0 +1,165 @@
+<template>
+	<view class="wechat-channel-demo">
+		<view class="demo-header">
+			<text class="demo-title">微信视频号集成示例</text>
+		</view>
+
+		<view class="demo-section">
+			<view class="section-title">单个视频号</view>
+			<diy-wechat-channel :value="channelData" />
+		</view>
+
+		<view class="demo-section">
+			<view class="section-title">视频号列表</view>
+			<diy-wechat-channel-list :value="channelListData" />
+		</view>
+
+		<view class="demo-section">
+			<view class="section-title">使用说明</view>
+			<view class="section-content">
+				<view class="content-item">1. 确保微信小程序已开通视频号权限</view>
+				<view class="content-item">2. 小程序需与视频号关联</view>
+				<view class="content-item">3. 传递正确的feedId用于播放视频</view>
+				<view class="content-item">4. 仅支持微信小程序环境</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import diyWechatChannel from '@/components-diy/diy-wechat-channel.vue'
+import diyWechatChannelList from '@/components-diy/diy-wechat-channel-list.vue'
+
+export default {
+	name: 'wechat-channel-demo',
+	components: {
+		diyWechatChannel,
+		diyWechatChannelList
+	},
+	data() {
+		return {
+			// 单个视频号数据
+			channelData: {
+				channelName: "示例视频号",
+				avatarUrl: "https://via.placeholder.com/100",
+				videoTitle: "这是一个示例视频，展示如何使用微信视频号组件",
+				coverUrl: "https://via.placeholder.com/640x360",
+				feedId: "v02004g10000c3f7l7j5u87l33n8f160",
+				viewCount: 12345,
+				showFollow: true,
+				componentAngle: "round",
+				topAroundRadius: 10,
+				bottomAroundRadius: 10
+			},
+			// 视频号列表数据
+			channelListData: {
+				list: [
+					{
+						channelName: "示例视频号1",
+						coverUrl: "https://via.placeholder.com/640x360",
+						videoTitle: "这是示例视频1，展示如何使用微信视频号组件",
+						feedId: "v02004g10000c3f7l7j5u87l33n8f160",
+						viewCount: 12345
+					},
+					{
+						channelName: "示例视频号2",
+						coverUrl: "https://via.placeholder.com/640x360",
+						videoTitle: "这是示例视频2，展示如何使用微信视频号组件",
+						feedId: "v02004g10000c3f7m7j5u87l33n8f161",
+						viewCount: 67890
+					},
+					{
+						channelName: "示例视频号3",
+						coverUrl: "https://via.placeholder.com/640x360",
+						videoTitle: "这是示例视频3，展示如何使用微信视频号组件",
+						feedId: "v02004g10000c3f7n7j5u87l33n8f162",
+						viewCount: 98765
+					},
+					{
+						channelName: "示例视频号4",
+						coverUrl: "https://via.placeholder.com/640x360",
+						videoTitle: "这是示例视频4，展示如何使用微信视频号组件",
+						feedId: "v02004g10000c3f7o7j5u87l33n8f163",
+						viewCount: 54321
+					}
+				],
+				rowCount: 2,
+				showStyle: "fixed",
+				font: {
+					size: 14,
+					weight: "normal",
+					color: "#333"
+				},
+				componentBgColor: "#fff",
+				componentAngle: "round",
+				topAroundRadius: 10,
+				bottomAroundRadius: 10
+			}
+		}
+	},
+	onLoad() {
+		console.log('微信视频号示例页面加载');
+	},
+	methods: {
+		// 可以在这里添加自定义方法
+	}
+}
+</script>
+
+<style scoped>
+.wechat-channel-demo {
+	padding: 20rpx;
+	background-color: #f5f5f5;
+}
+
+.demo-header {
+	text-align: center;
+	padding: 40rpx 0;
+	background-color: #fff;
+	margin-bottom: 20rpx;
+	border-radius: 12rpx;
+	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+}
+
+.demo-title {
+	font-size: 32rpx;
+	font-weight: 600;
+	color: #333;
+}
+
+.demo-section {
+	background-color: #fff;
+	margin-bottom: 20rpx;
+	border-radius: 12rpx;
+	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+	overflow: hidden;
+}
+
+.section-title {
+	font-size: 28rpx;
+	font-weight: 500;
+	color: #333;
+	padding: 20rpx;
+	border-bottom: 1rpx solid #f0f0f0;
+}
+
+.section-content {
+	padding: 20rpx;
+}
+
+.content-item {
+	font-size: 24rpx;
+	color: #666;
+	margin-bottom: 12rpx;
+	line-height: 1.5;
+}
+
+/* 组件样式调整 */
+.demo-section >>> .diy-wechat-channel {
+	margin: 20rpx;
+}
+
+.demo-section >>> .diy-wechat-channel-list {
+	margin: 20rpx;
+}
+</style>
\ No newline at end of file