前言:
Flutter 因其自建的渲染引擎灵汪，背靠谷歌的支持檀训，近來俘獲了不少的開發(fā)小伙伴，越來越多的開發(fā)者嘗試使用Flutter進行開發(fā)享言，在原生項目中嵌入Flutter來完成復(fù)雜度不高的頁面成為了一個不錯的選擇峻凫。本篇文章記錄了一次在原生項目中嵌入Flutter的過程。
準備工作：搭建好 Flutter 的開發(fā)環(huán)境
[簡書抽風(fēng)可能無法顯示]
在原生項目中加入Flutter模塊
之前網(wǎng)上對混合開發(fā)有一些現(xiàn)成的庫览露，目前效果不是很理想荧琼，本文采用的是官方文檔中的方法。
1. 創(chuàng)建 Flutter 模塊
到需要創(chuàng)建模塊的文件夾下（本文為原生項目下）差牛，執(zhí)行創(chuàng)建模塊的命令：
$: flutter create --template module flutter_moudle
// 此處根據(jù)網(wǎng)絡(luò)狀況可能會耗時很久命锄，耐心等待即可。
創(chuàng)建成功后偏化，能在目下看到一個 flutter_moudle 的文件:
Tips:
- 使用"shift+cmd+."可查看文件夾隱藏文件
2. 配置 Flutter 模塊
官方在項目中啟用Flutter模塊提供了多種方法脐恩，本文主要介紹其中兩種：
（1）方法1: CocoaPods
在Podfile中添加定義，并配置對應(yīng)的Target
添加如下兩句到定義：
# flutter模塊的路徑(本文的flutter模塊與Podfile在同一目錄下)
flutter_application_path = 'flutter_moudle'
# 加載podhelper.rb
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb’)
# 配置對應(yīng)Target：
target 'MyApp' do
install_all_flutter_pods(flutter_application_path)
end
添加完畢后執(zhí)行更新項目的pod
$: pod install
完成后打開原生項目的 xxx.xcworkspace 侦讨，可以看到Pods新增DevelopmentPods文件:
（2）方法2: Framework
進入到我們第一步創(chuàng)建的Flutter組件的文件中驶冒，將相應(yīng)的模塊添加到原生項目的Framework即可，對應(yīng)模塊為：
- flutter.framework (路徑：/flutter_moudle/.ios/Flutter/App.framework)
- app.framework （路徑：/flutter_moudle/.ios/Flutter/engine/Flutter.framework）
使用兩種方法任何一種均可韵卤，配置完成后執(zhí)行編譯(cmd+b)骗污，編譯成功后表示我們已經(jīng)成功將Flutter加入到了原生項目中。
Tips1:
【Bitcode 相關(guān)】
默認情況下沈条，原生項目是開啟了Bitcode選項的需忿，而 Flutter 目前并不支持，需要手動關(guān)閉（Build Setting -> Enable Bitcode 設(shè)置為 NO）
Tips2:**
【編譯報錯：Command PhaseScriptExecution failed with a nonzero exit code】**：
這個錯誤發(fā)生在原生項目的文件名改變后，錯誤信息還提示了“flutter/XXXX/XXX no such file found”的內(nèi)容屋厘，說明找不到Flutter路徑了汞扎，我們看到在 .ios/Flutter/Generated.xcconfig 中看到了Flutter的各種路徑，而我們改變文件名后擅这，還需要更新Flutter配置澈魄，可在 “.ios” 目錄下使用自動更新命令：
$: flutter pub get
Tips3:**
【編譯卡死在：/Users/xurenjie/Desktop/AppStore/ProjectName/flutter_moudle/.ios/Flutter/flutter_export_environment.sh: line 8: inherited: command not found】**
該問題在多次編譯項目后出現(xiàn)，頻率較高仲翎，可臨時通過清除項目緩存解決痹扇。
使用Flutter
預(yù)熱并配置 Flutter 引擎
調(diào)用Flutter頁面
然后在需要展示 Flutter 頁面的時候使用 FlutterViewController：
至此，我們就完成了在原生應(yīng)用中加入Flutter模塊的配置
熱重載
熱重載是 Flutter 的一大特性溯香，在VSCode鲫构，AndroidStudio中開發(fā)時可以很容易的使用，而在Xcode下玫坛，打開熱重載的方式：
[方法1]
此方法必須等APP中成功啟動了FlutterEngin后才能生效结笨，本文的FlutterEngin在AppDelegate中項目啟動時就啟動了，所以運行項目后湿镀，可直接在flutter模塊的文件中（本文模塊文件為flutter_moudle）運行命令：
$ flutter attach
調(diào)試時需要使用：
$ flutter attach --isolate-filter='debug'
[方法2]
此方法可以等待項目中的flutter engin啟動炕吸，不同1那種需要在啟動的情況下才可以啟用：
在VSCode中運行:
$ Attach to Flutter on Device
Tips:
【isolate相關(guān)錯誤】
需要在main.dart的main函數(shù)添加如下設(shè)置：
isolate錯誤解決方式
總結(jié)
- 可以看到，將Flutter加入到原生項目中非常簡單勉痴。
- Flutter 也給項目的開發(fā)增加了復(fù)雜度赫模，一方面使得開發(fā)團隊必須形成規(guī)范，以在Android蒸矛、iOS瀑罗、Flutter、Web均存在的項目中不會發(fā)生混合開發(fā)的坑雏掠。
- Flutter的優(yōu)點在于一次開發(fā)斩祭，多處使用，且借助其自建引擎在不同平臺上都有接近于原生的表現(xiàn)乡话。
- 明顯的是摧玫，引入Flutter會明顯直接增大包體積。
- 加入Flutter的原生項目的編譯速度降低蚊伞，尤其是初次編譯非常明顯席赂，不嚴謹?shù)挠眯№椖繙y試多次，加入前初次編譯不到20s左右时迫，而加入后最長的一次等待了5分鐘颅停，（可能是提醒我該換電腦了）。
- 鑒于上述情況掠拳，將Flutter加入開發(fā)中癞揉，需要根據(jù)項目當(dāng)下的實際情況（團隊成員技術(shù)構(gòu)成，項目業(yè)務(wù)特點等等）確定，不可一概而論喊熟，也不可能一勞永逸柏肪。
