uni-app 开发HarmonyOS的鸿蒙影视项目分享：从实战案例到开源后台

最近，HBuilderX 新版本发布，带来了令人兴奋的消息——uni-app 现在支持 Harmony Next 平台的 App 开发。这对于开发者来说无疑是一个巨大的福音，意味着使用熟悉的 Vue 3 语法和开发框架，就可以为鸿蒙生态贡献自己的力量。

前言

作为一名开发者，我之前完成了一个有趣的项目——一个基于 uni-app 的免费观影 App。经过一番尝试，这个 App 已经成功编译到鸿蒙平台，可以在鸿蒙设备上流畅运行。这不仅为我的学习之路增添了新的成就感，也为想要尝试鸿蒙应用开发的朋友们提供了一个基于uniapp的鸿蒙学习经典案例。

鸿蒙系统的出现，对于广大开发者来说是一个全新的挑战与机遇。使用 uni-app 开发鸿蒙应用，无需从零开始学习鸿蒙的原生开发语言和框架，就可以快速上手，这对于很多非鸿蒙原生开发背景的开发者来说是非常友好的。而对于已经熟悉 uni-app 的开发者来说，开发鸿蒙应用更是如鱼得水，效率大幅提升。

编译成功截图：

关于源uniapp的免费观影app介绍：

参见《uni-app 影视类小程序开发从零到一 | 开源项目分享》：https://blog.csdn.net/yyz_1987/article/details/140575597?spm=1001.2014.3001.5502

项目背景

我的免费观影 App 项目，主要是为了激发学习兴趣，让开发者能够通过实际操作项目，快速看到自己的成果。项目中采用了 Vue 3 的语法和一些常用的前端技术，如 Vuex 管理状态，Vue Router 实现页面跳转，以及一些第三方库来提升用户体验。通过这个项目，开发者不仅能够学习 uni-app 的基本用法，还能够接触到一些常见的前端开发模式和最佳实践。

uniapp观影app项目地址：https://gitee.com/yyz116/imovie

鸿蒙原生版本观影app项目地址：https://gitee.com/yyz116/hmmovie

此外，这个项目还基于开源的golang影视后台服务接口进行开发。这个接口提供了丰富的影视资源数据，包括电影、电视剧、动漫等，开发者可以通过简单的 API 请求获取到这些数据，并在自己的应用中进行展示和播放。为了方便更多爱好者的学习和使用，我决定将这个接口的源代码(基于golang+mongoDB)也开源出来。

后台服务开源地址：https://gitee.com/yyz116/go-imovie

如果不想部署后台服务，则可以联系我，暂时使用我部署好的后台接口服务，但仅限于学习哈，别分享给他人免费看电影。

这个影视后台服务接口采用了 golang的 go-zero微服务 框架进行开发，使用 MongoDB 来存储数据。接口提供了一系列 RESTful API，包括获取电影列表、获取电视剧列表、获取动漫列表、获取影视详情等，还有其他一些方便练习的接口服务如知乎日报，网易云音乐接口。

通过这个项目，开发者不仅可以学习到如何使用 uni-app 开发鸿蒙应用，还可以学习到如何设计和实现一个简单的后台服务接口。这对于想要深入了解全栈开发的开发者来说，是一个非常好的学习机会。

uniapp对鸿蒙的支持

自 HBuilderX 4.27 版本开始，uni-app 支持Harmony Next平台的App开发。目前仅支持 uniapp的vue3 项目或者uniapp-x的项目编译到鸿蒙平台。且只要你的项目中没有使用特定的针对android或其他平台的插件，都可以成功的编译到鸿蒙平台。

兼容性说明

HBuilderX 4.24+ 开始支持运行到鸿蒙平台
鸿蒙开发只支持Vue3、不支持Vue2，不支持plus、但支持nvue
nvue编译到鸿蒙后非原生渲染，而是与web一样渲染（自动注入一些默认样式进行兼容）
Vue3也支持选项式代码风格，参考Vue2升Vue3指南
HBuilderX 4.31+ 构建的鸿蒙运行包不支持 x86_64 平台，会影响到 Windows 系统和部分 Mac 系统的鸿蒙模拟器无法使用，需使用真机调试
HBuilderX 4.41+ 开始运行到鸿蒙设备时支持修改代码后热刷更新
HBuilderX 4.41+ 开始运行到鸿蒙设备时控制台显示的应用日志支持回源代码
HBuilderX 4.43+ 开始支持将 mainfest.json 里面配置的应用版本名称/应用版本号（versionName/versionCode）应用于鸿蒙平台，且优先于 harmony-configs/AppScope/app.json5 中的设置
HBuilderX 4.61+ 开始支持 uni-app x 项目，且支持开启调试功能
HBuilderX 4.61+ 开始支持配置签名证书，且支持自动申请调试证书

开发环境要求

HBuilderX 4.24+ 下载地址
DevEco Studio 下载地址
HBuilderX 4.24+ 要求 DevEco Studio 5.0.3.400+
HBuilderX 4.31+ 要求 DevEco Studio 5.0.3.800+。
HBuilderX 4.61+ 针对 uni-app x 项目要求 DevEco Studio 5.0.7.100+。

uni-app 项目要求鸿蒙系统版本 API 12 以上，uni-app x 项目要求鸿蒙系统版本 API 14 以上（DevEco Studio有内置鸿蒙模拟器）
如果没有符合兼容性要求的模拟器，就需要有真机作为运行设备

环境设置

默认情况下，HBuilderX 会在项目内的 unpackage 目录下游创建鸿蒙工程目录，用于构建鸿蒙的运行包和发行包：

调试运行的时候默认使用的鸿蒙工程目录位于 unpackage/dist/dev/app-harmony
发行打包的时候默认使用的鸿蒙工程目录位于 unpackage/dist/build/app-harmony

在 HBuilderX 中设置 DevEco Studio 的安装位置：

HBuilderX 依赖于 DevEco Studio 里面带的鸿蒙工具链，所以需要电脑已经安装了符合版本要求的 DevEco Studio。

打开HBuilderX，点击上方菜单 - 工具 - 设置，再点击 运行配置，在鸿蒙运行配置中设置 DevEco Studio 的安装路径。

写在最后

总的来说，uni-app 开发鸿蒙应用是一个非常有趣的过程，不仅可以提升开发效率，真正实现一端多发，开发一次全平台运行。还可以为鸿蒙生态做出自己的贡献。我相信，随着 uni-app 和鸿蒙平台的不断发展和完善，未来将会有更多的开发者加入到鸿蒙应用开发的行列中来。如果你也对这个领域感兴趣，不妨尝试一下吧，相信你也会从中获得很多乐趣和收获的！

希望我的分享能够对你有所帮助，如果你有任何问题或建议，欢迎在评论区留言交流。