Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

背景

此篇文章，主要針對想要在原有Native工程的基礎上集成Flutter的需求，所提供的混編方案的探討。

1. 官方方案的優缺點

（1）優勢：

不須要每次 Run 起來以後，先進行 同步flutter代碼（組件化Flutter後，由於組件化後flutter代碼已經變爲framework，因此每次進來須要先熱更新同步代碼） 不須要單獨搞一個組件進行集成，管理組件的版本，發佈等。 （2）缺點：

會很是耦合工程，須要修改工程配置，添加 BUILD PHASE 調用 flutter 中 xcode_backend.sh 腳本 去編譯 Flutter。 若是使用pod管理，那麼還需修改xcconfig配置。 由於須要調用 Flutter 的編譯腳本，因此這種方式集成後，團隊內全部組員電腦和打包機，都必須安裝Flutter環境才能編譯成功。 2. Flutter 組件化混編方案

（1）優勢：

不需修改 原有 xcconfig 配置。 不須要添加 Run Script 腳本。 運行不須要依賴 Flutter 環境。 （2）缺點

須要單獨管理一個 flutter私有索引庫。 開發加載 Flutter 頁面 首次須要熱更新 進行刷新同步 Flutter 代碼。 （3）混編方案 實現核心思想

經過查看 Flutter 編譯腳本xcode_backend.sh 和 測試單獨引入編譯產物，發現其實 只要擁有 Flutter 的編譯產物，項目就能夠接入 Flutter 的功能。 因此說只要把Flutter編譯好的產物，放在工程裏，那麼就無需配置每次調用 xcode_backend.sh 腳本，也無需強耦合Flutter環境，不須要全部組員安裝Flutter環境，只須要有發佈開發需求的同窗進行安裝便可。 這就是Flutter組件化的實現核心點。 （4）Flutter 核心編譯產物

App.framework：dart業務源碼相關文件，在 Debug 模式下就是一個很小的空殼，在 Release 模式下包含所有業務邏輯。 flutter_assets：Flutter依賴的靜態資源，如字體，圖片等。 Flutter.framework：Flutter庫和引擎。 目錄

Flutter組件化 - 混編方案 Flutter組件化 - 斷點調試 Flutter組件化 - 發佈更新 Flutter組件化 - 一些坑點 1、Flutter組件化 - 混編方案

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

1. Git倉庫存放 - 示例說明

主要分爲3個倉庫，分別存放Native項目、Flutter 工程源碼、Flutter 編譯產物私有pod庫。

flutter 工程建立，使用 flutter create -t module my_flutter 命令

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

2. 項目目錄 - 示例

Flutter_iOS ：iOS開發主項目。 flutter_library ：Flutter 項目的開發源碼。 FlutterSDK ：Flutter 源碼的編譯產物，所構建的私有 pod 庫。 Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

3. 混編方案說明

根據 只要擁有 Flutter 的編譯產物，項目就能夠接入 Flutter 的功能 的核心思想，咱們若是進行組件化Flutter混編，那麼大概思路是： 有組件化環境 - 混編方案說明

（1）在 flutter 項目目錄下，執行 flutter build ios 針對 Flutter 項目進行編譯打包，生成 Flutter 編譯產物。

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

Flutter 的產物分爲兩種模式，一個是 Debug 模式，採用 JIT（Just In Time）的方式，好處是能夠支持熱更新，方便調試,，可是性能比較慢。

另外一種是 AOT（Ahead Of Time）release 模式，好處是性能比較好。

經過 flutter build ios --debug 可打包出 Debug 下的 Flutter 編譯產物。

flutter build ios 命令依賴於 Flutter 生成的 Runner 工程，因此要確保 Runner 工程可以編譯成功，這樣才能生成 flutter 編譯產物。若是遇到編譯失敗，能夠檢查下 bundle id 修改一下，使用本身的證書。以下圖示例：

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

（2）針對編譯產物，製做 Flutter SDK 私有庫， podspec 指定 App.framework、engine、flutter_assets 路徑。

podspec 有省略

Pod::Spec.new do |s| s.name = "FlutterSDK" s.vendored_frameworks = 'Framework/.framework', 'Framework/engine/.framework' s.resources = 'Framework/flutter_assets' end （3）上傳 Flutter SDK 私有庫項目到雲端私有pod索引庫。（如何製做私有 pod 索引庫，可搜索查看相關資料，這裏不細說了）

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

（4）iOS 主項目指定 Podfile ，拉取雲端Flutter私有庫到本地。

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

沒有組件化環境 - 混編方案說明

沒有組件化環境的項目，而且不會創建私有索引庫。 那麼只有手動 執行 flutter build ios 命令後，將編譯產物手動拖拽到iOS項目中。 4. 最後效果

以下圖，能夠看到最終工程只引用了一個私有 pod 庫。

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

總結

對 flutter 項目執行 flutter build ios 命令，生成編譯產物。 針對編譯產物，製做爲私有 pod 庫。 主工程經過 cocoapods 引入私有 pod 庫。 2、Flutter 組件化 - 斷點調試

由於是編譯後的資源接入，咱們還須要保證 Flutter 開發的同窗能夠正常調試。

目錄

單獨運行 Flutter 工程調試 同時調試 iOS 和 Flutter（不支持斷點） 同時調試 iOS 和 Flutter（支持斷點） 注意點：

