前言
這篇文章介紹翻譯君客戶端如何在現(xiàn)有的原生App中加入一些flutter頁(yè)面，把已有的工程改造成flutter和native結(jié)合的App。
目前翻譯君App中已經(jīng)應(yīng)用了大量Flutter頁(yè)面，性能良好。
分享出來(lái)，如果有好的方案可以互相交流。
集成方案
如果需要本地開(kāi)發(fā)，可前往flutter.io下載SDK并配置環(huán)境變量。
在配置完Flutter環(huán)境之后，如果通過(guò)IDE或者CML創(chuàng)建一個(gè)Flutter Application，目錄結(jié)構(gòu)是這樣的：
Project
├── android //原生android app目錄
├── assets // dart引用的資源文件，比如圖片
├── build
├── gen
├── ios //原生iOS app目錄
├── lib //dart代碼目錄
├── pubspec.lock
└── pubspec.yaml //包管理工具pub
這是一個(gè)完全通過(guò)Flutter構(gòu)建的App，入口也是Flutter的lib目錄下的main.dart；那么通過(guò)在lib目錄編寫(xiě)dart代碼，就可以通過(guò)flutter run命令生成Android和iOS安裝包安裝運(yùn)行。對(duì)于Android來(lái)講，是通過(guò)flutter.gradle來(lái)添加flutter.jar和vm/isolate_snapshot_data/instr，用它們編譯lib中的dart代碼，嵌入App中運(yùn)行的。
那如果想要在已有的App里增加一些flutter頁(yè)面，根據(jù)上面的目錄結(jié)構(gòu)，可以有兩種思路：
左邊的方案，是在普通的Flutter Application的基礎(chǔ)上，把已有的Application替換到Flutter Project的子目錄；國(guó)內(nèi)較早使用混合flutter開(kāi)發(fā)較多的團(tuán)隊(duì)使用的一般是左邊這種方案。后來(lái)大家也發(fā)現(xiàn)了這種方案的弊端，也就是耦合嚴(yán)重導(dǎo)致的開(kāi)發(fā)效率降低。于是很多團(tuán)隊(duì)都有自己的方案進(jìn)行依賴清理，達(dá)到右邊這種集成方式。
好處是：
1）Native工程可以獨(dú)立構(gòu)建，也可以迅速與flutter模塊交互，實(shí)現(xiàn)「熱插拔」。并且，jenkins打包也不再一定需要flutter環(huán)境。
2）Flutter工程可以通過(guò)flutter attach在chrome中進(jìn)行調(diào)試，hot reload等等。如果使用Android Studio，并且把flutter模塊作為子目錄，無(wú)需打開(kāi)兩個(gè)IDE，可在一個(gè)窗口中寫(xiě)native代碼和dart代碼。
有興趣的同學(xué)，可以參考閑魚(yú)早期的方案。
好的集成方案
好消息是，F(xiàn)lutter團(tuán)隊(duì)也意識(shí)到了這個(gè)問(wèn)題，大家可能一開(kāi)始只是想在已有原生工程中集成flutter，而不是寫(xiě)一個(gè)純flutter的app。所以，他們也在緊鑼密鼓地制定更簡(jiǎn)單的集成方案。
翻譯君使用了Flutter提供的創(chuàng)建模塊的方式來(lái)構(gòu)造flutter模塊，可以參考Add Flutter to existing apps。
也就是，使用$ flutter create -t module my_flutter創(chuàng)建flutter模塊。
這樣就直接實(shí)現(xiàn)了上面圖1右邊的剝離的flutter模塊帶來(lái)的種種好處。
注意，生成的Flutter Module可以放在Android、iOS原生工程的外面，也可以放在原生工程的內(nèi)部，使用git submodule來(lái)管理，兩種方案各有優(yōu)劣，可以自行選擇。放在外面的好處是在本地同一臺(tái)機(jī)器開(kāi)發(fā)的時(shí)候，Android、iOS工程可以依賴同一個(gè)Flutter目錄，方便修改和調(diào)試；放在目錄內(nèi)部作為git submodule的好處是，可以在同一個(gè)IDE窗口中開(kāi)發(fā)調(diào)試native和dart代碼。
源碼依賴和aar依賴，打包
- 源碼依賴
源碼依賴的優(yōu)點(diǎn)是開(kāi)發(fā)、調(diào)試方便，也就是在settings.gradle和build.gradle里加入對(duì)創(chuàng)建的flutter模塊的依賴即可，可參考上面的鏈接。
// MyApp/settings.gradle
include ':app' // assumed existing content
setBinding(new Binding([gradle: this])) // new
evaluate(new File( // new
settingsDir.parentFile, // new
'my_flutter/.android/include_flutter.groovy' // new
)) // new
- aar依賴
那如果需要用jenkins/RDM遠(yuǎn)程打包，遠(yuǎn)程的機(jī)器上沒(méi)有flutter環(huán)境，就可以把flutter和一些plugin打包成aar文件進(jìn)行依賴。可以進(jìn)入Flutter目錄和plugin目錄，分別運(yùn)行./gradlew assembleDebug/assembleRelease來(lái)生成aar文件，再在主工程里引用，flutter aar中包含了flutter sdk的代碼，所以這種方式是不需要flutter環(huán)境的，也適合第三方快速接入。
由于這兩種方式只是在 settings.gradle和app/build.gradle中有一些差別，所以可以利用腳本實(shí)現(xiàn)快速切換兩種打包方式，切換完成之后sync即可。
flutter/native混合頁(yè)面跳轉(zhuǎn)
使用了stack manager實(shí)現(xiàn)native/flutter頁(yè)面跳轉(zhuǎn)，原理簡(jiǎn)單講就是使用openurl來(lái)路由native和flutter頁(yè)面，比如hrd://profile_page代表個(gè)人信息頁(yè)。在flutter和native側(cè)各有一個(gè)路由中心來(lái)控制分發(fā)。
這種方式的優(yōu)勢(shì)是在混合頁(yè)面比較多的情況下可以方便地管理跳轉(zhuǎn)，通過(guò)截圖手段減少了跳轉(zhuǎn)的白屏/黑屏現(xiàn)象；缺點(diǎn)是少量修改了flutter sdk里的源碼，以及使用起來(lái)比較麻煩，比如參數(shù)傳遞的功能實(shí)現(xiàn)得并不是很完善，我fork了一份對(duì)它進(jìn)行了少量修改，它的原工程寫(xiě)得蠻厲害的，我覺(jué)得大家可以在原工程的代碼上做適合自己的精簡(jiǎn)或者優(yōu)化。
另外，我認(rèn)為如果新增的flutter頁(yè)面居多，可以盡量多用flutter本身的跳轉(zhuǎn)方式，無(wú)需采用Activity代理的方式，這樣性能更好也更方便。
調(diào)試和hot reload
作為模塊導(dǎo)入的flutter工程也是可以調(diào)試和hot reload的，但不能直接在IDE中進(jìn)行，需要借助Observatory在瀏覽器中進(jìn)行。
在flutter工程目錄下運(yùn)行CML，輸入flutter attach。如果無(wú)法attach，可以重啟VM或者檢查代理。
打開(kāi)一個(gè)flutter頁(yè)面，CML提示An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:55428/。
在CML窗口按下r可以hot reload, 按下R可以hot restart。
在chrome地址欄輸入http://127.0.0.1:55428/，可以進(jìn)入Observatory進(jìn)行debug等操作。
插件(plugin)管理
Plugin Packages插件可以放在flutter模塊的子目錄比如plugins通過(guò)yaml依賴，這樣，在源碼依賴的時(shí)候，主工程的gradle會(huì)自動(dòng)通過(guò)flutter.gradle識(shí)別插件中包含的原生工程代碼。
如果需要提供橋接，可以通過(guò)注冊(cè)監(jiān)聽(tīng)器的方式來(lái)規(guī)避雙向依賴的問(wèn)題；比如插件中需要引用外部工程的代碼，這肯定是不合適的，這種情況就可以通過(guò)接口回調(diào)的方式實(shí)現(xiàn)flutter對(duì)native功能的調(diào)用。
一些issues
-
./gradlew build的時(shí)候提示找不到product_vm_isolate_snapshot.bin的問(wèn)題。這個(gè)應(yīng)該是flutter本身的問(wèn)題。已提issue。可以執(zhí)行gradlew assembleDebug/assembleRelease規(guī)避。 - 找不到
icudtl.dat的問(wèn)題。這個(gè)也是一個(gè)flutter的issue，貌似仍未解決（flutter團(tuán)隊(duì)更新0.9+以后以為解決了其實(shí)并沒(méi)有），目前可以通過(guò)手動(dòng)拷貝它到assets/flutter_shared/目錄規(guī)避。 - "flutter/runtime/dart_vm.ccVM snapshot must be valid/ duplicated resources"之類(lèi)的問(wèn)題，可通過(guò)手動(dòng)刪除
app/build目錄進(jìn)行規(guī)避。
目前簡(jiǎn)單總結(jié)了這么多，有問(wèn)題可以多多交流。
