165 lines
4.0 KiB
Vue
165 lines
4.0 KiB
Vue
<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> |