chore(视频号组件): 重构视频号组件,不单单是微信视频号
This commit is contained in:
179
components-diy/js/wechat-channel.js
Normal file
179
components-diy/js/wechat-channel.js
Normal file
@@ -0,0 +1,179 @@
|
||||
// 微信视频号组件配置
|
||||
export const wechatChannelConfig = {
|
||||
// 图标相关
|
||||
icon: {
|
||||
defaultSize: 80, // 默认图标尺寸(rpx)
|
||||
smallSize: 60, // 小图标尺寸(rpx)
|
||||
channelArrowSize: 24, // 频道箭头图标尺寸(rpx)
|
||||
channelArrow: 'addon/personnel/shop/view/enterprise/arrow.png', // 频道箭头图标路径
|
||||
playIcon: 'addon/personnel/shop/view/enterprise/play.png', // 播放按钮图标路径
|
||||
},
|
||||
|
||||
|
||||
// 视频相关配置
|
||||
video: {
|
||||
defaultHeight: 320, // 默认视频高度(rpx)
|
||||
minHeight: 200, // 最小视频高度(rpx)
|
||||
maxHeight: 500, // 最大视频高度(rpx)
|
||||
defaultCoverUrl: 'addon/personnel/shop/view/enterprise/default-video-cover.png', // 默认视频封面
|
||||
},
|
||||
|
||||
// 播放按钮配置
|
||||
playButton: {
|
||||
size: 80, // 标准尺寸(rpx)
|
||||
smallSize: 60, // 小尺寸(rpx)
|
||||
iconSize: 40, // 标准图标尺寸(rpx)
|
||||
smallIconSize: 30, // 小图标尺寸(rpx)
|
||||
background: 'rgba(0, 0, 0, 0.4)', // 背景颜色
|
||||
},
|
||||
|
||||
// 布局配置
|
||||
layout: {
|
||||
borderRadius: 12, // 圆角(rpx)
|
||||
padding: 16, // 内边距(rpx)
|
||||
margin: 10, // 外边距(rpx)
|
||||
},
|
||||
|
||||
// 字体配置
|
||||
font: {
|
||||
channelNameSize: 28, // 频道名称字体大小(rpx)
|
||||
videoTitleSize: 28, // 视频标题字体大小(rpx)
|
||||
statsSize: 24, // 统计信息字体大小(rpx)
|
||||
},
|
||||
|
||||
// 颜色配置
|
||||
color: {
|
||||
channelName: '#333', // 频道名称颜色
|
||||
videoTitle: '#333', // 视频标题颜色
|
||||
stats: '#999', // 统计信息颜色
|
||||
border: '#f0f0f0', // 边框颜色
|
||||
},
|
||||
|
||||
// 微信相关配置
|
||||
wechat: {
|
||||
minSdkVersion: '2.19.2', // 最小微信基础库版本
|
||||
embedComponent: 'component.channel-video', // 嵌入式视频组件名称
|
||||
},
|
||||
|
||||
// 错误提示配置
|
||||
error: {
|
||||
notWechat: '当前环境不是微信小程序',
|
||||
lowVersion: '当前微信基础库版本过低,需要 2.19.2 或以上版本',
|
||||
notSupported: '当前环境不支持微信视频号',
|
||||
missingFields: '缺少必要字段: {field}',
|
||||
},
|
||||
};
|
||||
|
||||
// 获取配置项的辅助函数
|
||||
export const getwechatChannelConfig = (key, defaultValue = null) => {
|
||||
const keys = key.split('.');
|
||||
let config = wechatChannelConfig;
|
||||
|
||||
for (const k of keys) {
|
||||
if (config[k] === undefined) {
|
||||
return defaultValue;
|
||||
}
|
||||
config = config[k];
|
||||
}
|
||||
|
||||
return config;
|
||||
};
|
||||
|
||||
// 微信视频号工具函数
|
||||
export const wechatChannelUtil = {
|
||||
// 版本比较
|
||||
versionCompare(v1, v2) {
|
||||
const arr1 = v1.split('.');
|
||||
const arr2 = v2.split('.');
|
||||
for (let i = 0; i < Math.max(arr1.length, arr2.length); i++) {
|
||||
const num1 = parseInt(arr1[i] || 0);
|
||||
const num2 = parseInt(arr2[i] || 0);
|
||||
if (num1 > num2) return 1;
|
||||
if (num1 < num2) return -1;
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
|
||||
// 检查是否支持嵌入式播放
|
||||
isEmbedModeSupported() {
|
||||
return typeof wx !== 'undefined' && wx.canIUse(wechatChannelConfig.wechat.embedComponent);
|
||||
},
|
||||
|
||||
// 获取默认视频封面
|
||||
getDefaultCoverUrl() {
|
||||
return wechatChannelConfig.video.defaultCoverUrl;
|
||||
},
|
||||
|
||||
// 数据校验
|
||||
validateVideoData(item) {
|
||||
const requiredFields = ['feedId', 'finderUserName'];
|
||||
for (const field of requiredFields) {
|
||||
if (!item[field]) {
|
||||
throw new Error(`缺少必要字段: ${field}`);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
// 播放视频
|
||||
playVideo(item) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
// 数据校验
|
||||
this.validateVideoData(item);
|
||||
} catch (err) {
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查微信环境
|
||||
if (typeof wx === 'undefined') {
|
||||
reject(new Error(wechatChannelConfig.error.notWechat));
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查基础库版本
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
const SDKVersion = systemInfo.SDKVersion;
|
||||
if (this.versionCompare(SDKVersion, wechatChannelConfig.wechat.minSdkVersion) < 0) {
|
||||
reject(new Error(wechatChannelConfig.error.lowVersion));
|
||||
return;
|
||||
}
|
||||
|
||||
// 调用微信视频号播放API
|
||||
if (wx.openChannelsActivity) {
|
||||
wx.openChannelsActivity({
|
||||
feedId: item.feedId,
|
||||
finderUserName: item.finderUserName,
|
||||
success: (res) => {
|
||||
console.log('打开视频号成功', res);
|
||||
resolve(res);
|
||||
},
|
||||
fail: (err) => {
|
||||
this.handleError(err);
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
reject(new Error(wechatChannelConfig.error.notSupported));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 统一错误处理
|
||||
handleError(err) {
|
||||
console.error('微信视频号错误:', err);
|
||||
// 可以添加错误上报或用户提示逻辑
|
||||
switch (err.errCode) {
|
||||
case 40001:
|
||||
console.error('错误:40001,检查主体要求或嵌入式打开的关联关系');
|
||||
break;
|
||||
case 40002:
|
||||
console.error('错误:40002,参数错误,检查 feedId 和 finderUserName');
|
||||
break;
|
||||
default:
|
||||
console.error('错误:' + err.errCode + ',' + (err.errMsg || '未知错误'));
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user