鸿蒙Flutter实战:21-混合开发详解-1-概述

引言

在前面的系列文章中,我们从搭建开发环境开始,讲到如何使用、集成第三方插件,如何将现有项目进行鸿蒙化改造,以及上架审核等内容;还以高德地图的 HarmonyOS SDK 的使用为例, 讲解了如何将高德地图集成至项目当中。

混合开发

除了使用 Flutter 工程做为主项目开发以外,还有一种常见的开发方式,即混合开发,主项目工程为 HarmonyOS 工程, Flutter 工程以模块形式存在,,以依赖方式加载到主项目工程中,最终实现混合开发 。

想必混合开发也不会陌生,因为我们也简要介绍过,鸿蒙 Flutter 项目混合开发的两种形式。

从本章开始,我们将进一步深入,从原理出发、以工程实战为主线,探索这两种混合开发方式。

混合开发的两种方式

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

HAR(Harmony Archive)是静态共享包,可以包含代码、C++库、资源和配置文件。通过HAR可以实现多个模块或多个工程共享ArkUI组件、资源等相关代码。

这种开发方式,就是将 Flutter 模块编译打包成 HAR 包,在原生鸿蒙项目中,以 Har 包的方式引入这个模块包,从而实现混合开发。

  1. 以源码的方式加载到 HarmonyOS 工程

从方式 1 的介绍中,可以发现,每次 Flutter 模块的更新都需要重新编译成 Har 包,并且需要重新打包到原生鸿蒙工程中,非常麻烦。于是就有了源码依赖的方式,也就是说,

让原生鸿蒙工程依赖 Flutter 模块的源码,这样 Flutter 代码变更时,不需要重新打包成 Har 包,而且可以在开发过程中,实现热更新,实时刷新界面。

开发流程

  1. 总目录

为了方便管理/演示,本示例的目录名为 ohos_flutter_module_demo, 我们将原生鸿蒙工程和 Flutter 模块都在这个目录下创建。

  1. 创建原生鸿蒙工程

这个也就是宿主工程,这里我们使用 DevEco Studio,在 ohos_flutter_module_demo 目录下面, 创建一个原生鸿蒙工程,本文中工程名命名为 ohos_app。

  1. 创建 Flutter 模块

这个流程都一样,我们可以使用命令以下命令创建一个 Flutter 模块:

bash 复制代码
flutter create --template=module my_flutter_module

最终项目目录结构如下:

复制代码
ohos_flutter_module_demo
├── my_flutter_module
├── ohos_app

这样,为了方便维护,Flutter 模块在宿主项目外部创建,与宿主项目同级目录。本文中,上级目录为 ohos_flutter_module_demo, 其下有两个子目录,分别是 ohos_app (宿主项目),和 my_flutter_module (Flutter 模块)。

  1. 编译 Flutter 模块

如何使用 Har 包模式,需要先将 Flutter 模块编译成 Har 包;如何使用源码依赖的方式,则不需要这一步。

使用以下命令将 Flutter 模块编译成 Har 包:

bash 复制代码
flutter build har --debug
  1. 配置原生鸿蒙工程

如果是通过 Har 包模式,则可将 Har 包添加至依赖文件中:

首先先构建出的 Har 包复制到 ohos 鸿蒙工程中:

bash 复制代码
cp -r my_flutter_module/.ohos/har/* ohos_app/har/
json 复制代码
  "dependencies": {
    "@ohos/flutter_module": "file:har/flutter_module.har",
    "@ohos/flutter_ohos":  "file:har/flutter.har"
  },
  "overrides" {
    "@ohos/flutter_ohos": "file:har/flutter.har",
  }

如果是通过源码模式,则需将 Flutter 模块的源码添加至依赖文件中:

bash 复制代码
  "dependencies": {
    "@ohos/flutter_module": "../flutter_module"
  }
  1. 修改入口文件(可选) 修改入口文件, 将 Flutter 模块生成的 .ohos目录中的 EntryAbility.ets 和 Index.ets 文件复制到宿主工程中进行替换
css 复制代码
cp my_flutter_module/.ohos/entry/src/main/ets/entryability/EntryAbility.ets ohos_app/entry/src/main/ets/entryability/EntryAbility.ets
cp my_flutter_module/.ohos/entry/src/main/ets/pages/Index.ets ohos_app/entry/src/main/ets/pages/Index.ets
相关推荐
小白变怪兽15 分钟前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头18 分钟前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全1 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing1 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆1 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
幽蓝计划2 小时前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
华为·harmonyos
我在北京coding2 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机3 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人3 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
翻滚吧键盘3 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js