Flutter组件化导入至iOS现有工程中(CocoaPods篇)

Flutter项目实战:方案有三

  • 纯Flutter项目,需要投入大量人力进入到Flutter编程中,且现有原生项目需要完全摒弃
  • Flutter项目混编,暂且不说Flutter所支持的框架,与原生交互的坑也暂时还没有填完,且Flutter一旦更新,需要手动进行更新后重新放入原生项目,对现有原生操作较多,代价较大
  • Flutter项目组件化,iOS通过cocoapods引入,安卓通过aar包引入,对现有原生项目影响不大

也就可以看出最简单的方法就是将Flutter项目进行相对应打包,产生产物分别对应iOS和安卓进行组件化生成,也就完成了Flutter现有项目的开发,同时也不会对现有原生项目产生较大影响的方法是最为可行的。

现新创建一个Flutter项目
新建一个文件夹,用于放置Flutter项目,进入后,运行

flutter create -t module my_flutter

完成后会在文件夹中生成一个my_flutter文件,进入my_flutter文件中,运行

flutter packages get

继续运行

flutter run

如果此时可以显示界面,说明创建Flutter没有问题,这里不做过多赘述,详细可以看 Flutter官网

iOS打包产物

通过以上命令,生成了对应的Flutter项目文件后,我们本需要通过build命令来一步步生成iOS产物,这里通过一个我写的shell脚本来做这些步骤

#前提flutter一定要是app项目: pubspec.yaml里 不要加
#module:
#  androidPackage: com.example.myflutter
#  iosBundleIdentifier: com.example.myFlutter

echo "Clean old build"
find . -d -name "build" | xargs rm -rf
flutter clean

echo "开始获取 packages 插件资源"
flutter packages get

echo "开始构建 release for ios"
flutter build ios 
echo "构建 release 已完成"
echo "开始 处理framework和资源文件"

rm -rf build_for_ios
mkdir build_for_ios

cp -r build/ios/Release-iphoneos/*/*.framework build_for_ios
cp -r .ios/Flutter/App.framework build_for_ios
cp -r .ios/Flutter/engine/Flutter.framework build_for_ios
cp -r .ios/Flutter/FlutterPluginRegistrant/Classes/GeneratedPluginRegistrant.* build_for_ios


#下一步处理 如何自动生成podspec
#下下一步处理 如何自动发布pod

这里声明一下,Flutter在1.2.1版本之后,把flutter_assets文件放入到了App.Framework中,所以这里无需进行相关操作,执行上述脚本,会在同级目录下获得一个文件夹

WX20190522-140655@2x.png

文件夹包含三个产物,即Flutter.framework,App.Framework以及GeneratedPluginRegistrant类文件(用于调用注册Flutter引擎)
生成这几个产物后,iOS的Flutter编译暂时到此为止。

iOS cocoapods私有库制作

一、远程私有索引仓库

1、在github上面创建一个仓库,用来存放索引文件。以后使用CocoaPods查找私有组件也是从这里获取。创建后在本地新建一个文件夹,使用git命令进行相关git的init等操作,不做赘述
2、本地链接远程索引仓库

  • 查看本地仓库
pod repo
WX20190522-141223@2x.png
  • 添加远程索引仓库
pod repo add 仓库名 仓库SSH(HTTPS)地址
  • 验证是否添加成功
pod repo

二、创建一个自定义组件远程代码仓库

1、创建一个文件夹,用来保存要制作的组件代码仓库
2、创建pod的一个git本地仓库,终端cd至该文件夹下
3、创建代码仓库
pod lib create 仓库名
WX20190522-142220@2x.png

会进行几个问题的回答,创建成功后,会自动弹出项目


WX20190522-142327@2x.png

此时再回到之前flutter打包iOS运行脚本后生成的build_for_ios文件夹,开始将产物加入

注意,该步骤关系到pod能否成功install且项目能否运行!!!

WX20190522-142839@2x.png
WX20190522-142844@2x.png

将产物的GeneratedPluginRegistrant类文件放到Classes文件夹内,同时在Classes文件夹同级手动创建一个Frameworks文件夹,将App.framework和Flutter.framework框架放入,然后


WX20190522-143114@2x.png

打开podspec文件


WX20190522-143340@2x.png

配置如图所示,根据自己的仓库地址进行相关配置,然后cd到刚才生成的pod的demo文件夹中,即Example文件夹


WX20190522-143859@2x.png

运行

pod install

后会生成如上图所示,这些文件都放入成功,那么到这一步,Flutter生成的产物就成功导入你的私有库中了,接下来就是pods库的操作

回到放置podspec文件所在目录,关联上你的远程代码仓库,然后进行

git add .
git commit -m '上传代码'
git push

将代码上传后,标记tag

git tag 0.1.0
git push --tags

注意这里的tag要和你的podspec文件中的版本version要一致,podspec离得s.name要和你的文件夹的名字保持一致,否则pod会验证失败

运行

pod spec lint
WX20190522-144459@2x.png

验证成功后如上图所示,我这里使用的是另一个pod私有库,其他验证出来的问题自行百度,这里不做赘述

验证成功后,即可上传到私有库

pod repo push <索引库名> <podspec文件名>

注:如果有警告上传报错可以用下面的方法

pod repo push <索引库名> <podspec文件名> --allow-warnings

到了这一步,如果上传成功,会显示

WX20190522-144759@2x.png

到此cocoapods私有库创建上传完成。

三、创建一个demo工程(即现有的原生工程)

在podfile文件中添加

# 远程私有索引地址(这里就是之前所创建的索引仓库所在的地址)
source 'https://...'
# 公共库索引
source 'https://...'

一定要添加公共库索引,即https://github.com/CocoaPods/Specs.git,因为项目中其他的三方库是通过cocoapods查找,如果不添加,cocoapods通过私有库是找不到你的其他的库的,然后

pod install
WX20190522-145250@2x.png

完成后,调用flutter界面,即可看到你的flutter编写的界面

Have done!

注意:

1、flutter更新1.9版本之后,由于会对Flutter.Framework进行签名,无法编译成功,需要将sdk版本切换为master分支版本,编译成功后,新版本的flutter clean命令会将.ios文件删除,所以脚本中打包时候,flutter clean命令需要去除
2、如果你的工程添加了flutter_boost组件,当前最新版本是1.5.4,如果你升级了flutter,那么就先退回去吧,flutter_boost暂不支持1.8以上的flutter版本,否则无法编译通过
3、由于本人之前未更新flutter1.7.8版本,用的是1.5.4版本,所以此次本人回退至1.7.8版本也着实踩了不少的坑,flutter的release build ios会自动生成armv7,需要去除,否则引入了flutter_boost的同学会打不出release包的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容