Flutter混编之路——开发集成(iOS篇)

混编的模式下,需要兼顾现有工程的开发、集成、架构等问题,例如,我们的代码里有Swift、有OC、有必须Bitcode的三方framework,这些会影响最终的集成方案。多人协作的项目中,还需要考虑开发人员对Flutter(任何其他语言也一样)的学习成本和迁移过程。

零、SDK版本选择

Flutter官方文档中提供了下载Flutter SDK的地址。但考虑到Flutter的升级频率相比某些跨平台方案来说要高一些,而且整体质量和团队投入度比较高,从而保证了可用性,因此,如果你希望以后方便升级Flutter SDK,那还是建议使用clone Github源码的方式。注意:官方建议使用Beta分支来做开发环境(master是日常开发环境,不保证稳定性)。一般而言,Beta环境最新代码默认会带某个版本号的Tag,如果没有,切换到最新的一个Tag上。

一、开发方式

相信大部分团队在做Flutter混编的项目时,一定是少部分人做Flutter开发,同时另一部分同学还是只做Native开发的,随着大家对Flutter的熟悉程度加深,再一步步转过来。在这过程中,Native开发同学需要对Flutter的开发环境、SDK及版本、Dart代码等无感,这就要求我们必须有“源码”和“产物”两套开发方式。

二、集成方案

工具选择方面,大部分基于Objective-C开发的iOS应用,都是用CocoaPods做组件管理工具的。如果是纯Swift,还可能是Cathage。

我们的项目是OC与Swift混编的,由于App体积并不大,当初选择用CocoaPods把依赖库以Framework形式集成,对App的启动速度影响并不明显。在Flutter混编中,选择基于CocoaPods(1.5.0+)的组件集成方案。

基于不同开发方式,我们需要提供快速切换的方式,对开发者来说,最好是不需要操作,简单的一步操作次之。由于是以组件形式依赖的,我们可以通过修改Podfile的变量,快速切换Pod命令,然后执行Pod install:

Flutter source code的两行代码是要读取并执行flutter工程(非SDK)的文件夹中的脚本,它是flutter自动生成的,我们做了一点修改。其主要是根据环境选择相应的SDK物料,将其放到Podfile中集成。后面我们会分析这个文件中的代码。

三、源码集成

在上述“集成方案”中的图片中可以看到,源码集成中用到了podhelp.rb。

这个ruby脚本中其实代码就这20行,主要就是把SDK文件夹中的Flutter.framework和Plugin相关的Pod集成进来。

四、Flutter产物集成

编译时用到了xcode_backend.sh,我们剖析下:


上图就是 Release.podspec 中做的唯一的事情——把他们打成一个包,集成进主工程。


这个图就是集成后的FlutterModule(前面说过,我们的工程中使用的是".framework",你的可以是".a"),其中:

App是我们自己写的Dart代码(名字就是App,别怀疑  :));

Flutter是SDK的产物;

FlutterPluginRegistrant是注册模块,如果你的Flutter项目中引用了Plugin,就会有这个产物。

hybrid_stack_manager是阿里闲鱼团队开发的 页面堆栈管理 模块,(在这里做个广告,康哥在我们开发过程中给了不少建议和帮助)。

tbridge是我们自己写的一个Plugin

Resources里面的flutter_assets是一个资源文件容器,Debug模式下如图。(Release模式下只有前三个和LICENSE,其他的几个都被打入了App中)

文件作用解释:(引用自https://www.jianshu.com/p/f44db0d088e5)

isolate_snapshot_data:用于加速 isolate 启动,业务无关代码,固定,仅和 flutter engine 版本有关;

vm_snapshot_data: 用于加速 Dart VM 启动的产物,业务无关代码,仅和 flutter engine 版本有关;

platform.dill:和 Dart VM 相关的 kernel 代码,仅和 Dart 版本以及 engine 编译版本有关。固定,业务无关代码;

kernel_blob.bin:业务代码产物


那么,这些产物怎么生成的呢?

答案是,从flutter工程中编译Run工程,或者用Flutter build命令生成,然后手动copy到主工程的。

首先,如果在yaml中加了plugin,就需要在命令行中执行flutter package get,flutter会在ios文件夹中自动生成podfile文件,执行了pod install后,打开Run.xcworkspace 在Run工程的Build Phases中,Run Script中已经加入了

/bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build 这行命令,每次编译之前都会运行这个shell脚本,我们来看看它都做了些什么。

1. 根据编译环境(FLUTTER_BUILD_MODE)选择相应的SDK framework(在踩坑记录里有提到),拷贝到Flutter文件夹里


2. 根据debug/release来选择 执行flutter build aot 命令还是运行clang


3. 再次,执行 flutter build bundle,生成相应的文件。


4. 这时候,我们在本地的DerivedData文件中就可以找到相应的产物了,例如 yaml中的plugin等。


此时,再次编译整个Run工程,就可以以上述产物为依赖进行整个工程的编译链接了。

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

推荐阅读更多精彩内容