HarmonyOS next之Flutter插件支持鴻蒙系統(tǒng)實(shí)踐

問題

Flutter Plugin主要用來橋接原生代碼，調(diào)用原生系統(tǒng)SDK， 比如拍照，選擇相冊，文件選擇等。

目前 [pub.dev/]中的插件，都沒有對鴻蒙系統(tǒng)的支持，不過鴻蒙現(xiàn)在也做了部分常用第三方插件的支持(例如：[gitee.com/openharmony…] 如果鴻蒙官方做了，我們可以直接使用，但是會存在不少插件，鴻蒙官方來不及做或者優(yōu)先級比較低，但是我們的項(xiàng)目中又需要，這就要求我們要學(xué)會在已有插件的基礎(chǔ)上新增支持鴻蒙系統(tǒng)原生代碼。

搭建環(huán)境(macOS M2為例)

下載鴻蒙支持的Flutter

下載結(jié)束之后切換到dev分支；鴻蒙針對Flutter的支持，是在基于的官方Flutter版本3.7.12上修改的，總體來說，這個版本穩(wěn)定性比較高。然后就是配置Flutter命令行環(huán)境變量，把Flutter命令行指向鴻蒙支持的Flutter版本。保證在終端可以正常執(zhí)行flutter doctor -v命令。

當(dāng)然更加建議使用[fvm]來管理Flutter版本，可以把鴻蒙支持的Flutter版本代碼git clone到fvm管理目錄的versions文件夾下，并flutter_flutter改名為3.7.12-ohos

這樣就可以直接使用fvm global 3.7.12-ohos 命令在切換本地不同的Flutter版本了

下載鴻蒙開發(fā)工具和配置環(huán)境變量

我這邊目前下載的DevEco Studio版本是5.0.3.502, 大家可以下載最新版本就行。

commandline-tools(可選):commandline-tools-mac-arm64-5.0.3.404.zip， 最新的DevEco開發(fā)工具內(nèi)部其實(shí)已經(jīng)包含了commandline-tools工具集

配置環(huán)境變量

export TOOL_HOME=/Applications/DevEco-Studio.app/Contents # mac環(huán)境 export DEVECO_SDK_HOME=$TOOL_HOME/sdk # command-line-tools/sdk export PATH=$TOOL_HOME/tools/ohpm/bin:$PATH # command-line-tools/ohpm/bin export PATH=$TOOL_HOME/tools/hvigor/bin:$PATH # command-line-tools/hvigor/bin export PATH=$TOOL_HOME/tools/node/bin:$PATH # command-line-tools/tool/node/bin

如何在已有插件中新增鴻蒙系統(tǒng)支持

舉一個例子，在Flutter中，我們想把圖片保存到相冊，一般會到這個庫image_gallery_saver，現(xiàn)在我們期望這個庫也支持在鴻蒙系統(tǒng)中把圖片保存到相冊中。

我這邊建議使用以下步驟

fork源碼

fork一下源碼，fork結(jié)束之后，代碼就到自己賬號下的倉庫中，我操作結(jié)束之后的[地址]。

clone到本地

git clone https://github.com/zingwin/image_gallery_saver

新增ohos插件

執(zhí)行以下命令(不推薦)，表明在已存在的插件中新增鴻蒙系統(tǒng)。

flutter create -t plugin *--platforms ohos*

但是有些項(xiàng)目可能改過名或者以下配置，執(zhí)行失敗也沒有關(guān)系，而且個人也不太建議按照以上方式新增插件，因?yàn)樗麜oiOS和Android也生成部分代碼，以及插件接口代碼，對之前的插件項(xiàng)目有一定程度的干擾，不嫌麻煩的話，直接刪除也行。

【推薦】更推薦的做法是在一個空目錄執(zhí)行創(chuàng)建插件命令

flutter create -t plugin *--platforms ohos,ios,android image_gallery_saver*

上面的命令會生成一個全新的插件，里面包含了iOS,android, ohos文件夾，代表插件支持的平臺原生代碼。然后把生成兩個的ohos文件夾復(fù)制到原項(xiàng)目（第2步）中對應(yīng)的目錄，一定別搞錯了。

修改pubspes.yaml文件

使用Android Studio打開第二步中clone的項(xiàng)目。雙擊pubspes.yaml文件。

新增ohos插件支持。其中的package可以同android的package,

pluginClass: 不要填錯了。一般情況都是這個目錄中可以找到（image_gallery_saver``/ohos/src/main/ets/components/plugin/ImageGallerySaverPlugin.ets）。

ohos:
  package: com.example.image_gallery_saver
  pluginClass: ImageGallerySaverPlugin

執(zhí)行Flutter pub get

接下來，就可以執(zhí)行flutter pub get，成功之后鏈接鴻蒙模擬器或者鴻蒙系統(tǒng)真機(jī)執(zhí)行flutter run進(jìn)行調(diào)試了

準(zhǔn)備鴻蒙插件代碼

接下來使用DevEco打開example/ohos下面的鴻蒙項(xiàng)目。

進(jìn)入oh_modules目錄下，找到剛生產(chǎn)的插件原生代碼，目前可以在這編輯代碼，但是記住，這個目前每次flutter run都會重新生成，請確保編輯的代碼及時同步到image_gallery_saver``/ohos/src/main/ets/components/plugin/目錄中，不然可能會變成消失的代碼。

因?yàn)?code>oh_modules目錄下面得代碼就鴻蒙項(xiàng)目存放第三方模塊的目錄，flutter run每次執(zhí)行都會覆蓋這里面的代碼。

比如我目前寫完代碼，會使用以下命令把代碼自動復(fù)制到插件的真實(shí)目錄

 cp *.ets /個人目錄前綴/image_gallery_saver/ohos/src/main/ets/components/plugin/

相信在未來的版本中，鴻蒙官方會解決這個問題。

上圖中我們可以看到生成到的鴻蒙插件代碼，并且在插件中還實(shí)現(xiàn)了getPlatformVersion默認(rèn)方法。

另外一個細(xì)節(jié)，請確保鴻蒙插件中的MethodChannel和Flutter側(cè)中的MethodChannel字符串一致。

開始編寫插件代碼

發(fā)現(xiàn)這個插件就兩個方法

static FutureOr<dynamic> saveImage(Uint8List imageBytes,
    {int quality = 80,
    String? name,
    bool isReturnImagePathOfIOS = false})
    
static Future saveFile(String file,
    {String? name, bool isReturnPathOfIOS = false})    

我們參考其他平臺，取插件接口參數(shù)，然后做相應(yīng)的邏輯

git push

修改完之后，把代碼push到自己的git倉庫

使用插件

把image_gallery_saver這個庫，指向我們自己的地址即可，就是第1步fork之后的地址。

image_gallery_saver:
  git:
    url: https://gitee.com/openharmony-sig/flutter_flutter.git
    ref: 431cf6867ba533770292f2e42305e58a8474b0ae

總結(jié)

以上就是在已有Flutter插件中新增鴻蒙系統(tǒng)支持的大致流程。