最近有空在看Flutter相关的内容,由于开发时主要以原生为主,所以了解了一下Flutter集成到原生项目中的几种方案。
1、官网介绍的以module形式集成 查看详情 (此方式对原生项目的入侵性较大)
2、将Flutter的编译产物作为三方库,使用cocoapods的方式引入 (这里主要介绍这种)
一、先创建一个Flutter application项目,项目名叫learn_widget (使用VSCode编译器)
在Flutter项目中,使用dart代码中,编写UI布局视图。
二、编译Flutter工程
终端执行
//进入到项目的根目录下
cd xx/xx/learn_widget
//清理flutter历史编译
flutter clean
//重新生成plugin索引
flutter packages get
//生成App.framework和flutter_assets
flutter build ios --release
项目编译完成之后会生成以下文件:
Resources文件夹是手动创建的,创建完成之后将flutter_assets资源文件夹放到里面。(这样做方便后续配置cocoapods的podspec文件)
注意:这里还需要到Flutter项目根目录/build/flutter_assets/kernel_blob.bin 文件拷贝到刚刚编译生成的flutter_assets文件夹下,必须要项目运行过,才会生成此文件。kernel_blob.bin是Flutter引擎的底层接口和Dart语言基本功能部分代码
三、使用cocoapods导入Flutter编译内容到原生项目
创建一个文件夹remoteContentFile ,将上面的编译内容App.framework、Flutter.framework、AppFrameworkInfo.plist等放到文件夹中,在终端cd到此目录中执行
//sdkName为你的远程sdk名字
pod spec create sdkName
然后在文件中找到sdkName.podspec文件,修改以下配置项
//这个文件是必须的,配置的是AppFrameworkInfo.plist
s.source_files = "**/*.plist"
//这里配置的是将flutter_assets文件夹作为资源文件
s.resources = "Resources/**"
//这是framework库
s.ios.vendored_frameworks = "**/App.framework", "**/Flutter.framework"
由于我操作的是将文件放到本地,所以Podfile文件中写的是
pod 'Model', :path => '/Users/xxx/Desktop/remoteContentFile'
这里如果将文件上传到cocoapods的话,可以利用版本号管理。配置完成后,执行
pod install
至此,就可以在原生代码中导入头文件,调用Flutter中的视图了
#import <Flutter/Flutter.h>
四、检查framework支持的架构
在终端进入到remoteContentFile文件夹中,执行
cd cd /Users/xx/Desktop/remoteContentFile/Flutter.framework
lipo -info Flutter
//结果输出
Flutter are: x86_64 armv7 arm64
表示当前framework支持5s及以上设备的模拟器
armv7 arm64 表示支持32位和64位真机
五、后续更新
每次在Flutter项目开发完一个阶段时,直接release编译,将remoteContentFile文件中的内容替换掉即可,如果是发布在远程仓库的,更新下远程仓库,重新pod install即可。
目前已使用此方式集成到原生项目,成功打包了Enterprise企业证书安装包,并在真机上安装并使用。(打包时需要关闭bitcode选项)
参考链接
闲鱼Flutter混合工程持续集成的最佳实践
深入理解flutter的编译原理与优化
Flutter原理与美团的实践
Flutter混合开发组件化与工程化架构