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

鸿蒙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.lryc.cn/news/2386433.html

相关文章:

  • 游戏引擎学习第302天:使用精灵边界进行排序
  • SpringBoot+MyBatis
  • wireshark: Display Filter Reference
  • Java基础 Day19
  • VMware+Windows 11 跳过安装阶段微软账号登录
  • HarmonyOS开发-应用间跳转
  • 网工每日一练
  • 使用 Navicat 17 for PostgreSQL 时,请问哪个版本支持 PostgreSQL 的 20150623 版本?还是每个版本都支持?
  • 校园二手交易系统
  • 基于pycharm,python,flask,sklearn,orm,mysql,在线深度学习sql语句检测系统
  • LangChain02-Agent与Memory模块
  • upload-labs通关笔记-第17关文件上传之二次渲染gif格式
  • 计算机网络学习20250525
  • STM32中的SPI通信协议
  • 从版本控制到协同开发:深度解析 Git、SVN 及现代工具链
  • redis Pub/Sub 简介 -16 (PUBLISH、SUBSCRIBE、PSUBSCRIBE)
  • 《黄帝内经》数学建模与形式化表征方式的重构
  • PyTorch Image Models (timm) 技术指南
  • 基于Scikit-learn与Flask的医疗AI糖尿病预测系统开发实战
  • 掌握聚合函数:COUNT,MAX,MIN,SUM,AVG,GROUP BY和HAVING子句的用法,Where和HAVING的区别
  • 【Node.js】高级主题
  • 【Linux】定时任务 Crontab 与时间同步服务器
  • 【TCP/IP协议族详解】
  • 蓝桥杯电子赛_零基础利用按键实现不同数字的显现
  • Docker架构详解
  • Rust 学习笔记:关于生命周期的练习题
  • Spring AI 模块架构与功能解析
  • 单元测试学习笔记
  • 多模态大语言模型arxiv论文略读(九十)
  • (1-6-1)Java 集合