Flutter 存量iOS应用接入Flutter
我喜欢回顾，是因为我不喜欢忘记。我总认为，在世间，有些人、有些事、有些时刻似乎都有一种特定的安排，在当时也许不觉得，但是在以后回想起来，却都有一种深意。我有过许多美丽的时刻，实在舍不得将它们忘记。
前言
本篇文章基于上一篇博文：Flutter build ios产物分析
由于目前Flutter处于新生阶段，因此如果要使用，应该是逐步演进的过程，即Native逐步集成Flutter，并完成逐步的Flutter化。
Debug集成方案
Flutter提供的官方接入方案：Add Flutter to existing apps，值得一提的是官方在Flutter 1.12上提供了Android Studio直接接入Flutter的方案。
- Debug集成方案便于调试，直接可以源码级别调试和开发，方便查问题。（Flutter插件同理）
Native依赖Flutter分析
根据上一章节的内容可知，Native依赖Flutter的最核心内容就是依赖Flutter Engine(Flutter.framework)、解析并依赖Flutter插件、以及依赖Flutter的业务层代码(App.framework)。
Native Pod Install Flutter
因此，在Native工程中直接开发、调试Flutter插件的配置流程为：
- 分析
Generated.xcconfig获取FLUTTER_ROOT - 依赖Flutter Engine
- 依赖Flutter业务代码
- 依赖Flutter插件注册库
- 依赖Flutter插件
- 设置Bitcode为false
因此，Native工程依赖Flutter的podhelper.rb将要包含以上的部分。
接入流程
修改xcode_backend.sh
在Flutter 1.9.1版本中，需要修改这个脚本。其他版本暂时不清楚。
vim $FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh
--- a/packages/flutter_tools/bin/xcode_backend.sh
+++ b/packages/flutter_tools/bin/xcode_backend.sh
@@ -141,7 +141,7 @@ BuildApp() {
mkdir "${derived_dir}/engine"
RunCommand cp -r -- "${flutter_podspec}" "${derived_dir}/engine"
RunCommand cp -r -- "${flutter_framework}" "${derived_dir}/engine"
- RunCommand find "${derived_dir}/engine/Flutter.framework" -type f -exec chmod a-w "{}" \;
+ RunCommand find "${derived_dir}/engine/Flutter.framework" -type f -iname '.h' -exec chmod a-w "{}" \;
else
RunCommand rm -rf -- "${derived_dir}/Flutter.framework"
RunCommand cp -r -- "${flutter_framework}" "${derived_dir}"
工程层级结构
- 要确保Flutter工程(app)和Native工程(Android、iOS)在同级目录下。
➜ temp tree -L 1
.
├── Android
├── flutter_module
└── iOS
3 directories, 0 files
修改iOS/Podfile
在ios/Podfile中使用app/flutter_podhelper.rb：
# 配置Flutter Module的目录
flutter_application_path = '../flutter_module'
# 加载.ios/Flutter/podhelper.rb来注入依赖
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'MyApp' do
# 依赖注入：Flutter引擎、Flutter业务代码、Flutter插件依赖
install_all_flutter_pods(flutter_application_path)
end
- 如果不懂
install_all_flutter_pods(flutter_application_path)，详见上一篇文章Flutter build ios产物分析。
编译Flutter产物
在app目录下执行增加以下build.sh：
# !/bin/sh
# 当前目录为app
echo "当前路径为：`pwd`"
# 先清除.ios和.android
flutter clean
# 拉包
flutter pub get
flutter packages get
# 安装依赖
cd .ios # 从当前目录为app进入.ios
# 插件依赖
pod install --verbose --no-repo-update
cd ../ # 从当前目录为app/.ios退出
# 编译
flutter build ios
然后在flutter_module目录下，执行./build.sh，等待编译产物成功。
➜ flutter_module flutter build ios
Building com.wtfexample.flutterModule for device (ios-release)...
Found saved certificate choice "Apple Development: [email protected] (xxxxxxxx)". To clear, use
"flutter config".
Signing iOS app for device deployment using developer identity: "Apple Development:
[email protected] (xxxxxxxx)"
Running Xcode build...
├─Building Dart code... 20.0s
├─Generating dSYM file... 0.3s
├─Stripping debug symbols... 0.0s
├─Assembling Flutter resources... 0.7s
└─Compiling, linking and signing... 3.9s
Xcode build done. 29.6s
Built /Users/.../flutter_module/build/ios/iphoneos/Runner.app.
依赖产物
在iOS工程执行pod install --verbose --no-repo-update即可完成依赖注入。
Native与Flutter互调
- 这里可以看看官方的实现：Add Flutter to existing apps
- 也推荐使用闲鱼推出的flutter_boost方案
Release集成方案
Release依赖的方案基于Debug集成方案，只需要将Flutter的引擎、Flutter业务层代码、FlutterPluginRegistrant、Flutter插件及其依赖编译成静态库，通过pod集成即可。
pod 'Flutter', :git => GitPath, :tag => GitTag
pod 'FlutterApp', :git => GitPath, :tag => GitTag
pod 'FlutterPluginRegistrant', :git => GitPath,:tag => GitTag
| 模块 | 说明 |
|---|---|
| Flutter | Flutter引擎 |
| FlutterApp | Flutter业务层代码及其资源文件 |
| FlutterPluginRegistrant | Flutter插件注册制，包含了Flutter插件 |
- 更多请见这篇文章Flutter CI脚本制作分析，如何制作iOS端的Flutter产物方案。
- 该脚本说明了如何制作这些静态库的方案，后续仅仅需要将静态库上传到Podspec等的静态产物托管平台即可。
附录
- Ruby 中的 eval 与 binding
- 闲鱼flutter混合工程持续集成的最佳实践
- Flutter iOS 混合工程自动化