iOS 開發之仿鹹魚初期在老項目引入集成 Flutter【生產中不建議採用此方案】

 

【Flutter 環境配置傳送門】

 

1、在工程目錄執行如下命令引入 flutter 配置

flutter create -t module flutter_module

補充:添加 flutter 依賴庫流程:

cd flutter_module

vim pubspec.yaml // (編輯 pubspec.yaml(類似於iOS Podfile) 添加需要引入的庫,例如官方Demo中的 english_words: ^3.1.0)

flutter packages get // 更新配置

之後工程結構大致如下,紅框內的文件是需要在第四步中引入到Xcode內的產物。

2、Xcode內添加對應 XX.xcconfig 文件

(爲的是引入對應 xcode_backend.sh 腳本的環境變量)

release.xcconfig

#include "flutter.xcconfig"

FLUTTER_BUILD_MODE=release

// 如果使用了POD,需要將pod的配置再次引入

#include "Pods/Target Support Files/Pods-flutter_sdk_test/Pods-flutter_sdk_test.release.xcconfig"

debug..xcconfig

#include "flutter.xcconfig"

// 如果使用了POD,需要將pod的配置再次引入

#include "Pods/Target Support Files/Pods-flutter_sdk_test/Pods-flutter_sdk_test.debug.xcconfig"

flutter.xcconfig

#include "./flutter_module/.ios/Flutter/Generated.xcconfig"

ENABLE_BITCODE=NO

備註:Generated.xcconfig內容(在執行完第一步的命令後會自動生成):

// This is a generated file; do not edit or check into version control.

FLUTTER_ROOT=/Users/yaheng/.flutterLib

FLUTTER_APPLICATION_PATH=/Users/yaheng/mySelf/Flutter/my_demo/flutter_sdk_test/flutter_module

FLUTTER_TARGET=/Users/yaheng/mySelf/Flutter/my_demo/flutter_sdk_test/flutter_module/lib/main.dart

FLUTTER_BUILD_DIR=build

SYMROOT=${SOURCE_ROOT}/../build/ios

FLUTTER_BUILD_NAME=1.0.0

FLUTTER_BUILD_NUMBER=1

Xcode 工程內修改編譯配置如下

3、在iOS工程裏添加運行腳本 Build Phases(創建Run Scrip)

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build

並且確保 Run Script 這一行在 "Target dependencies" 以及 "Check Pods Manifest.lock" 之後。

4、添加flutter產物引用

4.1、Framework * 2

  1. 在 Embedded Binaries 內點擊 + 號添加
  2. 點擊 Add Other...
  3. 進入 flutter_module/.ios/Flutter/ (看不到 .ios 隱藏文件可在該文件夾內同時按住 shift+command+. 開啓顯示)
  4. 選中 App.framework
  5. 注意引用形式選擇 Create folder references
  6. flutter_module/.ios/Flutter/engine/Flutter.framework 的引用重複步驟1~5

4.2、assets

  1. Xcode項目內添加資源引用
  2. flutter_module/.ios/Flutter/flutter_assets
  3. 注意引用形式選擇 Create folder references

如若找不到上述的三個文件,可在添加完步驟三之後,CMD + R 先運行一下工程,便於對應文件的生成。

最終的文件引用形式示例:

 

5、編寫 Flutter 代碼 flutter_module/lib/main.dart ,使用 Xcode 運行後即可查看效果。

最簡加載 Flutter 界面代碼示例:

#import <Flutter/Flutter.h>

FlutterViewController *viewController = [FlutterViewController new];

[self.navigationController pushViewController:viewController animated:YES];

寫在最後:

已有項目集成 Flutter 就先討論到這,但是這麼集成, Flitter 的工程代碼是耦合進 Xcode 原工程內的,不過大家可以先通過這個集成邏輯大概瞭解到整體的流程,之後我們繼續討論如何隔離並同時集成進安卓項目中^_^~

注意:flutter_assets 文件內引入的資源在上線之前注意要仔細覈實一遍是否有不需要的文件。

PS鎮樓圖 儘量不要像先驅【鹹魚】一樣莫名的將一張 130KB 的測試圖隨包發版上線...

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章