Flutter - 将 Flutter 集成到现有项目（iOS - Framework篇）

本篇文章大幅参考了 caijinglong 大佬的总结文章： 把flutter做为framework添加到已存在的iOS中

用 Flutter 来开发，历来都不多是新开的一个纯 Flutter 项目，很大一部分都是 老项目接入 Flutter 来混编。

在 Flutter 官网 - Adding to an iOS app 这里，官方也给出了一些将 Flutter 集成进入现有 iOS 项目的方法。可是，这些都多多少少的不符合咱们的需求。

1. 从 Flutter Module 提及

想要把 Flutter 集成进现有 iOS 项目，咱们就必须使用 Flutter Module。

那就先用命令建立一个 Flutter Module：flutter create --template module flutter_test_module

Flutter APP 和 Flutter Module 的不一样之处在于 pubspec.yaml 最后一段：

# This section identifies your Flutter project as a module meant for
# embedding in a native host app. These identifiers should _not_ ordinarily
# be changed after generation - they are used to ensure that the tooling can
# maintain consistency when adding or modifying assets and plugins.
# They also do not have any bearing on your native host application's
# identifiers, which may be completely independent or the same as these.
module:
androidX: true
androidPackage: com.example.flutter_test_module
iosBundleIdentifier: com.example.flutterTestModule
复制代码

这一段代码，把该 Flutter 项目标注为一个 module，用于嵌入到原生 app 里。

这里面设置了是否使用 androidx，Android 和 iOS 的 APP id。

2. iOS原生项目所需的文件

先说一下，iOS 原生项目引入 Flutter Module 须要以下 Framework：

1. Flutter.framework
2. App.framework
3. FlutterPluginRegistrant.framework （若是有用到原生的插件 - 非纯 dart 编写）
4. Pods_Runner.framework（若是有用到原生的插件 - 非纯 dart 编写）
5. *.framework（插件的 framework）

下面继续集成。

Flutter Module 建立完成后，先来给 iOS 打个包，命令以下：flutter build ios --release --no-codesign。

而后看一下打包出来的东西，路径为 build->ios->Release-iphoneos：

若是有第三方库的话，这里面应该是有上面说的 三、四、5 的 framework，可是咱们刚建立项目，什么都没有加，因此是没有任何 framework的。

而后去 .ios/Flutter 里找 一、2：

可是咱们写程序不可能什么插件都不用，因此加上一个shared_preferences，再来打包看一下 build 文件夹：

能够看到确实出现了咱们上面说的 三、四、5 framework，这样咱们所需的 framework 所有集齐。

3. 使用 cocoapods + git 来管理

由于 caijinglong 大佬 文章内说：

由于找遍了 podfile 的相关文档, 没有找到能够直接引用 framework 的方式

因此须要一个 pod 库做为"中转”

因此咱们就要 跟着作！

使用命令 pod lib create flutter-lib 来建立一个名为 flutter-lib的私有库。

建立完成以后，打开 flutter-lib.podspec ，在 end 前面加入一行：

接着咱们在该文件夹内建立一个名为 ios_frameworks 的文件夹，把咱们刚才的那么多 framework 全都粘贴过来。

这个时候咱们的iOS原生项目就能够引入本地这个库了：

platform :ios, '8.0'
use_frameworks!

target 'xxx.xxx.xxx' do
   pod 'flutter-lib', :path => 'somepath/flutter-lib'
end
复制代码

固然，咱们不可能都用本地路径来引入，因此咱们把这整个 flutter-lib文件夹传到 git 上，而后这样引用：

platform :ios, '8.0'
use_frameworks!

target 'xxx.xxx.xxx' do
   pod 'flutter-lib', :git => 'http://xxxx.git'
end
复制代码

这样咱们就能够从 git 上来远程引用该私有库了。

若是运行有错误的话，能够去 caijinglong 大佬的博客查看解决办法。

4. 编写脚本自动处理

上面都是手动来处理的，包括打包->移动文件->上传git等。

下面就写一个脚原本处理一下（基于 caijinglong 大佬）：

ios_project_name='xxx'	# 项目名称
ios_out_path='xxx/ios_frameworks'	# 文件输出路径
flutter_git_path='http://xxx/xxx/xxx.git'	# git 项目路径

function customEcho(){
  echo "\033[1;32m$1\033[0m"
}
customEcho '\n1. 执行 flutter clean'
flutter clean || exit -1

customEcho '\n2. 清空build文件夹'
rm -rf $ios_project_name
rm -rf build
echo '清空完成'

customEcho '\n3. 生成 iOS frameworks'
flutter build ios --release --no-codesign || exit -1 

customEcho "\n4. 从 git 上克隆 frameworks 项目"
git clone $flutter_git_path  || exit -1 

customEcho "\n5. 输出文件到 $ios_out_path"
rm -rf $ios_out_path
mkdir $ios_out_path


cp -r build/ios/Release-iphoneos/*/*.framework $ios_out_path
cp -r .ios/Flutter/App.framework $ios_out_path
# cp -r .ios/Flutter/engine/Flutter.framework $out
echo '输出完成'

customEcho "\n6. 提交文件到 git"
cd $ios_project_name
git add .
git commit -m 'update lib'
git push -u origin master


customEcho "\n7. 删除该文件夹"
cd ..
rm -rf $ios_project_name

customEcho "\nAll Done."
复制代码

解释就不用解释了，上面的输出都有写。

这里有一点，就是 Flutter.framework 超级大，有四五百兆，咱们把它单独放在了一个 pod 里，而剩下的一些每次新增插件或变动代码都会跟着变更，因此他们是一个单独的 pod。

也就是说，该 Flutter Module 一共有三个 git 仓库：

1. Flutter Module 项目的仓库（编写代码等）
2. Flutter Module 打包出来的 frameworks（不包含 Flutter.framework）
3. Flutter.framework 仓库

这样的好处就是在咱们编写完代码，运行 sh 文件的时候，不用去下载一个四五百兆的 flutter 引擎，脚本速度提高很快，而且其余的 iOS 项目也能够引用。

接着改一下 flutter-lib.podspec 文件，

把这一行改为以下：

p = Dir::open("ios_frameworks")
arr = Array.new
p.each do |f|
  if f == '.' || f == '..'
  else
    arr.push('ios_frameworks/'+f)
  end
end
s.ios.vendored_frameworks = arr
复制代码

这样就完成了引入全部的 frameworks。

5. 总结

到这里 Flutter Module 就彻底引入到了现有的 iOS 工程中，关于如何运行代码，能够去官方文档 - Adding a Flutter screen to an iOS app 中查找。

这样集成的方案，感受是目前最方便的了。（若有更佳方案，烦请告知）

Flutter 端写完代码直接运行 ./build_module.sh 就能够了。

iOS 端直接 pod install，超级简单。

若有缺陷，但愿你们提出，共同窗习！🤝