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

chore(视频号组件): 针对微信视频号资源，点击播放的时候吧，弹出不能播放的原因

Browse Source
This commit is contained in:
ZF Sun
2026-01-13 14:51:09 +08:00
parent a31c004508
commit 9e0cab7ec4
1 changed files with 36 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,29 +1,18 @@
<template>
<view :style="[componentStyle, { '--row-count': value.rowCount }]">
<!-- 轮播模式 -->
<swiper v-if="value.carousel && value.carousel.type != 'hide'"
:indicator-dots="isIndicatorDots"
:autoplay="value.carousel.autoplay || false"
:interval="value.carousel.interval || 3000"
:duration="value.carousel.duration || 500"
:circular="value.carousel.circular || false"
:style="swiperHeight"
class="channel-swiper">
<swiper v-if="value.carousel && value.carousel.type != 'hide'" :indicator-dots="isIndicatorDots"
:autoplay="value.carousel.autoplay || false" :interval="value.carousel.interval || 3000"
:duration="value.carousel.duration || 500" :circular="value.carousel.circular || false"
:style="swiperHeight" class="channel-swiper">
<swiper-item v-for="(slide, slideIndex) in swiperSlides" :key="slideIndex">
<view :class="['swiper-slide-content', 'row1-of' + value.rowCount]">
<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
<!-- 视频号视频卡片，轮播模式 -->
<diy-channel-video
:value="item"
@video-play="playVideo"
: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"
:aspect-ratio="value.aspectRatio"
/>
<diy-channel-video :value="item" @video-play="playVideo" :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" :aspect-ratio="value.aspectRatio" />
</view>
</view>
</swiper-item>
@@ -33,37 +22,24 @@
<view v-else-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]">
<view v-for="(item, index) in value.list" :key="index" class="channel-item">
<!-- 视频号视频卡片，列表模式 -->
<diy-channel-video
:value="item"
@video-play="playVideo"
: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"
:aspect-ratio="value.aspectRatio"
/>
<diy-channel-video :value="item" @video-play="playVideo" :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" :aspect-ratio="value.aspectRatio" />
</view>
</view>
<!-- 其他布局模式（如滚动布局） -->
<scroll-view v-else :class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle, 'row1-of' + value.rowCount]"
<scroll-view v-else
:class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle, 'row1-of' + value.rowCount]"
: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"
: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"
:aspect-ratio="value.aspectRatio"
/>
<diy-channel-video :value="item" @video-play="playVideo" :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" :aspect-ratio="value.aspectRatio" />
</view>
</view>
</scroll-view>
@@ -224,8 +200,8 @@ export default {
*/
async playVideo(item) {
await this.__$emitEvent({
eventName: 'video-play',
data: item,
eventName: 'video-play',
data: item,
promiseCallback: async (event, handler, awaitedResult) => {
if (!awaitedResult) return;
try {
@@ -239,8 +215,16 @@ export default {
// #endif
// #ifndef MP-WEIXIN
// 在非微信小程序环境中，直接触发事件
this.$emit('video-play', item);
if (item?.channelType === 'wechat') {
uni.showToast({
title: '视频号仅支持在微信小程序环境中播放',
icon: 'none',
duration: 2000
});
} else {
// 在非微信小程序环境中，直接触发事件
this.$emit('video-play', item);
}
// #endif
} catch (err) {
console.error('打开视频号失败', err);
@@ -427,7 +411,8 @@ export default {
/**
* 确保所有视频卡片高度一致
*/
.channel-item, .channel-nav-item {
.channel-item,
.channel-nav-item {
display: flex;
flex-direction: column;
}
@@ -509,6 +494,7 @@ export default {
* 在小屏幕设备上调整布局和间距
*/
@media (max-width: 375px) {
.channel-list,
.channel-nav,
.channel-swiper .swiper-slide-content {
@@ -527,6 +513,7 @@ export default {
// 小屏幕上的 2 列布局
&.row1-of2 {
.channel-item,
.channel-nav-item {
flex: 0 0 calc(50% - 6rpx);
@@ -543,6 +530,7 @@ export default {
// 小屏幕上的 4 列布局
&.row1-of4 {
.channel-item,
.channel-nav-item {
flex: 0 0 calc(25% - 9rpx);
@@ -559,6 +547,7 @@ export default {
// 小屏幕上的 1 列布局
&.row1-of1 {
.channel-item,
.channel-nav-item {
flex: 0 0 100%;