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

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

相关推荐
前端世界5 小时前
HarmonyOS应用开发指南:Toast无法显示的完整排查流程与实战案例
华为·harmonyos
纵有疾風起7 小时前
C++模版:模板初阶及STL简介
开发语言·c++·经验分享·开源
安卓开发者8 小时前
鸿蒙NEXT Wear Engine穿戴侧应用开发完全指南
ubuntu·华为·harmonyos
安卓开发者8 小时前
鸿蒙Next振动开发指南:打造沉浸式触觉反馈体验
华为·harmonyos
Devil枫8 小时前
HarmonyOS屏幕方向适配指南
华为·harmonyos
Q_Q5110082858 小时前
python+uniapp基于微信小程序团购系统
spring boot·python·微信小程序·django·uni-app·node.js·php
炒毛豆8 小时前
uniapp微信小程序+vue3基础内容介绍~(含标签、组件生命周期、页面生命周期、条件编译(一码多用)、分包))
vue.js·微信小程序·uni-app
算家计算8 小时前
破5亿用户!国产AI模型成功逆袭,成为AI普及浪潮主角
人工智能·开源·资讯
算家计算8 小时前
SAIL-VL2本地部署教程:2B/8B参数媲美大规模模型,为轻量级设备量身打造的多模态大脑
人工智能·开源·aigc
FIT2CLOUD飞致云9 小时前
安全漏洞修复,组合图副值轴支持同环比设置,DataEase开源BI工具v2.10.14 LTS版本发布
开源·数据可视化