更新记录

1.0（2025-08-31） 下载此版本

新增视频激励广告页面

平台兼容性

uni-app(4.21)

uni-app x(4.45)

其他

短视频页面

功能特性

🎥 核心功能

• 上下滑动切换视频 - 类似抖音的垂直滑动体验
• 自动播放 - 切换到视频时自动开始播放
• 无缝循环 - 视频播放完成后自动重复播放
• 点击播放/暂停 - 点击视频区域可以控制播放状态
• 智能播放控制 - 切换视频时自动暂停当前视频，播放新视频

📱 交互功能

• 点赞 - 支持点击点赞，实时更新点赞数量
• 评论 - 点击评论按钮弹出评论列表，支持添加新评论
• 分享 - 点击分享按钮触发分享功能
• 关注 - 支持关注视频作者
• 静音控制 - 点击音量图标控制视频音量

🎨 界面设计

• 全屏沉浸式体验 - 视频占满整个屏幕
• 渐变遮罩 - 顶部和底部渐变遮罩确保文字可读性
• 右侧操作栏 - 头像、点赞、评论、分享等操作按钮
• 底部信息栏 - 显示作者信息、视频描述、音乐信息
• 实时状态栏 - 显示剩余观看次数和今日奖励情况
• 激励广告按钮 - 动态显示激励广告触发按钮

🔧 技术特性

• Vue 3 + TypeScript - 使用最新的 Vue3 组合式 API
• uni-app x框架 - 基于uni-app x开发，支持跨平台部署
• 响应式数据 - 实时更新点赞、评论等数据
• 性能优化 - 智能的视频播放控制，避免资源浪费
• 鸿蒙系统兼容 - 专门针对鸿蒙系统进行了适配优化

平台兼容性

✅ 支持平台

• Android - 完整支持，包括激励视频广告
• iOS - 完整支持，包括激励视频广告
• 鸿蒙系统(HarmonyOS) - 专门优化，完美兼容
• 其他平台 - 基础功能支持，广告功能模拟

🎯 鸿蒙系统优化

• 视频播放器优化 - 针对鸿蒙系统视频组件进行特殊处理
• 滑动性能优化 - 使用 will-change: transform 提升滑动流畅度
• 触摸交互优化 - 适配鸿蒙系统的触摸事件处理
• 样式兼容性 - 针对鸿蒙系统UI组件进行样式调整

页面访问

1. 从首页进入: 首页 → "短视频" 选项
2. 直接访问: /pages/video/index

数据结构

interface VideoItem {
    id: number;
    videoUrl: string; // 视频链接
    cover: string; // 视频封面
    description: string; // 视频描述
    isPlaying: boolean; // 播放状态
    muted: boolean; // 静音状态
    isLiked: boolean; // 点赞状态
    likeCount: number; // 点赞数量
    commentCount: number; // 评论数量
    shareCount: number; // 分享数量
    isLive: boolean; // 是否直播
    author: {
        // 作者信息
        id: number;
        nickname: string;
        avatar: string;
        isFollow: boolean;
    };
    music?: {
        // 音乐信息
        name: string;
        cover: string;
    };
}

🎁 激励视频广告功能

功能说明

• 免费观看次数限制 - 用户每天有限的免费观看次数
• 真实激励视频广告 - 集成uni-app x官方激励视频广告API
• 每日限制机制 - 防止用户过度观看广告，保护广告收益
• 状态栏显示 - 实时显示剩余观看次数和今日奖励情况

激励机制设计

1. 初始免费次数: 3 次免费观看
2. 观看广告奖励: 每次完整观看激励视频可获得 5 次额外观看
3. 每日上限: 最多观看 15 次激励视频广告
4. 观看触发: 超过第 3 个视频时会出现激励广告按钮

技术实现

1. 广告API集成

使用uni-app x官方API创建激励视频广告：

// 创建激励视频广告对象
rewardedVideoAd = uni.createRewardedVideoAd({
    adpid: rewardAdConfig.adpid, // 广告位ID
});

// 监听广告事件
rewardedVideoAd.onLoad(() => {
    // 广告加载成功
});

rewardedVideoAd.onError((err) => {
    // 广告加载失败
});

rewardedVideoAd.onClose((res) => {
    // 广告关闭，判断是否完整观看
    if (res.isEnded) {
        giveReward(); // 给予奖励
    }
});

2. 广告状态管理

const adLoadState = reactive({
    isLoading: false,    // 加载中
    isLoaded: false,     // 已加载
    loadError: null,     // 加载错误
});

3. 平台兼容性处理

// #ifdef APP-PLUS
// 真实广告API调用
rewardedVideoAd.show();
// #endif

// #ifndef APP-PLUS  
// 非APP平台模拟效果
setTimeout(() => {
    giveReward();
}, 2000);
// #endif

配置说明

1. 申请广告位 ID

• 前往 uni-ad 后台 申请正式的广告位 ID
• 将测试 ID 1507000689 替换为真实的广告位 ID
• 在 rewardAdConfig.adpid 中设置

2. 自定义奖励参数

// 用户激励状态
const userRewardState = reactive({
    freeViewCount: 3, // 免费观看次数 - 可调整
    totalRewards: 0, // 累计获得奖励次数
    todayRewards: 0, // 今日已观看奖励次数
    maxDailyRewards: 15, // 每日最大奖励次数 - 可调整
});

3. 修改奖励数量

在 giveReward() 函数中调整：

userRewardState.freeViewCount += 5; // 修改奖励的观看次数

收益优化建议

1. 多平台接入 - 在 uni-ad 后台同时开通穿山甲、优量汇、快手等多个广告平台
2. 合理频次控制 - 避免用户每日观看次数过多，建议 15 次左右
3. 激励场景优化 - 可以设计更多激励场景，如解锁高清、去除水印等
4. 服务器回调 - 开通服务器回调验证，防止刷广告作弊

自定义配置

修改视频数据

编辑 videoList 数组，添加或修改视频信息：

const videoList = ref([
    {
        id: 1,
        videoUrl: "your-video-url",
        cover: "your-cover-image",
        description: "视频描述",
        // ... 其他属性
    },
]);

调整样式

修改对应的 SCSS 样式类：

• .video-container - 容器样式
• .right-actions - 右侧操作栏
• .bottom-info - 底部信息栏

注意事项

1. 视频格式 - 建议使用 MP4 格式，确保跨平台兼容性
2. 网络优化 - 视频文件较大，建议使用 CDN 或本地服务器
3. 性能考虑 - 避免同时加载过多视频，实现懒加载机制
4. 鸿蒙测试 - 在鸿蒙设备上测试视频播放和滑动性能
5. 广告测试 - 使用测试广告位ID进行开发测试，正式发布前替换为真实ID
6. 平台限制 - 激励视频广告仅在APP平台有效，其他平台为模拟效果

扩展功能建议

• 添加视频预加载机制
• 实现评论回复功能
• 添加视频收藏功能
• 支持视频下载
• 添加直播功能
• 实现推荐算法
• 接入服务器回调验证
• 添加更多激励场景
• 优化鸿蒙系统性能
• 增加更多平台适配