revert(视频号组件): 精简代码,去除不用的组件

This commit is contained in:
2026-01-14 09:31:22 +08:00
parent 03c1a8d71a
commit fe039ed126
5 changed files with 36 additions and 340 deletions

View File

@@ -102,29 +102,7 @@
## 3. 组件使用
### 3.1 视频号头部组件 (diy-channel-header.vue)
#### 基本用法
```vue
<diy-channel-header :value="headerData" @header-tap="handlerHeaderClick" />
```
#### 属性说明
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| channelName | String | "" | 视频号名称 |
| avatarUrl | String | "" | 视频号头像URL |
| showFollow | Boolean | false | 是否显示关注按钮 |
#### 事件说明
| 事件名 | 说明 | 参数 |
|--------|------|------|
| header-tap | 点击头部区域时触发 | 视频号数据对象 |
### 3.2 视频号视频卡片组件 (diy-channel-video.vue)
### 3.1 视频号视频卡片组件 (diy-channel-video.vue)
#### 基本用法
@@ -136,13 +114,15 @@
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| value | Object | {} | 视频数据对象 |
| value | Object | 必填 | 视频数据对象 |
| listMode | Boolean | false | 是否为列表模式 |
| videoHeight | Number | 220 | 视频高度(仅适用于嵌入式播放) |
| titleLineClamp | Number | 1 | 标题显示行数 |
| showPlayBtn | Boolean | true | 是否显示播放按钮 |
| aspectRatio | String | '16:9' | 视频比例,可选值:'16:9', '3:4' |
| coverStyle | Object | {} | 视频封面图样式 |
| playBtnStyle | Object | {} | 播放按钮样式 |
| autoPlay | Boolean | false | 是否自动播放(仅适用于嵌入式播放) |
#### value对象属性说明
@@ -163,45 +143,7 @@
|--------|------|------|
| video-play | 点击视频播放时触发 | 视频数据对象 |
### 3.3 单个视频号组件 (diy-channel.vue)
#### 基本用法
```vue
<diy-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 | 底部圆角半径 |
| embedMode | Boolean | false | 是否启用嵌入式播放 |
| showViewCount | Boolean | false | 是否显示观看次数 |
| finderUserName | String | "" | 视频号ID用于嵌入式播放 |
| feedToken | String | "" | 视频token用于嵌入式播放 |
| titleLineClamp | Number | 1 | 标题显示行数 |
| showPlayBtn | Boolean | true | 是否显示播放按钮 |
| coverStyle | Object | {} | 视频封面图样式 |
| playBtnStyle | Object | {} | 播放按钮样式 |
#### 事件说明
| 事件名 | 说明 | 参数 |
|--------|------|------|
| channel-tap | 点击视频号头像或名称时触发 | 视频号数据对象 |
| video-play | 点击视频播放时触发 | 视频号数据对象 |
### 3.4 视频号列表组件 (diy-channel-list.vue)
### 3.2 视频号列表组件 (diy-channel-list.vue)
#### 基本用法
@@ -213,28 +155,30 @@
| 属性名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| 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 | {} | 装饰样式配置 |
| 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 | 是否循环播放 |
| value | Object | 必填 | 组件配置数据 |
| value.list | Array | [] | 视频号列表数据 |
| value.rowCount | Number | 2 | 每行显示的视频号数量 |
| value.showStyle | String | "fixed" | 显示样式可选值fixed, singleSlide |
| value.mode | String | "" | 显示模式 |
| value.font | Object | {} | 字体样式配置 |
| value.componentBgColor | String | "#fff" | 组件背景颜色 |
| value.componentAngle | String | "" | 组件圆角类型可选值round |
| value.topAroundRadius | Number | 0 | 部圆角半径 |
| value.bottomAroundRadius | Number | 0 | 底部圆角半径 |
| value.ornament | Object | {} | 装饰样式配置 |
| value.titleLineClamp | Number | 1 | 标题显示行数 |
| value.showPlayBtn | Boolean | true | 是否显示播放按钮 |
| value.aspectRatio | String | '16:9' | 视频比例,可选值:'16:9', '3:4' |
| value.coverStyle | Object | {} | 视频封面图样式 |
| value.playBtnStyle | Object | {} | 播放按钮样式 |
| value.imageSize | Number | 0 | 图片尺寸(仅在特定模式下使用) |
| value.pageCount | Number | 1 | 每页显示的视频数量 |
| value.carousel | Object | {} | 轮播配置 |
| value.carousel.type | String | "" | 轮播类型可选值default, hide |
| value.carousel.autoplay | Boolean | false | 是否自动播放 |
| value.carousel.interval | Number | 3000 | 自动播放间隔,单位毫秒 |
| value.carousel.duration | Number | 500 | 切换动画时长,单位毫秒 |
| value.carousel.circular | Boolean | false | 是否循环播放 |
#### list数组项说明
@@ -428,6 +372,7 @@ if (typeof wx !== 'undefined' && wx.openChannelsActivity) {
- 可通过组件的 `componentAngle`、`topAroundRadius`、`bottomAroundRadius` 等属性调整组件样式
- 可通过 `componentBgColor` 属性调整组件背景颜色
- 可通过 `font` 属性调整字体样式
- 可通过 `aspectRatio` 属性调整视频比例,支持 '16:9' 和 '3:4' 两种比例
### 6.6 环境兼容性问题
@@ -489,24 +434,7 @@ if (typeof wx !== 'undefined' && wx.openChannelsActivity) {
## 7. 示例代码
### 7.1 视频号头部组件示例
```javascript
// 视频号头部数据
const headerData = {
channelName: "示例视频号",
avatarUrl: "https://example.com/avatar.jpg",
showFollow: true
};
// 头部点击事件处理
function handlerHeaderClick(data) {
console.log("头部被点击", data);
// 可以在这里处理跳转到视频号主页等逻辑
}
```
### 7.2 视频号视频卡片组件示例
### 7.1 视频号视频卡片组件示例
```javascript
// 视频卡片数据
@@ -529,7 +457,7 @@ function handlerVideoPlay(data) {
}
```
### 7.3 单个视频号示例
### 7.2 单个视频号示例
```javascript
// 单个视频号数据
@@ -550,6 +478,7 @@ const channelData = {
feedToken: "example_feed_token",
titleLineClamp: 2,
showPlayBtn: true,
aspectRatio: "16:9",
coverStyle: {
width: "100%",
height: "0",
@@ -564,7 +493,7 @@ const channelData = {
};
```
### 7.4 视频号列表示例
### 7.3 视频号列表示例
```javascript
// 视频号列表数据
@@ -608,6 +537,7 @@ const channelListData = {
ornament: {},
titleLineClamp: 2,
showPlayBtn: true,
aspectRatio: "16:9",
coverStyle: {
width: "100%",
height: "0",