鸿蒙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 工程创建好之后,顺便对项目签名,签名方式如下。

rust 复制代码
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 页面并没有加载,我们将在接下来的章节中,介绍这些实现。

参考资料

相关推荐
我即将远走丶或许也能高飞1 天前
vuex 和 pinia 的学习使用
开发语言·前端·javascript
钟离墨笺1 天前
Go语言--2go基础-->基本数据类型
开发语言·前端·后端·golang
爱吃泡芙的小白白1 天前
Vue 3 核心原理与实战:从响应式到企业级应用
前端·javascript·vue.js
夜雨声烦丿1 天前
Flutter 框架跨平台鸿蒙开发 - 思维导图开发教程
flutter·华为·harmonyos
卓怡学长1 天前
m115乐购游戏商城系统
java·前端·数据库·spring boot·spring·游戏
2501_944526421 天前
Flutter for OpenHarmony 万能游戏库App实战 - 蜘蛛纸牌游戏实现
android·java·python·flutter·游戏
IT陈图图1 天前
基于 Flutter × OpenHarmony 开发的文本处理工具箱首页
flutter·华为·openharmony
小白阿龙1 天前
鸿蒙+Flutter 跨平台开发——一款“随机宝盒“的开发流程
flutter·华为·harmonyos·鸿蒙
老陈聊架构1 天前
『AI辅助Skill』掌握三大AI设计Skill:前端独立完成产品设计全流程
前端·人工智能·claude·skill
爱吃大芒果1 天前
Flutter for OpenHarmony前置知识:Dart 语法核心知识点总结(下)
开发语言·flutter·dart