引言
在之前的文章鴻蒙Flutter實戰(zhàn)：09-現(xiàn)有Flutter項目支持鴻蒙中勒葱，介紹了如何改造項目寒瓦，適配鴻蒙平臺。
文中講述了整體的理念和思路甩苛，本文更進(jìn)一步，結(jié)合可實操的項目代碼到踏，詳細(xì)說明如何實施撬讽。
通過模塊化族展、鴻蒙殼工程，結(jié)合 FVM 管理多版本 Flutter SDK深滚，最終奕谭，保持原 Flutter 代碼純凈，最小化修改痴荐，完成了鴻蒙化的適配示例血柳。
本項目代碼地址: https://gitee.com/zacks/flutter-ohos-demo
準(zhǔn)備工作
1.安裝 FVM
dart pub global activate melos
2.使用 FVM 安裝 Flutter SDK
分別安裝官方的3.22版本，以及鴻蒙社區(qū)的 3.22.0 版本
3.搭建 Flutter鴻蒙開發(fā)環(huán)境
參考文章《鴻蒙Flutter實戰(zhàn)：01-搭建開發(fā)環(huán)境》
搭建項目架構(gòu)
創(chuàng)建目錄
# 創(chuàng)建項目目錄
mkdir flutter-ohos-demo
設(shè)置使用的 Flutter SDK 版本
推薦在 VsCode 的命令行中執(zhí)行以下命令生兆，這將創(chuàng)建 .fvm 目錄, .vscode/setting.json 文件, 和.fvmrc 文件
fvm use 3.22.0
初始化工作區(qū)間
創(chuàng)建目錄难捌，項目結(jié)構(gòu)如下所示：
.
├── packages
│ ├── apps #該目錄用于存放各端應(yīng)用殼工程
│ ├── common #該目錄用于存放公共庫，均為純 dart 代碼鸦难，不依賴于 ios/android 等原生實現(xiàn)
│ │ ├── domains #領(lǐng)域?qū)ο蟾酰娣鸥黝悓嶓w文件，如枚舉/模型/vo/事件等
│ │ ├── extensions #存放擴展類文件合蔽，對于類的擴展方法/屬性
│ │ ├── services #服務(wù)類：如請求服務(wù)/授權(quán)服務(wù)/緩存服務(wù)/平臺調(diào)用服務(wù)/路由服務(wù)/工具類等
│ │ └── widgets #通用小型 widgets, 純dart編寫的 Flutter UI 組件
│ ├── components #封裝組件庫击敌，可以依賴于第三方庫/第三方插件，或依賴于 plugins中的插件
│ │ ├── image_uploader
│ │ └── player
│ ├── modules
│ │ ├── address
│ │ ├── home
│ │ ├── me
│ │ ├── message
│ │ ├── order
│ │ ├── shop
│ │ └── support
│ └── plugins #插件庫拴事，自行封裝的插件庫沃斤，依賴于原生平臺(ios/android)的代碼
│ └── printer
├── README.md
├── melos.yaml
└── pubspec.yaml
運行 melos bootstrap
melos bootstrap
開始編寫代碼
在各個 package 初始化代碼圣蝎，如在 packages/common/domains 目錄運行
fvm flutter create --template package .
創(chuàng)建殼工程
新建兩個殼工程，一個為 app衡瓶，另外一個為 ohos_app
App 殼工程
進(jìn)入 package/apps/app 目錄, 創(chuàng)建 app 項目捅彻，該項目為一個 App 項目，用于各平臺（ios/android/mac 等鞍陨， 不包含鴻蒙）打包
fvm flutter create --template app --org com.moguyun.flutter app
增加依賴項
修改 pubspec.yaml步淹，添加以下內(nèi)容
services:
path: '../../common/services'
domains:
path: '../../common/domains'
widgets:
path: '../../common/widgets'
home:
path: '../../modules/home'
me:
path: '../../modules/me'
support:
path: '../../modules/support'
安裝依賴
運行以下命令，安裝依賴
fvm flutter pub get
鴻蒙殼工程
切換鴻蒙 Flutter SDK
首先在 flutter-ohos-demo 項目根目錄诚撵，將 Flutter 版本切換到鴻蒙化的版本
fvm use custom_3.22.0
SDK 變更以后缭裆，需要重啟 IDE (或者 Dart：Restart Analysis Server)，以便讓 Flutter 插件重啟
創(chuàng)建 ohos_app 項目
進(jìn)入 packages/apps 目錄寿烟，創(chuàng)建 ohos_app 項目
fvm flutter create --template app --platforms ohos --org com.moguyun.flutter ohos_app
增加依賴項
進(jìn)入 packages/apps/ohos_app 目錄中的 pubspec.yaml, 同樣增加依賴項
services:
path: '../../common/services'
domains:
path: '../../common/domains'
widgets:
path: '../../common/widgets'
home:
path: '../../modules/home'
me:
path: '../../modules/me'
support:
path: '../../modules/support'
三方庫鴻蒙化適配
編輯 pubspec.yaml文件澈驼，增加以下配置，通過 dependency_overrides 來替換鴻蒙化的三方庫筛武，注意鴻蒙化的庫與原庫缝其，保持版本統(tǒng)一
# 鴻蒙適配
dependency_overrides:
flutter_inappwebview:
git:
url: https://gitee.com/openharmony-sig/flutter_inappwebview.git
path: "flutter_inappwebview"
每次修改完 pubspec.yaml，使用
fvm flutter pub get更新下依賴安裝徘六。
運行調(diào)試
用 Deveco 打開apps/ohos_app/ohos 目錄内边。
在 Deveco 左上角 打開 File -> Project Structure..., 點擊 Siging Configs, 勾選 Automatically generate signature, 對鴻蒙項目簽名。
在 ohos_app 目錄下待锈，使用 fvm flutter run漠其，或者點擊運行按鈕，運行flutter項目竿音。
注意事項
melos.yaml 文件中的
sdkPath: .fvm/flutter_sdk配置了 melos 使用的 flutter SDK 版本和屎，即由FVM 配置的當(dāng)前項目版本每次切換 Flutter SDK 時，都會修改文件 .fvm/, vscode/settings.json 文件
ohos_app/pubsec.yaml 中的 dependency_overrides, 僅添加需要鴻蒙化的三方庫
ohos-3.22 在 build 時春瞬，有的 har 包可能確實柴信，建議保持 ohos-Flutter 版本最新，如果還是不行宽气，可以考慮手動復(fù)制 har 包（使用 3.7 構(gòu)建出來）
如何判斷三方庫是否需要鴻蒙化随常，簡而言之，如果三方庫由純 Dart 實現(xiàn)抹竹，則不需要單獨適配线罕，直接使用；如果三方庫依賴系統(tǒng)底層實現(xiàn)窃判，則需要鴻蒙化適配钞楼。
三方庫的適配情況，可以查詢 Gitee/Github袄琳，或者查閱表格 Flutter三方庫適配計劃
- 已知插件刪除問題询件，如果刪除插件燃乍，可能需要在ohos里面手動修改代碼，移除相關(guān)依賴
ohos/oh-package.json5
應(yīng)用截圖
總結(jié)
- 通過 FVM 管理多個 Flutter SDK 版本宛琅，僅在鴻蒙調(diào)測打包時刻蟹，切換到 ohos-flutter SDK
- 通過 apps 殼工程，將鴻蒙化適配的代碼嘿辟，盡量在 ohos_app 項目中完成舆瘪。通過 pub 包管理的
dependency_overrides配置，逐個替換鴻蒙化的三方庫 - 通過 melos 管理多包項目红伦，F(xiàn)lutter 項目進(jìn)行模塊化英古、組件化、插件化拆分昙读，職責(zé)分離召调，平臺抽象，不同平臺組合打包蛮浑，有效解決平臺不一致問題
