chore(视频号组件): 优化视频号组件展示及播放

This commit is contained in:
2026-01-12 11:32:31 +08:00
parent 128d75b921
commit d012c7fff7
3 changed files with 38 additions and 14 deletions

View File

@@ -15,7 +15,7 @@
<!-- 视频号视频卡片轮播模式 --> <!-- 视频号视频卡片轮播模式 -->
<diy-channel-video <diy-channel-video
:value="item" :value="item"
@video-play="playVideo(item)" @video-play="playVideo"
: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"
@@ -34,7 +34,7 @@
<!-- 视频号视频卡片列表模式 --> <!-- 视频号视频卡片列表模式 -->
<diy-channel-video <diy-channel-video
:value="item" :value="item"
@video-play="playVideo(item)" @video-play="playVideo"
: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"
@@ -53,7 +53,7 @@
<!-- 视频号视频卡片滚动模式 --> <!-- 视频号视频卡片滚动模式 -->
<diy-channel-video <diy-channel-video
:value="item" :value="item"
@video-play="playVideo(item)" @video-play="playVideo"
: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"

View File

@@ -2,7 +2,8 @@
<view class="channel-video" :class="{ 'list-mode': listMode }"> <view class="channel-video" :class="{ 'list-mode': listMode }">
<!-- 嵌入式视频播放 --> <!-- 嵌入式视频播放 -->
<native-component v-if="canUseEmbedMode"> <native-component v-if="canUseEmbedMode">
// #ifdef MP-WEIXIN <!-- #ifdef MP-WEIXIN -->
<!-- 嵌入式视频播放组件 -->
<channel-video <channel-video
:feed-id="value.feedId" :feed-id="value.feedId"
:finder-user-name="value.finderUserName" :finder-user-name="value.finderUserName"
@@ -10,7 +11,7 @@
:auto-play="autoPlay" :auto-play="autoPlay"
:style="embedVideoStyle"> :style="embedVideoStyle">
</channel-video> </channel-video>
// #endif <!-- #endif -->
</native-component> </native-component>
<!-- 跳转式视频播放 --> <!-- 跳转式视频播放 -->
@@ -52,7 +53,6 @@ export default {
* @type {Object} * @type {Object}
* @required * @required
* @property {string} feedId - 视频 feedId * @property {string} feedId - 视频 feedId
* @property {string} finderUserName - 视频号用户名
* @property {string} feedToken - 视频 token * @property {string} feedToken - 视频 token
* @property {string} coverUrl - 视频封面图 * @property {string} coverUrl - 视频封面图
* @property {string} videoTitle - 视频标题 * @property {string} videoTitle - 视频标题
@@ -125,7 +125,6 @@ export default {
type: Boolean, type: Boolean,
default: false default: false
}, },
}, },
computed: { computed: {
/** /**
@@ -133,6 +132,7 @@ export default {
* @returns {boolean} * @returns {boolean}
*/ */
canUseEmbedMode() { canUseEmbedMode() {
return true
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
return this.value?.embedMode && wechatChannelUtil.isEmbedModeSupported(); return this.value?.embedMode && wechatChannelUtil.isEmbedModeSupported();
// #endif // #endif
@@ -157,7 +157,16 @@ export default {
width: '100%', width: '100%',
height: `${this.listMode ? 180 : 320}rpx` height: `${this.listMode ? 180 : 320}rpx`
}; };
} },
/**
* 视频号用户名,适用于微信视频号
* 优先使用 finderUserName其次使用 channelName
* @returns {string}
*/
finderUserName() {
return this.value?.finderUserName || this.value?.channelName || ''
},
}, },
methods: { methods: {
/** /**
@@ -165,7 +174,14 @@ export default {
* 触发 video-play 事件,由父组件处理具体播放逻辑 * 触发 video-play 事件,由父组件处理具体播放逻辑
*/ */
async playVideo() { async playVideo() {
this.$emit('video-play', this.value); // #ifdef MP-WEIXIN
const playload = {
...this.value,
finderUserName: this.finderUserName
}
console.log('playload', playload);
this.$emit('video-play', playload);
// #endif
} }
} }
}; };

View File

@@ -150,7 +150,7 @@ export const wechatChannelUtil = {
resolve(res); resolve(res);
}, },
fail: (err) => { fail: (err) => {
this.handleError(err); this.handleError(err, item);
reject(err); reject(err);
} }
}); });
@@ -161,19 +161,27 @@ export const wechatChannelUtil = {
}, },
// 统一错误处理 // 统一错误处理
handleError(err) { handleError(err, item) {
console.error('微信视频号错误:', err); console.error('微信视频号错误:', err);
let errorMsg = err.errMsg || '视频播放失败';
// 可以添加错误上报或用户提示逻辑 // 可以添加错误上报或用户提示逻辑
switch (err.errCode) { switch (err.errCode) {
case 40001: case 40001:
console.error('错误40001检查主体要求或嵌入式打开的关联关系'); errorMsg = '错误40001检查主体要求或嵌入式打开的关联关系';
break; break;
case 40002: case 40002:
console.error('错误40002参数错误检查 feedId 和 finderUserName'); errorMsg = '错误40002参数错误检查 feedId 和 finderUserName';
break; break;
default: default:
console.error('错误:' + err.errCode + '' + (err.errMsg || '未知错误'));
break; break;
} }
uni.showToast({
title: [errorMsg, 'feedId: ' + item.feedId, 'finderUserName: ' + item.finderUserName, 'feedToken: ' + item.feedToken].join('\n'),
icon: 'none',
duration: 5000
});
} }
}; };