更新记录

1.0.0（2025-04-08） 下载此版本

当前视频为本地视频，应用商用时请删除当前的视频，当生产环境使用CDN资源。 当前为H5demo所以无法触发自动播放，得用户完成第一次交互后，视频就可以自动播放。

平台兼容性

XL-VideoPlus 短视频模板

一个开箱即用的短视频模板，支持自动播放、点赞、评论、分享等功能。

在线演示地址：在线demo

克隆/下载演示项目地址： 仓库地址

注意

当前视频为本地视频，应用商用时请删除当前的视频，当生产环境使用CDN资源。 当前为H5demo所以无法触发自动播放，得用户完成第一次交互后，视频就可以自动播放。 因为本插件上传了整个包，但是没显示，体验功能可以进入Gitee上把整个包下载下来体验使用

功能特点

• 支持 16:9 和 9:16 两种视频比例
• 自动播放（H5端需用户交互后）
• 视频加载进度提示
• 点赞功能
• 抖音风格的评论系统
  • 热门评论展示
  • 评论点赞功能
  • 评论回复功能
  • 无限加载更多
• 多平台分享（微信、QQ、微博等）
• 全屏播放
• 手势控制（上下滑动切换视频）
• 内置内存优化处理

快速开始

1. 使用 HBuilderX 打开项目

2. 运行项目
- 选择运行到浏览器或手机模拟器
- 或使用 HBuilderX 的云打包功能打包成 App

## 项目结构

xl-videoPlus/ ├── components/ # 组件目录 │ └── comment/ # 评论相关组件 ├── pages/ # 页面目录 │ └── index/ # 主页面 ├── static/ # 静态资源 ├── utils/ # 工具函数 │ ├── shareSDK.js # 分享SDK │ └── memoryManager.js # 内存管理 └── App.vue # 应用入口

## 内存优化

项目内置了内存优化管理器，自动处理以下场景：

1. **视频资源管理**
   - 自动销毁不可见的视频
   - 控制预加载数量
   - 定期清理缓存

2. **组件生命周期**
   - 自动处理组件销毁
   - 清理事件监听
   - 释放定时器

3. **数据缓存**
   - 智能缓存策略
   - 自动清理过期数据
   - 控制缓存大小

