Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore(视频号组件): 更新文档及注释内容

Browse Source
This commit is contained in:
ZF Sun
2026-01-10 17:38:13 +08:00
parent 13166132c7
commit 68bc853dff
3 changed files with 417 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
components-diy/diy-channel-list.vue
View File

@@ -1,29 +1,40 @@
<template> <template>
<view :style="[componentStyle, { '--row-count': value.rowCount }]"> <view :style="[componentStyle, { '--row-count': value.rowCount }]">
<!-- 固定布局模式 --> <!-- 轮播模式 -->
<view v-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]"> <swiper v-if="value.carousel && value.carousel.type != 'hide'"
<view v-for="(item, index) in value.list" :key="index" class="channel-item"> :indicator-dots="isIndicatorDots"
<diy-channel-video :autoplay="value.carousel.autoplay || false"
:value="item" :interval="value.carousel.interval || 3000"
@video-play="playVideo(item)" :duration="value.carousel.duration || 500"
:list-mode="true" :circular="value.carousel.circular || false"
:video-height="value.rowCount === 3 ? 180 : 240" :style="swiperHeight"
:title-line-clamp="value.titleLineClamp" class="channel-swiper">
:show-play-btn="value.showPlayBtn" <swiper-item v-for="(slide, slideIndex) in swiperSlides" :key="slideIndex">
:cover-style="value.coverStyle" <view class="swiper-slide-content">
:play-btn-style="value.playBtnStyle" <view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
/> <!-- 视频号视频卡片，轮播模式 -->
</view> <diy-channel-video
</view> :value="item"
@video-play="playVideo(item)"
:list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240"
:title-line-clamp="value.titleLineClamp"
:show-play-btn="value.showPlayBtn"
:cover-style="value.coverStyle"
:play-btn-style="value.playBtnStyle"
/>
</view>
</view>
</swiper-item>
</swiper>
<!-- 其他布局模式 --> <!-- 固定布局模式 -->
<scroll-view v-else :class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]" <view v-else-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]">
:scroll-x="value.showStyle == 'singleSlide'"> <view v-for="(item, index) in value.list" :key="index" class="channel-item">
<view class="uni-scroll-view-content"> <!-- 视频号视频卡片，列表模式 -->
<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]"> <diy-channel-video
<diy-channel-video
:value="item" :value="item"
@video-play="playVideo(item)" @video-play="playVideo(item)"
:list-mode="true" :list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240" :video-height="value.rowCount === 3 ? 180 : 240"
:title-line-clamp="value.titleLineClamp" :title-line-clamp="value.titleLineClamp"
@@ -31,6 +42,25 @@
:cover-style="value.coverStyle" :cover-style="value.coverStyle"
:play-btn-style="value.playBtnStyle" :play-btn-style="value.playBtnStyle"
/> />
</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]">
<!-- 视频号视频卡片，滚动模式 -->
<diy-channel-video
:value="item"
@video-play="playVideo(item)"
:list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240"
:title-line-clamp="value.titleLineClamp"
:show-play-btn="value.showPlayBtn"
:cover-style="value.coverStyle"
:play-btn-style="value.playBtnStyle"
/>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
@@ -38,15 +68,15 @@
</template> </template>
<script> <script>
import DiyMinx from './minx.js'
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
/** /**
* 微信视频号列表组件 * 微信视频号列表组件
* 支持多种布局模式，包括固定布局和滚动布局 * 支持多种布局模式，包括固定布局和滚动布局
* 可配置列数、视频高度、标题行数等属性 * 可配置列数、视频高度、标题行数等属性
* 用于在页面中展示多个微信视频号视频
*/ */
import DiyMinx from './minx.js'
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
export default { export default {
name: 'diy-channel-list', name: 'diy-channel-list',
props: { props: {
@@ -54,18 +84,27 @@ export default {
* 组件配置数据 * 组件配置数据
* @type {Object} * @type {Object}
* @default () => ({}) * @default () => ({})
* @property {string} showStyle - 显示样式，可选值：fixed, singleSlide * @property {string} showStyle - 显示样式，可选值：fixed, singleSlide
* @property {number} rowCount - 每行显示的视频数量 * @property {number} rowCount - 每行显示的视频数量
* @property {Array} list - 视频列表数据 * @property {Array} list - 视频列表数据
* @property {string} componentBgColor - 组件背景色 * @property {string} componentBgColor - 组件背景色
* @property {string} componentAngle - 组件圆角类型 * @property {string} componentAngle - 组件圆角类型，可选值：round
* @property {number} topAroundRadius - 顶部圆角半径 * @property {number} topAroundRadius - 顶部圆角半径
* @property {number} bottomAroundRadius - 底部圆角半径 * @property {number} bottomAroundRadius - 底部圆角半径
* @property {Object} ornament - 装饰效果配置 * @property {Object} ornament - 装饰效果配置
* @property {number} titleLineClamp - 标题显示行数 * @property {number} titleLineClamp - 标题显示行数
* @property {boolean} showPlayBtn - 是否显示播放按钮 * @property {boolean} showPlayBtn - 是否显示播放按钮
* @property {Object} coverStyle - 视频封面图样式 * @property {Object} coverStyle - 视频封面图样式
* @property {Object} playBtnStyle - 播放按钮样式 * @property {Object} playBtnStyle - 播放按钮样式
* @property {string} mode - 显示模式
* @property {number} imageSize - 图片尺寸（仅在特定模式下使用）
* @property {number} pageCount - 每页显示的视频数量
* @property {Object} carousel - 轮播配置
* @property {string} carousel.type - 轮播类型，可选值：default, hide
* @property {boolean} carousel.autoplay - 是否自动播放，默认false
* @property {number} carousel.interval - 自动播放间隔，默认3000ms
* @property {number} carousel.duration - 切换动画时长，默认500ms
* @property {boolean} carousel.circular - 是否循环播放，默认false
*/ */
value: { value: {
type: Object, type: Object,
@@ -75,31 +114,40 @@ export default {
mixins: [DiyMinx], mixins: [DiyMinx],
data() { data() {
return { return {
pageWidth: '', pageWidth: '', // 页面宽度
indicatorDots: false, indicatorDots: false, // 是否显示轮播指示器
swiperCurrent: 0 swiperCurrent: 0 // 当前轮播索引
} }
}, },
created() { created() {
// 组件创建时的逻辑 // 组件创建时的逻辑
// 可以在这里进行初始化操作，如获取页面宽度等
}, },
watch: { watch: {
/**
* 组件刷新监听
* 当组件需要刷新时触发
* @param {*} newValue - 新值
*/
componentRefresh(newValue) { componentRefresh(newValue) {
// 监听组件刷新 // 监听组件刷新
// 可以在这里处理组件刷新时的逻辑
} }
}, },
computed: { computed: {
/** /**
* 组件样式 * 组件样式
* 根据配置动态生成样式字符串 * 根据配置动态生成样式字符串，包括背景色、圆角、阴影和边框
* @returns {string} * @returns {string} 样式字符串
*/ */
componentStyle() { componentStyle() {
let style = ''; let style = '';
// 背景色
if (this.value?.componentBgColor) { if (this.value?.componentBgColor) {
style += 'background-color:' + this.value?.componentBgColor + ';'; style += 'background-color:' + this.value?.componentBgColor + ';';
} }
// 圆角样式
if (this.value?.componentAngle == 'round') { if (this.value?.componentAngle == 'round') {
style += 'border-top-left-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;'; style += 'border-top-left-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
style += 'border-top-right-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;'; style += 'border-top-right-radius:' + (2 * this.value?.topAroundRadius) + 'rpx;';
@@ -107,7 +155,9 @@ export default {
style += 'border-bottom-right-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 += '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 : '') + ';'; style += 'border:' + (this.value?.ornament?.type == 'stroke' ? '2rpx solid ' + this.value?.ornament?.color : '') + ';';
return style; return style;
@@ -116,11 +166,12 @@ export default {
/** /**
* 轮播高度 * 轮播高度
* 根据模式和配置计算轮播高度 * 根据模式和配置计算轮播高度
* @returns {string} * @returns {string} 轮播高度样式
*/ */
swiperHeight() { swiperHeight() {
let height = 0; let height = 0;
// 根据不同模式计算高度
if (this.value?.mode == 'graphic') { if (this.value?.mode == 'graphic') {
height = (49 + this.value?.imageSize) * this.value?.pageCount; height = (49 + this.value?.imageSize) * this.value?.pageCount;
} else if (this.value?.mode == 'img') { } else if (this.value?.mode == 'img') {
@@ -135,11 +186,30 @@ export default {
/** /**
* 是否显示指示器 * 是否显示指示器
* 根据轮播配置和列表长度判断是否显示指示器 * 根据轮播配置和列表长度判断是否显示指示器
* @returns {boolean} * @returns {boolean} 是否显示指示器
*/ */
isIndicatorDots() { isIndicatorDots() {
// 当轮播类型不是隐藏，且视频数量超过一页时显示指示器
return this.value?.carousel?.type != 'hide' && return this.value?.carousel?.type != 'hide' &&
1 != Math.ceil(this.value?.list?.length / (this.value?.pageCount * this.value?.rowCount)); 1 != Math.ceil(this.value?.list?.length / (this.value?.pageCount * this.value?.rowCount));
},
/**
* 轮播幻灯片数据
* 将视频列表分割成轮播所需的幻灯片数据
* @returns {Array} 轮播幻灯片数据
*/
swiperSlides() {
const slides = [];
const list = this.value?.list || [];
const pageSize = (this.value?.pageCount || 1) * (this.value?.rowCount || 1);
// 将列表数据分割成每页显示的数量
for (let i = 0; i < list.length; i += pageSize) {
slides.push(list.slice(i, i + pageSize));
}
return slides;
} }
}, },
methods: { methods: {
@@ -150,10 +220,13 @@ export default {
*/ */
async playVideo(item) { async playVideo(item) {
await this.__$emitEvent({ await this.__$emitEvent({
eventName: 'video-play', data: item, promiseCallback: async (event, handler, awaitedResult) => { eventName: 'video-play',
data: item,
promiseCallback: async (event, handler, awaitedResult) => {
if (!awaitedResult) return; if (!awaitedResult) return;
try { try {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
// 在微信小程序环境中调用视频播放接口
await wechatChannelUtil.playVideo(item); await wechatChannelUtil.playVideo(item);
// #endif // #endif
} catch (err) { } catch (err) {
@@ -284,13 +357,55 @@ export default {
flex-direction: column; flex-direction: column;
} }
/**
* 轮播样式
* 支持轮播模式的布局和样式
*/
.channel-swiper {
width: 100%;
box-sizing: border-box;
.swiper-slide-content {
display: flex;
flex-wrap: wrap;
gap: 16rpx;
padding: 16rpx;
box-sizing: border-box;
.channel-item {
flex: 0 0 calc(33.3333333% - 10rpx);
box-sizing: border-box;
&:nth-child(3n) {
margin-right: 0;
}
}
// 轮播模式下的 2 列布局
&.row1-of2 {
.channel-item {
flex: 0 0 calc(50% - 8rpx);
&:nth-child(3n) {
margin-right: 16rpx;
}
&:nth-child(2n) {
margin-right: 0;
}
}
}
}
}
/** /**
* 响应式调整 * 响应式调整
* 在小屏幕设备上调整布局和间距 * 在小屏幕设备上调整布局和间距
*/ */
@media (max-width: 375px) { @media (max-width: 375px) {
.channel-list, .channel-list,
.channel-nav { .channel-nav,
.channel-swiper .swiper-slide-content {
gap: 12rpx; gap: 12rpx;
padding: 12rpx; padding: 12rpx;

62
components-diy/diy-channel.vue
View File

@@ -1,34 +1,70 @@
<template> <template>
<view class="diy-wechat-channel" :style="channelWarpCss"> <view class="diy-wechat-channel" :style="channelWarpCss">
<!-- 视频号头部，显示视频号名称、头像等信息 -->
<diy-channel-header :value="value" @header-tap="handlerClick" /> <diy-channel-header :value="value" @header-tap="handlerClick" />
<!-- 视频号视频，显示视频封面、标题等信息 -->
<diy-channel-video :value="value" @video-play="playVideo" /> <diy-channel-video :value="value" @video-play="playVideo" />
</view> </view>
</template> </template>
<script> <script>
// 微信视频号组件 /**
* 微信视频号组件
* 用于展示单个微信视频号的完整信息，包括头部信息和视频内容
* 支持点击头部进入视频号主页，点击视频播放视频
*/
import DiyMinx from './minx.js' import DiyMinx from './minx.js'
import { wechatChannelUtil } from './js/wechat-channel.js' import { wechatChannelUtil } from './js/wechat-channel.js'
export default { export default {
name: 'diy-channel', name: 'diy-channel',
props: { props: {
/**
* 视频号数据对象
* @type {Object}
* @required
* @property {string} channelName - 视频号名称
* @property {string} avatarUrl - 视频号头像URL
* @property {string} videoTitle - 视频标题
* @property {string} coverUrl - 视频封面URL
* @property {string} feedId - 视频号内容ID，用于播放视频
* @property {number} viewCount - 视频观看次数
* @property {boolean} showFollow - 是否显示关注按钮
* @property {string} componentAngle - 组件圆角类型，可选值：round
* @property {number} topAroundRadius - 顶部圆角半径
* @property {number} bottomAroundRadius - 底部圆角半径
* @property {boolean} embedMode - 是否启用嵌入式播放
* @property {boolean} showViewCount - 是否显示观看次数
* @property {string} finderUserName - 视频号ID
* @property {string} feedToken - 视频token，用于嵌入式播放
*/
value: { value: {
type: Object type: Object,
required: true
} }
}, },
data() { data() {
return {}; return {};
}, },
created() { }, created() {
// 组件创建时的初始化逻辑
},
mixins: [DiyMinx], mixins: [DiyMinx],
watch: { watch: {
// 组件刷新监听 /**
* 组件刷新监听
* 当组件需要刷新时触发
* @param {*} nval - 新值
*/
componentRefresh: function (nval) { } componentRefresh: function (nval) { }
}, },
computed: { computed: {
/**
* 组件容器样式
* 根据配置动态生成样式字符串，主要处理圆角样式
* @returns {string} 样式字符串
*/
channelWarpCss: function () { channelWarpCss: function () {
var obj = ''; var obj = '';
if (this.value.componentAngle == 'round') { if (this.value.componentAngle == 'round') {
@@ -41,16 +77,28 @@ export default {
} }
}, },
methods: { methods: {
/**
* 处理头部点击事件
* 触发 channel-tap 事件，用于跳转到视频号主页
*/
async handlerClick() { async handlerClick() {
await this.__$emitEvent({ await this.__$emitEvent({
eventName: 'channel-tap', data: this.value, promiseCallback: (event, handler, awaitedResult) => { eventName: 'channel-tap',
data: this.value,
promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return; if (!awaitedResult) return;
} }
}) })
}, },
/**
* 处理视频播放事件
* 触发 video-play 事件，并在微信小程序中调用视频播放接口
*/
async playVideo() { async playVideo() {
await this.__$emitEvent({ await this.__$emitEvent({
eventName: 'video-play', data: this.value, promiseCallback: async (event, handler, awaitedResult) => { eventName: 'video-play',
data: this.value,
promiseCallback: async (event, handler, awaitedResult) => {
if (!awaitedResult) return; if (!awaitedResult) return;
try { try {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN

214
docs/WECHAT_CHANNEL_INTEGRATION.md
View File

@@ -102,12 +102,73 @@
## 3. 组件使用 ## 3. 组件使用
### 3.1 单个视频号组件 (diy-wechat-channel.vue) ### 3.1 视频号头部组件 (diy-channel-header.vue)
#### 基本用法 #### 基本用法
```vue ```vue
<diy-wechat-channel :value="channelData" /> <diy-channel-header :value="headerData" @header-tap="handlerHeaderClick" />
```
#### 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| channelName | String | "" | 视频号名称 |
| avatarUrl | String | "" | 视频号头像URL |
| showFollow | Boolean | false | 是否显示关注按钮 |
#### 事件说明
| 事件名 | 说明 | 参数 |
|--------|------|------|
| header-tap | 点击头部区域时触发 | 视频号数据对象 |
### 3.2 视频号视频卡片组件 (diy-channel-video.vue)
#### 基本用法
```vue
<diy-channel-video :value="videoData" @video-play="handlerVideoPlay" />
```
#### 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| value | Object | {} | 视频数据对象 |
| listMode | Boolean | false | 是否为列表模式 |
| videoHeight | Number | 220 | 视频高度（仅适用于嵌入式播放） |
| titleLineClamp | Number | 1 | 标题显示行数 |
| showPlayBtn | Boolean | true | 是否显示播放按钮 |
| coverStyle | Object | {} | 视频封面图样式 |
| playBtnStyle | Object | {} | 播放按钮样式 |
#### value对象属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| feedId | String | "" | 视频 feedId |
| finderUserName | String | "" | 视频号用户名 |
| feedToken | String | "" | 视频 token |
| coverUrl | String | "" | 视频封面图 |
| videoTitle | String | "" | 视频标题 |
| viewCount | Number | 0 | 观看次数 |
| showViewCount | Boolean | false | 是否显示观看次数 |
| embedMode | Boolean | false | 是否启用嵌入式播放 |
#### 事件说明
| 事件名 | 说明 | 参数 |
|--------|------|------|
| video-play | 点击视频播放时触发 | 视频数据对象 |
### 3.3 单个视频号组件 (diy-channel.vue)
#### 基本用法
```vue
<diy-channel :value="channelData" />
``` ```
#### 属性说明 #### 属性说明
@@ -124,6 +185,14 @@
| componentAngle | String | "" | 组件圆角类型，可选值：round | | componentAngle | String | "" | 组件圆角类型，可选值：round |
| topAroundRadius | Number | 0 | 顶部圆角半径 | | topAroundRadius | Number | 0 | 顶部圆角半径 |
| bottomAroundRadius | Number | 0 | 底部圆角半径 | | bottomAroundRadius | Number | 0 | 底部圆角半径 |
| embedMode | Boolean | false | 是否启用嵌入式播放 |
| showViewCount | Boolean | false | 是否显示观看次数 |
| finderUserName | String | "" | 视频号ID，用于嵌入式播放 |
| feedToken | String | "" | 视频token，用于嵌入式播放 |
| titleLineClamp | Number | 1 | 标题显示行数 |
| showPlayBtn | Boolean | true | 是否显示播放按钮 |
| coverStyle | Object | {} | 视频封面图样式 |
| playBtnStyle | Object | {} | 播放按钮样式 |
#### 事件说明 #### 事件说明
@@ -132,12 +201,12 @@
| channel-tap | 点击视频号头像或名称时触发 | 视频号数据对象 | | channel-tap | 点击视频号头像或名称时触发 | 视频号数据对象 |
| video-play | 点击视频播放时触发 | 视频号数据对象 | | video-play | 点击视频播放时触发 | 视频号数据对象 |
### 3.2 视频号列表组件 (diy-wechat-channel-list.vue) ### 3.4 视频号列表组件 (diy-channel-list.vue)
#### 基本用法 #### 基本用法
```vue ```vue
<diy-wechat-channel-list :value="channelListData" /> <diy-channel-list :value="channelListData" />
``` ```
#### 属性说明 #### 属性说明
@@ -154,6 +223,18 @@
| topAroundRadius | Number | 0 | 顶部圆角半径 | | topAroundRadius | Number | 0 | 顶部圆角半径 |
| bottomAroundRadius | Number | 0 | 底部圆角半径 | | bottomAroundRadius | Number | 0 | 底部圆角半径 |
| ornament | Object | {} | 装饰样式配置 | | ornament | Object | {} | 装饰样式配置 |
| titleLineClamp | Number | 1 | 标题显示行数 |
| showPlayBtn | Boolean | true | 是否显示播放按钮 |
| coverStyle | Object | {} | 视频封面图样式 |
| playBtnStyle | Object | {} | 播放按钮样式 |
| imageSize | Number | 0 | 图片尺寸（仅在特定模式下使用） |
| pageCount | Number | 1 | 每页显示的视频数量 |
| carousel | Object | {} | 轮播配置 |
| carousel.type | String | "" | 轮播类型，可选值：default, hide |
| carousel.autoplay | Boolean | false | 是否自动播放 |
| carousel.interval | Number | 3000 | 自动播放间隔，单位毫秒 |
| carousel.duration | Number | 500 | 切换动画时长，单位毫秒 |
| carousel.circular | Boolean | false | 是否循环播放 |
#### list数组项说明 #### list数组项说明
@@ -164,6 +245,10 @@
| videoTitle | String | "" | 视频标题 | | videoTitle | String | "" | 视频标题 |
| feedId | String | "" | 视频号内容ID，用于播放视频 | | feedId | String | "" | 视频号内容ID，用于播放视频 |
| viewCount | Number | 0 | 视频观看次数 | | viewCount | Number | 0 | 视频观看次数 |
| embedMode | Boolean | false | 是否启用嵌入式播放 |
| showViewCount | Boolean | false | 是否显示观看次数 |
| finderUserName | String | "" | 视频号ID，用于嵌入式播放 |
| feedToken | String | "" | 视频token，用于嵌入式播放 |
## 4. 视频播放实现 ## 4. 视频播放实现
@@ -290,7 +375,19 @@ if (typeof wx !== 'undefined' && wx.openChannelsActivity) {
- 头像：200x200px - 头像：200x200px
- 封面：640x360px - 封面：640x360px
### 5.4 权限和关联 ### 5.4 播放按钮图标
- 组件支持两种播放按钮图标方式：
1. **图片图标**：通过 `playIcon` 属性设置，优先级较高
2. **纯 CSS 图标**：当 `playIcon` 不可用时，组件会自动使用纯 CSS 生成的播放图标，确保播放按钮始终可见
- 纯 CSS 图标特点：
- 不依赖外部图片资源，加载更快
- 支持响应式调整大小
- 具有与图片图标相同的悬停效果
- 在所有环境中都能正常显示
### 5.5 权限和关联
- 确保在微信小程序后台开通了「打开视频号内容」权限 - 确保在微信小程序后台开通了「打开视频号内容」权限
- 确保小程序已与视频号成功关联 - 确保小程序已与视频号成功关联
@@ -392,25 +489,82 @@ if (typeof wx !== 'undefined' && wx.openChannelsActivity) {
## 7. 示例代码 ## 7. 示例代码
### 7.1 单个视频号示例 ### 7.1 视频号头部组件示例
```javascript
// 视频号头部数据
const headerData = {
channelName: "示例视频号",
avatarUrl: "https://example.com/avatar.jpg",
showFollow: true
};
// 头部点击事件处理
function handlerHeaderClick(data) {
console.log("头部被点击", data);
// 可以在这里处理跳转到视频号主页等逻辑
}
```
### 7.2 视频号视频卡片组件示例
```javascript
// 视频卡片数据
const videoData = {
channelName: "示例视频号",
coverUrl: "https://example.com/cover.jpg",
videoTitle: "这是一个示例视频，标题可能会很长，需要测试多行显示效果",
feedId: "v02004g10000c3f7l7j5u87l33n8f160",
viewCount: 12345,
embedMode: false,
showViewCount: true,
finderUserName: "example_finder",
feedToken: "example_feed_token"
};
// 视频播放事件处理
function handlerVideoPlay(data) {
console.log("视频播放", data);
// 可以在这里处理视频播放逻辑
}
```
### 7.3 单个视频号示例
```javascript ```javascript
// 单个视频号数据 // 单个视频号数据
const channelData = { const channelData = {
channelName: "示例视频号", channelName: "示例视频号",
avatarUrl: "https://example.com/avatar.jpg", avatarUrl: "https://example.com/avatar.jpg",
videoTitle: "这是一个示例视频", videoTitle: "这是一个示例视频，标题可能会很长，需要测试多行显示效果",
coverUrl: "https://example.com/cover.jpg", coverUrl: "https://example.com/cover.jpg",
feedId: "v02004g10000c3f7l7j5u87l33n8f160", feedId: "v02004g10000c3f7l7j5u87l33n8f160",
viewCount: 12345, viewCount: 12345,
showFollow: true, showFollow: true,
componentAngle: "round", componentAngle: "round",
topAroundRadius: 10, topAroundRadius: 10,
bottomAroundRadius: 10 bottomAroundRadius: 10,
embedMode: false,
showViewCount: true,
finderUserName: "example_finder",
feedToken: "example_feed_token",
titleLineClamp: 2,
showPlayBtn: true,
coverStyle: {
width: "100%",
height: "0",
paddingTop: "56.25%" // 16:9 比例
},
playBtnStyle: {
width: "60rpx",
height: "60rpx",
borderRadius: "30rpx",
backgroundColor: "rgba(0, 0, 0, 0.6)"
}
}; };
``` ```
### 7.2 视频号列表示例 ### 7.4 视频号列表示例
```javascript ```javascript
// 视频号列表数据 // 视频号列表数据
@@ -419,20 +573,29 @@ const channelListData = {
{ {
channelName: "示例视频号1", channelName: "示例视频号1",
coverUrl: "https://example.com/cover1.jpg", coverUrl: "https://example.com/cover1.jpg",
videoTitle: "这是示例视频1", videoTitle: "这是示例视频1，标题可能会很长，需要测试多行显示效果",
feedId: "v02004g10000c3f7l7j5u87l33n8f160", feedId: "v02004g10000c3f7l7j5u87l33n8f160",
viewCount: 12345 viewCount: 12345,
embedMode: false,
showViewCount: true,
finderUserName: "example_finder1",
feedToken: "example_feed_token1"
}, },
{ {
channelName: "示例视频号2", channelName: "示例视频号2",
coverUrl: "https://example.com/cover2.jpg", coverUrl: "https://example.com/cover2.jpg",
videoTitle: "这是示例视频2", videoTitle: "这是示例视频2，标题可能会很长，需要测试多行显示效果",
feedId: "v02004g10000c3f7m7j5u87l33n8f161", feedId: "v02004g10000c3f7m7j5u87l33n8f161",
viewCount: 67890 viewCount: 67890,
embedMode: false,
showViewCount: true,
finderUserName: "example_finder2",
feedToken: "example_feed_token2"
} }
], ],
rowCount: 2, rowCount: 2,
showStyle: "fixed", showStyle: "fixed",
mode: "",
font: { font: {
size: 14, size: 14,
weight: "normal", weight: "normal",
@@ -441,7 +604,30 @@ const channelListData = {
componentBgColor: "#fff", componentBgColor: "#fff",
componentAngle: "round", componentAngle: "round",
topAroundRadius: 10, topAroundRadius: 10,
bottomAroundRadius: 10 bottomAroundRadius: 10,
ornament: {},
titleLineClamp: 2,
showPlayBtn: true,
coverStyle: {
width: "100%",
height: "0",
paddingTop: "56.25%" // 16:9 比例
},
playBtnStyle: {
width: "60rpx",
height: "60rpx",
borderRadius: "30rpx",
backgroundColor: "rgba(0, 0, 0, 0.6)"
},
imageSize: 150,
pageCount: 1,
carousel: {
type: "default",
autoplay: true,
interval: 3000,
duration: 500,
circular: true
}
}; };
``` ```