背景
目前大多数公司都是已经开发多年的原生或混合开发项目,如果新增模块想要使用flutter进行开发,就需要用到flutter的混合开发。
应公司要求将能重用的flutter plugin放到flutter mudule中,然后将flutter module编译成framework,最后再将编译好的framework,放到原生并做好与原生的通讯及桥接再次封装成原生framework,给用户的原生项目直接使用。
详细步骤分为两步:
1.将flutter module编译成framework
2.将flutter module编译出来的framework,放到原生并逻辑桥接后,再次封装成framework
项目结构说明
1.重用的plugin依赖 -> 网络库plugin
2.网络库plugin依赖 -> 原生封装的网络库framework及其他framwork(没有直接使用flutter的那套网络请求)
一.flutter module编译成framework
//编译命令
/*
output=后面是编译出来的framework存放的地址,可自行存放
*/
//生成三种模式,生成目录见图1
1.flutter build ios-framework --output=some/path/MyApp/Flutter/
//只生成release模式,目录图1去掉debug及profile
2.flutter build ios-framework --no-debug --no-profile --output=./Flutter/
/*
将 Flutter 框架作为一个 CocoaPods 的 podspec 文件分发
其实就是将Flutter.xcframework以pod形式集成
注:可以根据自己需求,生成对应模式
如:flutter build ios-framework --cocoapods --no-release --no-profile --output=./Flutter/
*/
3.flutter build ios-framework --cocoapods --output=some/path/MyApp/Flutter/


温馨提示
如果不知道flutter build ios-framework后面还可增加什么参数,可使用flutter build ios-framework -h进行查看-h其实就是--help,搜索如下图,可指定不生成debug、profile、release,默认是三个都会生成,其他也可自行选择

1.flutter build ios-framework之后,报错如下
意思就是我XX_common.framework的pod配置有错误,但是没有具体报出来,

那就执行让其输入详细报错信息,执行命令后面加-v
flutter build ios-framework --cocoapods --no-release --no-profile --output=./Flutter/ -v
详细报错如下

是因为有些我们原生的网络库framework没有加载

2.将打出来Flutter.podspec及多个xcframework库,引入到原生的封装库中
(1)在Podfile文件中动态引入Flutter.framework,如下图

(2)在原生framework项目引入上个步骤生成的多个xcframework时,
TARGETS->General->Frameworks and Libraries里面全部设置为Embed & Sign ,否则最后编译出来的原生framework会找不到对应的库,最终生成example.framework

(3)原生example.framework编译完成后,将最终的example.framework引入到最终使用的原生项目中,步骤(1)的Podfile配置仍然需要
当你开始调用example.framework并且运行的时候,会发现还是无法找到某个framework库,这是因为example.framework嵌套的静态库不会动态的把依赖的静态库 link 到这个项目,Framework 嵌套与依赖看这里
我们需要手动将这些xcframework链接
TARGETS->General->Frameworks and Libraries


并且根据framework本身的打包设置,来设置Embed,

设置错误会报如下错


到此,所有踩坑过程结束,欢迎大家指正
网友评论