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
:value="item"
@video-play="playVideo(item)"
@video-play="playVideo"
:list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240"
:title-line-clamp="value.titleLineClamp"
@@ -34,7 +34,7 @@
<!-- 视频号视频卡片列表模式 -->
<diy-channel-video
:value="item"
@video-play="playVideo(item)"
@video-play="playVideo"
:list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240"
:title-line-clamp="value.titleLineClamp"
@@ -53,7 +53,7 @@
<!-- 视频号视频卡片滚动模式 -->
<diy-channel-video
:value="item"
@video-play="playVideo(item)"
@video-play="playVideo"
:list-mode="true"
:video-height="value.rowCount === 3 ? 180 : 240"
:title-line-clamp="value.titleLineClamp"

View File

@@ -2,7 +2,8 @@
<view class="channel-video" :class="{ 'list-mode': listMode }">
<!-- 嵌入式视频播放 -->
<native-component v-if="canUseEmbedMode">
// #ifdef MP-WEIXIN
<!-- #ifdef MP-WEIXIN -->
<!-- 嵌入式视频播放组件 -->
<channel-video
:feed-id="value.feedId"
:finder-user-name="value.finderUserName"
@@ -10,7 +11,7 @@
:auto-play="autoPlay"
:style="embedVideoStyle">
</channel-video>
// #endif
<!-- #endif -->
</native-component>
<!-- 跳转式视频播放 -->
@@ -52,7 +53,6 @@ export default {
* @type {Object}
* @required
* @property {string} feedId - 视频 feedId
* @property {string} finderUserName - 视频号用户名
* @property {string} feedToken - 视频 token
* @property {string} coverUrl - 视频封面图
* @property {string} videoTitle - 视频标题
@@ -125,7 +125,6 @@ export default {
type: Boolean,
default: false
},
},
computed: {
/**
@@ -133,6 +132,7 @@ export default {
* @returns {boolean}
*/
canUseEmbedMode() {
return true
// #ifdef MP-WEIXIN
return this.value?.embedMode && wechatChannelUtil.isEmbedModeSupported();
// #endif
@@ -157,7 +157,16 @@ export default {
width: '100%',
height: `${this.listMode ? 180 : 320}rpx`
};
}
},
/**
* 视频号用户名,适用于微信视频号
* 优先使用 finderUserName其次使用 channelName
* @returns {string}
*/
finderUserName() {
return this.value?.finderUserName || this.value?.channelName || ''
},
},
methods: {
/**
@@ -165,7 +174,14 @@ export default {
* 触发 video-play 事件,由父组件处理具体播放逻辑
*/
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);
},
fail: (err) => {
this.handleError(err);
this.handleError(err, item);
reject(err);
}
});
@@ -161,19 +161,27 @@ export const wechatChannelUtil = {
},
// 统一错误处理
handleError(err) {
handleError(err, item) {
console.error('微信视频号错误:', err);
let errorMsg = err.errMsg || '视频播放失败';
// 可以添加错误上报或用户提示逻辑
switch (err.errCode) {
case 40001:
console.error('错误40001检查主体要求或嵌入式打开的关联关系');
errorMsg = '错误40001检查主体要求或嵌入式打开的关联关系';
break;
case 40002:
console.error('错误40002参数错误检查 feedId 和 finderUserName');
errorMsg = '错误40002参数错误检查 feedId 和 finderUserName';
break;
default:
console.error('错误:' + err.errCode + '' + (err.errMsg || '未知错误'));
break;
}
uni.showToast({
title: [errorMsg, 'feedId: ' + item.feedId, 'finderUserName: ' + item.finderUserName, 'feedToken: ' + item.feedToken].join('\n'),
icon: 'none',
duration: 5000
});
}
};