Now直播iOS Flutter混合工程實踐

做者：騰訊NOW直播 - mirageqliu（劉強）

前言

騰訊Now直播iOS App在近期版本嵌入了Flutter功能開發模塊，本文旨在討論咱們Now直播終端團隊對iOS Flutter混合開發模式的一些思路和實踐，歡迎你們探討。總體來看團隊經歷了三個混編開發模式階段，分別是Xcode工程集成Flutter產出模式，Flutter工程集成Xcode工程模式和多團隊協做遠程構建產出集成模式。

Flutter標準工程結構

咱們首先來看標準的iOS Flutter工程結構，其中Flutter工程包含了一個Xcode工程，而Xcode工程依賴於Flutter工程的產出，主要包括App.framework, Flutter.framework, flutter_assets等。

Xcode工程集成Flutter產出模式

基於Xcode工程僅依賴於Flutter工程產出的原理，爲了應對產品快速上線的訴求，咱們在獨立的Flutter工程內開發調試完Dart代碼後，將Flutter編譯產出直接以動態庫方式集成到Now工程。

這種集成方式不會影響現有工程項目的編譯，與現有的開發模式無縫集成。可是因爲Dart代碼開發存儲在本地，不適用於多人協做開發，同時也沒法方便地進行代碼調試。

Flutter工程集成Xcode工程模式

鑑於以上開發模式的缺陷，咱們改變思路以Flutter工程爲主體，將Xcode工程集成到Flutter工程下，同時對主體Xcode目錄進行調整，修正構建腳本參數，使得開發環境可以正常出包。
在這種開發模式下咱們同時支持三種開發方式
1）版本需求只須要修改Native部分，直接打開Xcode項目進行開發
2）版本需求只須要修改Flutter部分，直接使用AndroidStudio打開Flutter工程開發
3）混合調試開發方式，版本需求同時修改Flutter和Native代碼，也要支持Flutter Native斷點調試

咱們以Now直播動態搜索頁獲取Native圖片Url爲例，看下如何進行斷點調試
1）AndroidStudio打開Flutter項目啓動debug，在入口處掛breakpoint

2）Xcode Attach到手機對應的App進程，同時在MessageChannel調用處掛breakpoint
3）Xcode掛住調用入口breakpoint

4）Xcode函數處理完成後回調給Dart

5）Flutter工程收到回調內容並展現
這種集成方式在單獨iOS團隊集成開發來看，是能夠知足需求的，可是不能支持iOS/Android團隊公用Flutter代碼開發的場景。

多團隊協做遠程構建產出模式

爲了凸顯Flutter一份代碼同時支持iOS/Android的優點，咱們最終考慮將Flutter代碼單獨分離出去，由RDM機器自動編譯產出集成提交到指定的Xcode/Android分支目錄的方案。
首先咱們在本地配置具有Flutter環境的編譯機器掛載映射到RDM上，在該機器上啓動定時任務，檢測到SVN有代碼更新則自動啓動編譯，並將產出分別提交到對應的Xcode/Android工程SVN上。咱們在提交的Flutter產出中標記上分支及revision版本信息，以便後期方便地找到對應版本代碼。
SVN代碼庫分三個，Flutter，iOS，Android，分別維護各自的主流與分支版本。

每一個版本需求開發分以下幾種狀況
1）僅涉及到Native代碼
iOS/Android團隊分別拉取Native代碼開發，Flutter產物使用其主幹最新的
2）涉及到Dart代碼
iOS/Android團隊分別拉取Native代碼分支，同時拉取Flutter分支，標記上iOS/Android分支地址信息，開發同時經過SVN定時任務將編譯產出同步到iOS/Android分支

總結

以上是咱們Now直播終端團隊對iOS Flutter混合工程改造的思路和實踐過程，歡迎你們前來探討。Now直播終端團隊致力於爲Flutter生態做出一點本身的貢獻，期待Flutter愈來愈好！