Flutter鴻蒙終端一體化-混沌初開(kāi)
點(diǎn)擊上方藍(lán)字關(guān)注我，知識(shí)會(huì)給你力量
環(huán)境配置
欲練此功，必先仔細(xì)閱讀此項(xiàng)目的README文件十遍以上。
flutter_flutter項(xiàng)目，這是我們整個(gè)工程的核心，但是很多人都倒在了第一步，其原因，就是——需要使用Dev分支！！！
https://gitee.com/openharmony-sig/flutter_flutter/tree/dev/
當(dāng)前項(xiàng)目已經(jīng)支持Linux、Mac、Windows環(huán)境下使用。首先，按照README的指引，配置好鴻蒙相關(guān)的SDK和環(huán)境變量，主要是ohpm與sdkmanager，參考README中給出的地址配置即可，需要注意的是版本要對(duì)應(yīng)。目前該項(xiàng)目對(duì)應(yīng)的官方Flutter版本是3.7。
接下來(lái)，配置命令行簽名工具，同樣是按照指引，需要注意的是簽名工具這個(gè)項(xiàng)目，需要使用gradle7.1和Java11進(jìn)行編譯，在Mac下，可以很方便的使用brew來(lái)安裝Java環(huán)境，在編譯簽名工具的時(shí)候，將環(huán)境變量中的Java11的注釋放開(kāi)即可。
shell
export PATH="/opt/homebrew/opt/openjdk@11/bin:$PATH"
編譯成功后，會(huì)生成./hapsigntool/hap_sign_tool/build/libs/hap-sign-tool.jar文件。
最后，在本地運(yùn)行鴻蒙Flutter項(xiàng)目的話，需要使用定制化的Flutter Engine，項(xiàng)目如下：
https://gitee.com/openharmony-sig/flutter_engine
按照README中的編譯方式來(lái)進(jìn)行編譯，最后獲取產(chǎn)物即可，當(dāng)然，文檔中也提供了鴻蒙編譯好的產(chǎn)物，可以直接進(jìn)行使用，這也是最方便的方法。
https://docs.qq.com/sheet/DUnljRVBYUWZKZEtF?tab=BB08J2
不過(guò)還是建議大家去編譯下engine，享受下定制engine的快感。
一起準(zhǔn)備就緒后，通過(guò)flutter doctor -v查看環(huán)境配置是否ok，得到下面的內(nèi)容，就算完成了配置。
shell
flutter doctor
[?] OpenHarmony toolchain - develop for OpenHarmony devices
? OpenHarmony Sdk location: /Users/xxx/Downloads/harmony_flutter/M1SDK/openharmony, available api versions has [10]
? hdc version 1.3.0
? ohpm version 1.4.0
? signTool location:/Users/xxx/Downloads/harmony_flutter/developtools_hapsigner/autosign 創(chuàng)建工程
使用下面的指令來(lái)創(chuàng)建我們第一個(gè)鴻蒙Flutter工程：
shell
flutter create --platforms ohos flutter_test_project
進(jìn)入創(chuàng)建好的工程，執(zhí)行下面的指令：
shell
flutter build hap --target-platform ohos-arm64 --debug --local-engine=~/flutter_engine/src/out/ohos_debug_unopt_arm64 -v
local-engine就是前面下載的定制化引擎產(chǎn)物，鴻蒙的產(chǎn)物編譯，大多都需要指定引擎地址，編譯成功后，會(huì)自動(dòng)進(jìn)行簽名，并生成相應(yīng)的signed包，執(zhí)行install指令進(jìn)行安裝。
shell
flutter install ohos/entry/build/default/outputs/default/entry-default-signed.hap
恭喜你，跑不起來(lái)，因?yàn)?.0系統(tǒng)還不支持模擬器運(yùn)行，所以，你必須有一臺(tái)鴻蒙4.0+系統(tǒng)的真機(jī)才能運(yùn)行，如果你的公司和華為有合作，那么現(xiàn)在肯定已經(jīng)收到鴻蒙的測(cè)試機(jī)了，連上設(shè)備，直接運(yùn)行就好了。
好了，F(xiàn)lutter的一小步，卻是鴻蒙的一大步。
我們來(lái)看下現(xiàn)在鴻蒙Flutter工程的結(jié)構(gòu)：
是不是熟悉的味道，純Flutter工程，整體結(jié)構(gòu)是和官方基本一直的，只是將Android、iOS換成了ohos，這里就是鴻蒙的Native工程，你可以直接使用鴻蒙Dev-ECO Studio來(lái)打開(kāi)這個(gè)工程，在它的entry-src-main-ets中，就是對(duì)應(yīng)的插件代碼，看到熟悉的GeneratedPluginRegistrant.ets嗎，換湯不換藥，整體結(jié)構(gòu)改動(dòng)不大，熟悉下鴻蒙Native代碼，很快就可以開(kāi)發(fā)了。
鴻蒙Flutter開(kāi)發(fā)有兩種模式，一種是以純Flutter工程為主，即上面的這種模式，鴻蒙代碼寫在Flutter工程中，另一種是和Android、iOS開(kāi)發(fā)類似，通過(guò)依賴?guó)櫭蒄lutter的編譯產(chǎn)物har來(lái)進(jìn)行開(kāi)發(fā)。
從技術(shù)的角度來(lái)看，第一種方案會(huì)更加簡(jiǎn)單，因?yàn)轼櫭傻腘ative代碼已經(jīng)是申明式了，類似Compose了，所以在鴻蒙Native代碼中使用Flutter頁(yè)面是非常簡(jiǎn)單的一件事，甚至可以直接將FlutterPage()當(dāng)作一個(gè)View直接使用，所以鴻蒙Flutter混編會(huì)比Android、iOS方便很多。
而另一種方式，通過(guò)產(chǎn)物進(jìn)行依賴，這種方式更加符合三端統(tǒng)一的目標(biāo)，也更適合團(tuán)隊(duì)進(jìn)行解耦和協(xié)作。不過(guò)這種方式也有一些問(wèn)題，那就是Flutter依賴的一些第三方庫(kù)，同樣是需要適配鴻蒙版的，所以在yaml中，相對(duì)正常的Flutter項(xiàng)目來(lái)說(shuō)同樣需要進(jìn)行區(qū)分。
截止目前，flutter_flutter的build har指令還有bug，會(huì)編譯失敗，還在等待社區(qū)解決中。
對(duì)于Flutter的第三方庫(kù)來(lái)說(shuō)，鴻蒙Flutter社區(qū)也給出了適配的計(jì)劃表
https://docs.qq.com/sheet/DVVJDWWt1V09zUFN2?tab=BB08J2
表中的第三方庫(kù)都是待驗(yàn)證的，有些不需要Native支持的，驗(yàn)證的版本可以直接使用，有些需要Native支持的插件功能，有計(jì)劃完成時(shí)間的，都是已經(jīng)處理過(guò)的。由此可見(jiàn)，鴻蒙Flutter社區(qū)的支持還是很快的。
所以大部分的Flutter庫(kù)，都是可以直接適配的，只有那些依賴Native的插件，才需要適配。
好了，到目前為止，鴻蒙Flutter工程已經(jīng)初具雛形，整體的適配效果還是不錯(cuò)的，本篇文章是鴻蒙Flutter的第一篇，后續(xù)還會(huì)對(duì)鴻蒙Flutter的混編方案、橋接方法繼續(xù)講解。
向大家推薦下我的網(wǎng)站 https://www.yuque.com/xuyisheng 點(diǎn)擊原文一鍵直達(dá)
專注 Android-Kotlin-Flutter 歡迎大家訪問(wèn)
往期推薦
本文原創(chuàng)公眾號(hào)：群英傳 ，授權(quán)轉(zhuǎn)載請(qǐng)聯(lián)系微信(Tomcat_xu) ，授權(quán)后，請(qǐng)?jiān)谠瓌?chuàng)發(fā)表24小時(shí)后轉(zhuǎn)載。 < END > 作者：徐宜生
更文不易，點(diǎn)個(gè)“三連”支持一下??