如果你正在寻找一个真实可运行、功能完整、有持续维护的 uni-app x 实战项目来学习跨端开发框架，一次开发同时支持Android、IOS、HarmonyOS、H5、Web、微信小程序，那么「爱影家」绝对值得你收藏。不但是个完整的项目，而且好玩儿且有使用价值，可以装自己手机上免费听歌观影娱乐一体化。

---

项目概述

爱影家（iMovie） 是一款基于 uni-app x 框架开发的跨平台影视 & 音乐客户端，代码完全开源，支持 Android、iOS、HarmonyOS（鸿蒙）等多端运行。

项目地址：GitCode · qq8864/uniappx_imovie

---

为什么推荐？

1. 跨多端适配是目前的痛点

随着鸿蒙HarmonyOS的火热和未来鸿蒙PC的问世，算一算现在一共有几端？每一端都需要重复开发维护，耗时耗精力且难以做到多端的统一。uni-app x 是 DCloud 推出的下一代跨平台框架。与传统的 uni-app（基于 JS 运行时）不同，uni-app x 使用 UTS 语言直接编译为各平台原生代码，性能与原生 App 相当。2024 年起，鸿蒙 Next 的崛起让"一套代码跑多端"的需求愈发迫切，uni-app x 正好填补了这一空白。

爱影家项目恰好建立在这个新框架之上，是目前少有的、功能完整的 uni-app x 完整业务项目之一。

2. 功能完整，覆盖真实业务场景

这不是一个 TodoList，也不是只有几个静态页面的 Demo。爱影家包含三大功能模块，每个模块都有完整的业务闭环：

影视模块

• 首页轮播图、热映电影、即将上映、热门剧集
• 电影 / 电视剧详情页，支持在线播放
• 贡献片源功能（任何人都可以参与内容建设）
• 电影搜索
• 历史观看记录、影视收藏

音乐模块

• 每日推荐歌曲、精选歌单
• 功能完备的音乐播放器：进度条、歌词同步滚动、唱片旋转动画
• 播放列表管理（添加、删除、切换歌曲，自动播放下一首）
• 音乐收藏与歌单分享
• 锁屏状态下音乐连续播放（已专项优化）

知乎日报模块

• 文章列表 + 详情，分页加载

3. 结构清晰，有真实的工程实践

项目不是随意堆砌的代码，而是有明确的分层架构：

├── api/          # 接口层，统一封装网络请求
├── components/   # 可复用组件（票房榜、电影板块等）
├── pages/        # 页面层
│   ├── movie/    # 影视页面
│   ├── music/    # 音乐页面
│   ├── tabBar/   # 底部导航
│   └── zhihu/    # 知乎日报
├── store/        # 全局状态管理
│   ├── musicStore.uts       # 音乐播放状态
│   ├── playlistStore.uts    # 播放列表
│   ├── collectStore.uts     # 收藏记录
│   ├── historyStore.uts     # 历史记录
│   ├── musicCollectStore.uts# 音乐收藏
│   └── tvStore.uts          # 剧集状态
└── utils/        # 工具层，请求封装等

状态管理、页面通信、组件复用，该有的工程化实践都有。

4. 有配套文章，边读边学

作者在项目的 Doc/ 目录下沉淀了多篇深度技术文章，每篇都聚焦一个真实的技术难点：

文章	解决的问题
电影列表分页加载与触底加载更多的实现原理	无限滚动列表
开发鸿蒙 HarmonyOS 影视票房榜组件	鸿蒙端适配
scroll-view 横向滚动卡片组件踩坑全记录	布局与滚动坑点
tabbar 底部导航栏的实现	自定义导航栏
音乐播放功能实现详解	音频 API 使用
音乐歌词滚动与同步实现详解	歌词时间轴算法
音乐播放列表弹窗实现详解	弹窗与列表交互
个人中心页面实现详解	常见页面布局

这些文章不是泛泛而谈，而是从真实 Bug 和踩坑出发，记录"只有运行起来才知道"的细节。

---

技术栈一览

层次	技术
框架	uni-app x
语言	UTS（TypeScript 超集，编译为原生）
视图层	uvue（Vue 3 语法）
样式	UCSS（跨平台 CSS 子集）
状态管理	自定义 Store（UTS class）
跨页面通信	EventBus
网络请求	uni.request 统一封装
音频播放	uni.createInnerAudioContext
视频播放	video 组件
目标平台	Android / iOS / HarmonyOS

---

适合人员【边学边玩，激发兴趣】

不但是一个练手项目，更是一个手机里的观影神器，真正玩起来，用起来。将自己的学习成果变成可观看的作品。

• 想上手 uni-app x 但找不到完整示例的开发者
• 想了解 UTS 语言如何替代 JS 写跨平台逻辑的开发者
• 想练手 鸿蒙 HarmonyOS 应用开发的开发者
• 想学习音频/视频播放、歌词同步、播放列表等复杂功能实现的开发者
• 想参考真实项目架构来规划自己项目的开发者

---

快速上手

环境要求

• 开发工具：HBuilderX 最新版
• Windows：Windows 10/11 64位，内存 16GB+
• macOS：macOS 11+，内存 8GB+

运行步骤

1. 克隆项目：git clone https://gitcode.com/qq8864/uniappx_imovie.git
2. 用 HBuilderX 打开项目根目录
3. 连接真机或启动模拟器
4. 点击「运行」，选择目标平台

注意：uni-app x 项目需要真机或模拟器才能运行完整功能，也可以在内置浏览器预览。

---

效果预览

---

项目持续更新

项目持续维护，有好的建议可以提issue。近期新增和优化的功能包括：

• 锁屏时音乐播放不中断（已专项修复）
• 观影时防止锁屏息屏
• 贡献片源功能（众包内容）
• 音乐收藏 + 添加到播放列表
• 歌单分享功能，让你喜欢的歌单被别人看见

---

许可协议

项目采用 MIT 协议开源，可自由学习和参考，但仅限学习研究，禁止商业用途。

---

最后

如果你在学习跨端开发框架， uni-app x是个不错选择，爱影家是目前我见过的最完整、最有参考价值的开源实战项目之一。欢迎Star 一下，慢慢研究，绝对不亏。

• 猫哥CSDN 博客：blog.csdn.net/yyz_1987
• 项目开源地址：GitCode · qq8864/uniappx_imovie