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

創建工作

創建一個根目錄

mkdir ohos_flutter_module_demo

這個目錄用于存放 flutter 項目和鴻蒙項目。

創建 Flutter 模塊

首先創建一個 Flutter 模塊，我們選擇與 ohos_app 項目同級目錄

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

命令行出現以下輸出：

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 包添依賴配置中。

1. 復制 Har 包

cp -r my_flutter_module/.ohos/har/* ohos/har/

2. 編輯 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 頁面。

總結

1. 這種模式適合較大的項目團隊，常見的場景是，負責 Flutter 開發的同事開發好指定的模塊，以 Har 包的形式交付給鴻蒙原生的開發團隊。

2. 在這種模式下，鴻蒙原生的開發團隊，不需要太多關注 Flutter 部分的內容，甚至不需要安裝 Flutter 開發環境，可以更好的職責分離。

3. 缺點，由于 Flutter 模塊打包成了 Har 包，以 so 文件存在，故 Flutter 無法熱重載。

參考資料

• flutter_page_sample1
• flutter_page_sample2