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

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

创建工作

创建一个根目录

bash 复制代码
mkdir ohos_flutter_module_demo

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

创建 Flutter 模块

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

bash 复制代码
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

命令行出现以下输出:

bash 复制代码
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)
bash 复制代码
flutter build har --debug

命令行出现以下输出:

bash 复制代码
Running Hvigor task assembleHar...                                 47.5s

Consuming the Module
    1. Open <host project>/oh-package.json5
    2. 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 包
bash 复制代码
cp -r my_flutter_module/.ohos/har/* ohos/har/
  1. 编辑 ohos_app/oh-package.json5 文件:
json 复制代码
  "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的位置,可使用以下方式引入:

json 复制代码
  "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 提示的问题,不加的话会出现以下错误信息

bash 复制代码
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 无法热重载。

参考资料

相关推荐
爱笑的眼睛113 小时前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos
Georgewu9 小时前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉9 小时前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu9 小时前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
木叶丸11 小时前
AI三大核心概念通俗指南:AIGC、Agent、MCP
人工智能·flutter·架构
ajassi200011 小时前
开源 Arkts 鸿蒙应用 开发(六)数据持久--文件和首选项存储
linux·开源·harmonyos
塞尔维亚大汉12 小时前
鸿蒙内核源码分析(共享内存) | 进程间最快通讯方式
harmonyos·源码阅读
火柴就是我15 小时前
每日见闻之Container Decoration
android·flutter
生如夏花℡15 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
xq952716 小时前
编程之路2025年中总结,勇往直前 再战江湖
harmonyos