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 和鸿蒙平台的不断发展和完善,未来将会有更多的开发者加入到鸿蒙应用开发的行列中来。如果你也对这个领域感兴趣,不妨尝试一下吧,相信你也会从中获得很多乐趣和收获的!

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

相关推荐
代码小学僧21 分钟前
从 Arco Table 迁移到 VTable:VTable使用经验分享
前端·react.js·开源
一个没有感情的程序猿40 分钟前
前端实现人体骨架检测与姿态对比:基于 MediaPipe 的完整方案
机器学习·计算机视觉·前端框架·开源
UtopianCoding2 小时前
什么是NoteDiscovery?Obsidian 的开源平替?
python·docker·开源
2501_915106323 小时前
HTTP 协议详解,HTTP 协议在真实运行环境中的表现差异
网络·网络协议·http·ios·小程序·uni-app·iphone
CoderJia程序员甲4 小时前
GitHub 热榜项目 - 日榜(2025-12-18)
ai·开源·大模型·github·ai教程
FIT2CLOUD飞致云4 小时前
仪表板和数据大屏支持统一设置数值格式,DataEase开源BI工具v2.10.18 LTS版本发布
开源·数据可视化·dataease·bi·数据大屏
布茹 ei ai4 小时前
QtWeatherApp - 简单天气预报软件(C++ Qt6)(附源码)
开发语言·c++·qt·开源·开源项目·天气预报
tianyuanwo5 小时前
EPEL镜像源:开源生态中的桥梁与SBOM管理的实践
开源·sbom·epel
xq95275 小时前
编程之路 2025年终总结 ,勇往直前 再战江湖
harmonyos
咸虾米_5 小时前
开发uniapp前端通用价格组件提交到DCloud插件市场
uni-app·商城·开发插件·dcloud插件市场·扩展组件