確保，已經安裝 Android Studio（用於打開 Flutter 工程） 確保，項目中依賴的 Flutter 打包出來的是 Debug 版本，Release 版本是沒法熱更新和調試的（使用 flutter build ios --debug 打包 debug 版本）

1. 單獨運行 Flutter 工程調試 （只適合和 Native 沒有太多關聯的工程，比較少用）

使用 Android Studio 打開 Flutter 工程目錄

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

選擇好真機或者模擬器，而後點擊 Run 按鈕

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

這樣 Run 起來後，咱們就能夠在 Flutter 項目中打斷點調試。這種方法 只適合和 Native 沒有關聯的工程，比較少用。

2. 同時調試 iOS 和 Flutter（不支持Flutter斷點的方式）

這種方法，須要先打開 Xcode 運行到 Flutter 頁面，再進行附加 Flutter 端口號。

使用 Xcode 打開 iOS 項目，運行起 Flutter 頁面。 Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

會發現會輸出一行日誌，其中有一個端口號咱們記錄下來，例如： flutter: Observatory listening on http://127.0.0.1:60455/ 而後 使用 Android Studio 打開 Flutter 項目（不點擊運行），在 底部的 終端框中輸入 flutter attach --debug-port=60455，端口號替換爲xcode 日誌輸出的端口號。 Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

Gif 演示

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

總結

先打開 iOS 工程，運行起 Flutter 頁面，獲得一個日誌輸出的端口號。 而後 Android Studio 打開 Flutter 工程，在底部終端處輸入 flutter attach --debug-port=日誌輸出端口號，而後附加成功便可。 注意點：附加成功後，在終端處，按小寫 r 只會刷新有有修改的文件，按大寫的 R 會所有刷新，若是使用組件化的話，每次進入 Flutter 頁面，Android Studio 附加成功後，都要先按大寫 R 所有刷新一次 同步到最新代碼。不然還會顯示舊的頁面。 3. 同時調試 iOS 和 Flutter（同時支持Flutter 和 Xcode斷點的方式）

這種方法，須要先打開 Android Studio 選擇 Attach Debugger to Android Process 等待 Flutter 頁面鏈接，而後在 iOS 端，運行到 Flutter 頁面，Android Studio 就會附加成功。

首先打開 Flutter 工程，直接點擊 Attach Debugger to Android Process，而後會等待 Flutter 頁面鏈接。 Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

而後運行 iOS 工程，進入 Flutter 頁面。 而後就會發現 Android Studio 已經顯示在 同步文件了（Syncing files to device 張大森的 iPhone...） 同步完成即鏈接成功。 Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

注意坑點

咱們能夠看到 閃電符號 Flutter Hot Reload 和 返回綠色符號 Flutter Hot Restart Flutter Hot Reload 爲局部刷新，好比某個文件有改動，纔會同步刷新此頁面。Flutter Hot Restart能夠理解爲所有刷新，在 Android Studio 面板上也有對應按鈕，相應也有對應快捷鍵。 按照 Flutter 組件化的開發方式，咱們首次附加鏈接成功後，必定要遵循一個步驟，先 點擊 Flutter Hot Restart 進行所有刷新，再點擊 Flutter Hot Reload 局部刷新。由於本人發現，若是最後一次刷新點擊的是 Flutter Hot Restart 按鈕，那麼發現斷點會不生效，只有點擊 Flutter Hot Reload 後 觸發的斷點纔會生效。 Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學 Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學 演示 Gif

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

打斷點.gif 總結

Android Studio 打開 Flutter 工程 ，點擊 Attach Debugger to Android Process 而後運行 Flutter 頁面。 而後點擊Flutter Hot Restart （同步最新 Flutter 代碼），在點擊 Flutter Hot Reload 確保斷點可以生效。 3、Flutter組件化 - 發佈更新

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學 發佈大概流程

（1）對 Flutter 工程 執行 flutter build ios 或 flutter build ios --debug 生成編譯產物。

（2）把編譯產物複製移動到 Flutter 私有庫目錄下。

（3）打包 上傳更新私有庫內容。

（4）主工程拉取最新版本。

版本更新說明

開發期間：基本只用熱更新進行開發代碼。 發佈版本：通常可在上線前進行發佈，因此組件版本更新，用的比較少。 4、一些坑點

（1）FlutterViewController 不釋放

Flutter 開發集合系列之優雅的 Flutter 組件化 混編方案大神必學

加載 Flutter 頁面後，返回後，VC 不會釋放。閒魚有大神研究過這個問題，不過目前咱們沒有找到解決方案去釋放 VC。 咱們使用單例持有了 VC，只能作到不每次進行疊加內存，不從新建立。每次進入 Flutter 頁面都先重置一下。

（1）不支持x86_64

能夠用xcode跑下，生成App.framewok，而後 lipo 命令合併下。 咱們目前不支持模擬器，這種方案沒有進行測試。 其它

若是有更好的調試方法，坑點解決方法，混編方法，歡迎交流反饋下。 下一篇文章 （主要涉及到 Flutter 開發的一些知識）

教你 Flutter 如何與原生進行交互 待更新 最近有不少粉絲反映怎麼學好java？ java開發技術不是一兩天就能學好的關鍵是你看怎麼學 跟誰去學，俗話說的好師傅領進門，修行靠我的，這個不是短期類所能完成的任務，有想法的上方關注，下方留言「學習」我教你！