鸿蒙Flutter实战:23-混合开发详解-3-源码模式引入

引言

在前面的文章混合开发详解-2-Har包模式引入中,我们介绍了如何将 Flutter 模块打包成 Har 包,并引入到原生鸿蒙工程中。本文中,我们将介绍如何通过源码依赖的方式,将 Flutter 模块引入到原生鸿蒙工程中。

创建工作

创建一个根目录

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

DevEco 工程创建好之后,顺便对项目签名,签名方式如下。

复制代码
DevEco Studio 打开 my_flutter_module/.ohos 工程后配置调试签名(File -> Project Structure -> Signing Configs 勾选 Automatically generate signature),然后依次点击 Apply,OK。

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

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

配置源码依赖

.ohos软连接至主项目

由于开源鸿蒙官方文档中给出的方案并不理想,这里我们使用软连接的方案,来实现基于源码的联动开发。

正常情况下,my_flutter_module 创建成功后,会包含一个 .ohos 目录,这个目录是一个鸿蒙工程(里面包含 flutter_module 模块),它可以做为 Flutter 的宿主运行。但是这个宿主工程,并不是我们期望的 ohos_app, 两个工程没有任何关联,所以也无法联动开发。

所以我们执行以下操作:

bash 复制代码
# ⚠️首先需要将flutter_module复制到鸿蒙宿主工程,避免出现错误 "Error: Parse ohos module.json5 error: Error: Can not found module.json5 at"
cp -r my_flutter_module/.ohos/flutter_module ohos_app/

# 进入目录 my_flutter_module,在此处创建软连接
cd my_flutter_module
#  删除 .ohos 目录
rm -rf .ohos
# 创建软连接至鸿蒙宿主工程,根据需要更改目录名称
ln -s ../ohos_app .ohos

通过以上操作,我们将 .ohos 目录以软连接的方式,替换成了 ohos_app 鸿蒙工程,这样一来,当我们运行 Flutter 代码时,就会把 ohos_app 做为宿主,这样就实现了联动源码开发,也支持 hot reload (热重载)。

更新项目

经过上操作后,我们运行 flutter run , 让 Flutter 来自动更新项目配置

bash 复制代码
# 运行 flutter 代码,以更新鸿蒙项目目录
flutter run

查看 ohos_app/build-profile.json5 文件, 可以看到命令会自动添加模块配置:

diff 复制代码
  "modules": [
    ...
+    {
+      "name": "flutter_module",
+      "srcPath": "./flutter_module"
+    }
  ]

同时查看 ohos_app/har 目录,可以看到自动生成了 flutter.har 文件。

可以看到运行 flutter run时,控制台输出以下内容:

bash 复制代码
Launching lib/main.dart on FMR0224904009635 in debug mode...
start hap build...
...
Running Hvigor task assembleHap...                                 95.7s
✓ Built ../ohos_app/entry/build/default/outputs/default/entry-default-signed.hap.
installing hap. bundleName: com.shaohushuo.ohos_app

经过一段等待之后,我们的 App 就运行起来了,应用展示的是一个原生页面,Flutter 引擎及 Flutter 页面并没有加载,我们将在接下来的章节中,介绍这些实现。

参考资料

相关推荐
谷子在生长5 小时前
纯血鸿蒙自定义弹窗最佳实践:从「到处复制」到「一行调用」
前端·harmonyos
小魔女千千鱼13 小时前
把 Go 塞进鸿蒙PC:windows上用 c-shared 跑 2048
harmonyos
TrisighT13 小时前
Electron 跑在鸿蒙 PC 上,单窗口和多窗口内存差 800MB?我抓了 5 组数据
性能优化·electron·harmonyos
恋猫de小郭1 天前
Android 限制侧载新进展,谷歌联合国内厂商推验证计划
android·前端·flutter
恋猫de小郭1 天前
解读 Android 17 全新内存限制,有没有“豁免”后门?
android·前端·flutter
TrisighT2 天前
AI写埋点代码,35%覆盖率坑惨运营
harmonyos·arkts·arkui
程序员老刘4 天前
跨平台开发地图 | 2026年6月
flutter·ai编程·客户端
悟空瞎说4 天前
Flutter 架构详解:新手必懂底层原理
flutter
SoaringHeart4 天前
Flutter最佳实践:IM聊天文字链接自动识别跳转
前端·flutter