Browse Source

合并hzj分支,添加视频帧提取功能,解决视频-only商品分享卡片问题

pull/12/head
Trae AI 2 months ago
parent
commit
452dc4bad6
  1. 89
      pages/goods-detail/goods-detail.js
  2. 2
      project.private.config.json

89
pages/goods-detail/goods-detail.js

@ -158,7 +158,12 @@ function buildShareGoodsMessage(goodsDetail) {
// 获取第一张图片作为商品图片
const imageUrls = goodsDetail.imageUrls || [];
const firstImage = imageUrls.find(url => !isVideoUrl(url));
let firstImage = imageUrls.find(url => !isVideoUrl(url));
// 如果没有图片,检查是否有视频封面
if (!firstImage && goodsDetail.videoCoverUrl) {
firstImage = goodsDetail.videoCoverUrl;
}
let message = parts.join('\n');
@ -171,7 +176,7 @@ function buildShareGoodsMessage(goodsDetail) {
}
// 获取适合分享的图片 - 优先使用正方形图片填满分享框
function getShareImageUrl(goodsDetail) {
function getShareImageUrl(goodsDetail, context) {
const imageUrls = goodsDetail.imageUrls || [];
if (imageUrls.length > 0) {
@ -183,8 +188,18 @@ function getShareImageUrl(goodsDetail) {
return imageOnly[0];
}
// 情况2: 全是视频 → 使用第一帧(暂无封面字段,返回默认图片)
// 注: 当前数据结构无poster字段,如需视频封面需后端添加
// 情况2: 全是视频 → 使用视频封面或默认图片
// 检查是否有视频封面
if (context && context.data && context.data.videoCoverUrl) {
return context.data.videoCoverUrl;
}
// 尝试提取视频封面
const videoItems = imageUrls.filter(url => isVideoUrl(url));
if (videoItems.length > 0 && context && context.extractVideoFirstFrame) {
context.extractVideoFirstFrame(videoItems[0]);
}
return '/images/你有好蛋.png';
}
@ -432,7 +447,7 @@ Page({
return {
title: title,
path: sharePath,
imageUrl: getShareImageUrl(goodsDetail)
imageUrl: getShareImageUrl(goodsDetail, this)
}
},
@ -469,10 +484,56 @@ Page({
return {
title: title,
query: contactQuery,
imageUrl: getShareImageUrl(goodsDetail)
imageUrl: getShareImageUrl(goodsDetail, this)
}
},
// 视频帧提取功能
extractVideoFirstFrame(videoUrl) {
console.log('开始提取视频帧:', videoUrl);
if (!videoUrl) {
console.error('视频URL为空');
return;
}
// 使用wx.createVideoContext获取视频帧
const videoContext = wx.createVideoContext('video', this);
// 设置视频源
this.setData({
videoSrc: videoUrl
});
// 视频加载完成后获取帧
const video = wx.createVideoContext('video');
video.play();
// 延迟获取帧,确保视频已经开始播放
setTimeout(() => {
video.pause();
// 使用canvas绘制视频帧
const ctx = wx.createCanvasContext('coverCanvas');
ctx.drawImage(videoUrl, 0, 0, 300, 300);
ctx.draw(false, () => {
// 将canvas转换为图片
wx.canvasToTempFilePath({
canvasId: 'coverCanvas',
success: (res) => {
console.log('视频帧提取成功:', res.tempFilePath);
this.setData({
videoCoverUrl: res.tempFilePath
});
},
fail: (err) => {
console.error('视频帧提取失败:', err);
}
});
});
}, 1000);
},
data: {
goodsDetail: {}, // 当前商品详情
displayRegion: '', // 显示的地区信息(根据来源决定显示完整地区还是仅显示省份)
@ -500,6 +561,9 @@ Page({
favoriteGoods: [], // 收藏商品数据
loadingHome: false, // 首页数据加载状态
loadingFavorite: false, // 收藏数据加载状态
// 视频相关状态
videoCoverUrl: '', // 视频封面URL
videoSrc: '', // 视频源URL
},
// 点击对比价格列表中的商品,跳转到对应的商品详情页
@ -957,6 +1021,19 @@ Page({
const mediaItems = processMediaUrls(imageUrls || []);
console.log('预处理后的媒体数据:', mediaItems);
// 检查是否为纯视频商品,如果是则提取视频封面
const hasVideo = mediaItems.some(item => item.type === 'video');
const hasImage = mediaItems.some(item => item.type === 'image');
if (hasVideo && !hasImage) {
// 纯视频商品,提取视频封面
const videoItems = mediaItems.filter(item => item.type === 'video');
if (videoItems.length > 0) {
console.log('检测到纯视频商品,开始提取视频封面:', videoItems[0].url);
this.extractVideoFirstFrame(videoItems[0].url);
}
}
// 转换商品数据格式
const formattedGoods = {
// 优先设置售空状态标记,放在最前面确保不被覆盖

2
project.private.config.json

@ -1,6 +1,6 @@
{
"libVersion": "3.10.3",
"projectname": "xcxsp",
"projectname": "ppp",
"setting": {
"urlCheck": false,
"coverView": true,

Loading…
Cancel
Save