当前位置: 首页 > backend >正文

鸿蒙Flutter实战:22-混合开发详解-2-Har包模式引入

以 Har 包的方式加载到 HarmonyOS 工程

创建工作

创建一个根目录

mkdir ohos_flutter_module_demo

这个目录用于存放 flutter 项目和鸿蒙项目。

创建 Flutter 模块

首先创建一个 Flutter 模块,我们选择与 ohos_app 项目同级目录

flutter create --template=module my_flutter_module

如果使用了 fvm,首先确定当前目录使用的 flutter 版本为鸿蒙的 SDK 版本,如可以使用 fvm use custom_3.22.0设置,然后在 flutter 命令前加上 fvm,上面的命令也就变成了 fvm flutter create --template=module my_flutter_module

命令行出现以下输出:

Creating project my_flutter_module...
Resolving dependencies in `my_flutter_module`...
Downloading packages...
Got dependencies in `my_flutter_module`.
Wrote 12 files.All done!
Your module code is in my_flutter_module/lib/main.dart.

创建 Flutter 模块成功之后,目录结构如下:

创建 DevEco 工程

使用 DevEco 在 ohos_flutter_module_demo 目录下,新建一个名为 ohos_app 的工程。

注意保存的目录为 xxxx/ohos_flutter_module_demo/ohos_app

创建成功后,整个目录结构如下:

可以看到,我们将 Flutter 模块放在了与 ohos_app 项目同级。my_flutter_module 中自动创建了 .ohos 目录, 这也是一个简单的鸿蒙项目,不过会包含一个名为 flutter_module 的模块。

将 Flutter 模块打包成 Har 包

接下来,我们使用 flutter build har 命令将 Flutter 模块打包成 Har 包。

打包前首先配置签名,用 DevEco 打开 .ohos 目录,然后对项目签名,操作如下:

DevEco Studio 打开 my_flutter_module/.ohos 工程后配置调试签名(File -> Project Structure -> Signing Configs 勾选 Automatically generate signature)
flutter build har --debug

命令行出现以下输出:

Running Hvigor task assembleHar...                                 47.5sConsuming the Module1. Open <host project>/oh-package.json52. Add flutter_module to the dependencies list:"dependencies": {"@ohos/flutter_module": "file:path/to/har/flutter_module.har"}3. Override flutter and plugins dependencies:"overrides" {"@ohos/flutter_ohos": "file:path/to/har/flutter.har",}

观察目录 my_flutter_module/.ohos/har 目录,可以看到 Flutter 模块的 Har 包已经生成了, 里面生成了两个文件,分别是 flutter_module.har 和 flutter.har。

注意,生成的 flutter_module.har 是默认名称,与项目名无关。如何想要修改生成的名称,可在 my_flutter_module/.ohos/flutter_module/oh-package.json5 文件中修改包名。

引入 Har 包到 ohos 项目中

接下来,我们将生成的 har 包复制到宿主项目 ohos 中,然后回到 ohos 项目工程,将上面生成的 Har 包添依赖配置中。

  1. 复制 Har 包
cp -r my_flutter_module/.ohos/har/* ohos/har/
  1. 编辑 ohos_app/oh-package.json5 文件:
  "dependencies": {"@ohos/flutter_module": "file:har/my_flutter_module.har","@ohos/flutter_ohos": "file:har/my_flutter.har"},"overrides" {"@ohos/flutter_ohos": "file:har/flutter.har",}

注意:如何不想使用复制Har包的方式,也可以通过相对路径直接引入原Har的位置,可使用以下方式引入:

  "dependencies": {"@ohos/flutter_module": "file:../my_flutter_module/.ohos/har/flutter_module.har","@ohos/flutter_ohos": "file:../my_flutter_module/.ohos/har/flutter.har"},"overrides": {"@ohos/flutter_ohos": "file:../my_flutter_module/.ohos/har/flutter.har"},

这里需要配置 overrides ,为了解决依赖冲突问题,因为 @ohos/flutter_module依赖了 @ohos/flutter_ohos, 但因为使用的是相对目录,会导致加载失败,故这里通过 overrides 来重新指定 @ohos/flutter_ohos 的路径。

另外,与上文提示或者官方文档中不同的是,我们在 dependencies 也添加了 @ohos/flutter_ohos ,这是为了 IDE 提示的问题,不加的话会出现以下错误信息

Cannot find module '@ohos/flutter_ohos' or its corresponding type declarations. <ArkTSCheck>

最后, 再次对 ohos 项目签名,并运行 DevEco 项目。

接下来

现在我们只是将 Har 包引入到 ohos 项目中,在接下来的文章 跳转Flutter页面中,我们将介绍如何在 ohos 原生项目中,初始化 Flutter 引擎,并在合适的地方跳转打开 Flutter 页面。

总结

  1. 这种模式适合较大的项目团队,常见的场景是,负责 Flutter 开发的同事开发好指定的模块,以 Har 包的形式交付给鸿蒙原生的开发团队。

  2. 在这种模式下,鸿蒙原生的开发团队,不需要太多关注 Flutter 部分的内容,甚至不需要安装 Flutter 开发环境,可以更好的职责分离。

  3. 缺点,由于 Flutter 模块打包成了 Har 包,以 so 文件存在,故 Flutter 无法热重载。

参考资料

  • flutter_page_sample1
  • flutter_page_sample2
http://www.xdnf.cn/news/8087.html

相关文章:

  • VUE 文件下载,流形式的文件下载,判断返回的是流还是JSON;获取下载名称
  • 【Linux笔记】——网络基础
  • 【Java面试】从Spring Boot到Kafka:技术栈与业务场景全面剖析
  • 5G 网络切片深度解析
  • Python----循环神经网络(Word2Vec的优化)
  • 《JVM G1 源码分析和调优》笔记
  • C++23 容器推导指引中对于分配器的非推导语境(P1518R2)
  • 用 Deepseek 写的 html+js 密码生成器
  • 【软件使用】RSS(Really Simple Syndication)
  • WebSocket 从入门到进阶实战
  • LeetCode 76题「最小覆盖子串」
  • 嵌入式学习的第二十六天-系统编程-文件IO+目录
  • Axure安装与基础
  • 计算机网络 第三章:运输层(二)
  • day1 大模型学习 Qwen系列学习
  • Java求职面经分享:Spring Boot到微服务,从理论到实践
  • RISC-V 开发板 MUSE Pi Pro Gstreamer 编码UVC及MIPI CSI摄像头视频流
  • flutter 项目调试、flutter run --debug调试模式 devtools界面说明
  • 每日Prompt:像素风格插画
  • HarmonyOS NEXT~鸿蒙系统下的Cordova框架应用开发指南
  • React中常用的钩子函数:
  • ubuntu20.04vscode使用C++20(调整gcc版本vscode设置)
  • 【Spark集成HBase】Spark读写HBase表
  • 深度解析Pytest中Fixture机制与实战案例
  • VSCode GitHub Copilot 安装与使用完全指南
  • (初级)前端初学者入门指南:HTML5与CSS3核心知识详解
  • 【Ubuntu修改串口延时(Latency Timer)为1毫秒(设备拔插或系统重启后自动生效)】
  • 矩阵短剧系统:如何用1个后台管理100+小程序?技术解析与实战应用
  • SQL概述和定义
  • HarmonyOS开发-自定义倒计时功能