feat(微信视频号): 增加微信视频号和微信视频号列表组件

2026-01-07 16:42:28 +08:00
parent 2f230d3b2c
commit de63cd4c6a
5 changed files with 1156 additions and 1 deletions
--- a/docs/example/wechat-channel-demo.vue
+++ 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>