使用方法：
```javascript
import memoryManager from '@/utils/memoryManager.js';

// 在页面中使用
export default {
  onLoad() {
    // 初始化内存管理器
    memoryManager.init(this);
  },
  onUnload() {
    // 清理资源
    memoryManager.cleanup();
  }
}

分享功能

项目内置了分享SDK，支持多平台分享：

import shareSDK from '@/utils/shareSDK.js';

// 分享示例
shareSDK.share(shareSDK.PLATFORMS.WECHAT, {
  title: '分享标题',
  summary: '分享描述',
  imageUrl: '封面图片',
  href: '分享链接'
}, (success, result) => {
  if (success) {
    console.log('分享成功');
  }
});

自定义配置

在 utils/config.js 中可以修改以下配置：

export default {
  // 视频配置
  video: {
    preloadCount: 2,      // 预加载视频数量
    cacheSize: 100,       // 缓存大小(MB)
    autoPlay: true,       // 是否自动播放
    loop: true,           // 是否循环播放
  },

  // 评论配置
  comment: {
    pageSize: 10,         // 每页评论数
    maxReplies: 3,        // 默认显示回复数
    loadMoreInterval: 500 // 加载更多间隔(ms)
  },

  // 分享配置
  share: {
    platforms: ['wechat', 'moments', 'qq', 'weibo'],
    defaultTitle: '分享一个精彩视频',
    defaultImage: '/static/default-share.png'
  }
}

注意事项

1. 视频资源

   • 建议使用 MP4 格式
   • 视频大小控制在 50MB 以内
   • 使用 CDN 加速

2. 内存管理

   • 及时调用 cleanup 方法
   • 避免频繁切换页面
   • 注意视频预加载数量

3. 分享功能

   • 需要配置相应的分享接口
   • 注意分享参数的正确性
   • 处理分享失败的情况

更新日志

v1.0.0

• 初始版本发布
• 支持基本视频播放功能
• 支持点赞、评论、分享功能
• 内置内存优化管理器

联系方式

如有问题或建议，请联系：

• 邮箱：296689889@qq.com
• QQ群：983046451

分享SDK使用说明

项目内置了一个功能强大的分享SDK，支持多平台分享，使用方法如下：

引入SDK

import shareSDK from '@/utils/shareSDK.js';

支持的平台

shareSDK支持以下分享平台：

• 微信好友（WECHAT）
• 微信朋友圈（MOMENTS）
• QQ好友（QQ）
• QQ空间（QZONE）
• 新浪微博（WEIBO）
• 复制链接（COPY）
• 更多平台（MORE）

分享方法

// 获取分享选项
const options = shareSDK.getShareOptionsFromVideo(video);

// 调用分享方法
shareSDK.share(shareSDK.PLATFORMS.WECHAT, options, (success, result) => {
  if (success) {
    console.log('分享成功');
  } else {
    console.error('分享失败:', result.error);
  }
});

分享选项

分享选项包含以下属性：

{
  title: '分享标题',            // 分享标题
  summary: '分享摘要',          // 分享摘要
  imageUrl: '分享图片地址',     // 分享图片地址
  mediaUrl: '多媒体文件地址',   // 多媒体文件地址，如音乐、视频链接
  href: '分享链接地址',         // 分享链接地址
  type: shareSDK.SHARE_TYPES.WEB // 分享类型，默认为网页
}

获取支持的分享平台

// 在计算属性中获取
computed: {
  sharePlatforms() {
    return shareSDK.getSupportedPlatforms();
  }
}

自定义分享平台图标

分享平台的图标默认使用emoji表情，可以在模板中这样使用：

<view class="share-item" v-for="platform in sharePlatforms" :key="platform.id" @click="shareTo(platform.id)">
  <text class="share-icon">{{platform.icon}}</text>
  <text>{{platform.name}}</text>
</view>

内存泄漏处理

在使用短视频组件时，由于视频资源较大，需要注意以下几点以避免内存泄漏：

1. 视频销毁处理：

   • 在页面销毁时，确保调用视频的销毁方法，释放视频资源

     // 在页面的onHide或onUnload生命周期中
     onUnload() {
     // 销毁当前正在播放的视频
     if (this.currentIndex !== null) {
     const videoContext = uni.createVideoContext('video-' + this.currentIndex);
     videoContext.stop();
     }
     }

2. 预加载控制：

   • 控制视频预加载数量，避免同时加载过多视频
   • 可以只预加载当前视频的前后1-2个视频

3. 缓存清理：

   • 定期清理视频缓存，特别是在用户使用时间较长后

     // 清理视频缓存
     clearVideoCache() {
     // 实现视频缓存清理逻辑
     uni.clearStorage({
     success: () => {
      console.log('缓存清理成功');
     }
     });
     }

4. 滑动优化：

   • 在滑动切换视频时，及时销毁不再显示的视频

   • 使用防抖处理，避免快速滑动导致的资源浪费

     // 视频切换时的处理
     onSwiperChange(e) {
     const oldIndex = this.currentIndex;
     this.currentIndex = e.detail.current;
     
     // 暂停之前播放的视频
     if (oldIndex !== null && oldIndex !== this.currentIndex) {
     const oldVideoContext = uni.createVideoContext('video-' + oldIndex);
     oldVideoContext.pause();
     }
     
     // 播放当前视频
     const videoContext = uni.createVideoContext('video-' + this.currentIndex);
     videoContext.play();
     }

5. 组件复用：

   • 使用组件复用机制，避免重复创建视频组件
   • 可以使用 Vue 的 keep-alive 来缓存组件状态

6. 低端设备优化：

   • 在低端设备上，可以降低视频质量或减少预加载数量
   • 提供视频质量切换选项，让用户选择合适的视频质量

开箱即用模板说明

本项目是一个完整的短视频模板，而非组件，具有以下特点：

1. 完整功能：

   • 包含视频播放、点赞、评论、分享等完整功能
   • 内置抖音风格的评论系统和分享SDK

2. 快速部署：

   • 无需配置，克隆后即可使用
   • 提供默认样式和交互，可快速上线

3. 易于扩展：

   • 模块化设计，易于添加新功能
   • 清晰的代码结构，方便定制

4. 使用方法：

   • 直接下载或克隆仓库
   • 使用 HBuilderX 打开项目
   • 根据需要修改样式和功能
   • 发布到自己的服务器或平台