站群管理系统,建站网站知乎,网站开发就业岗位,郑州市建设信息网站以 Har 包的方式加载到 HarmonyOS 工程
创建工作
创建一个根目录
mkdir ohos_flutter_module_demo这个目录用于存放 flutter 项目和鸿蒙项目。
创建 Flutter 模块
首先创建一个 Flutter 模块#xff0c;我们选择与 ohos_app 项目同级目录
flutter create --templatemodu…以 Har 包的方式加载到 HarmonyOS 工程
创建工作
创建一个根目录
mkdir ohos_flutter_module_demo这个目录用于存放 flutter 项目和鸿蒙项目。
创建 Flutter 模块
首先创建一个 Flutter 模块我们选择与 ohos_app 项目同级目录
flutter create --templatemodule my_flutter_module如果使用了 fvm首先确定当前目录使用的 flutter 版本为鸿蒙的 SDK 版本如可以使用 fvm use custom_3.22.0设置然后在 flutter 命令前加上 fvm上面的命令也就变成了 fvm flutter create --templatemodule 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 包添依赖配置中。
复制 Har 包
cp -r my_flutter_module/.ohos/har/* ohos/har/编辑 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 页面。
总结 这种模式适合较大的项目团队常见的场景是负责 Flutter 开发的同事开发好指定的模块以 Har 包的形式交付给鸿蒙原生的开发团队。 在这种模式下鸿蒙原生的开发团队不需要太多关注 Flutter 部分的内容甚至不需要安装 Flutter 开发环境可以更好的职责分离。 缺点由于 Flutter 模块打包成了 Har 包以 so 文件存在故 Flutter 无法热重载。
参考资料
flutter_page_sample1flutter_page_sample2
