作者:腾讯NOW直播 - mirageqliu(刘强)
前言
腾讯Now直播iOS App在近期版本嵌入了Flutter功能开发模块,本文旨在讨论我们Now直播终端团队对iOS Flutter混合开发模式的一些思路和实践,欢迎大家探讨。整体来看团队经历了三个混编开发模式阶段,分别是Xcode工程集成Flutter产出模式,Flutter工程集成Xcode工程模式和多团队协作远程构建产出集成模式。
Flutter标准工程结构
我们首先来看标准的iOS Flutter工程结构,其中Flutter工程包含了一个Xcode工程,而Xcode工程依赖于Flutter工程的产出,主要包括App.framework, Flutter.framework, flutter_assets等。

Xcode工程集成Flutter产出模式
基于Xcode工程仅依赖于Flutter工程产出的原理,为了应对产品快速上线的诉求,我们在独立的Flutter工程内开发调试完Dart代码后,将Flutter编译产出直接以动态库方式集成到Now工程。


Flutter工程集成Xcode工程模式
鉴于以上开发模式的缺陷,我们改变思路以Flutter工程为主体,将Xcode工程集成到Flutter工程下,同时对主体Xcode目录进行调整,修正构建脚本参数,使得开发环境能够正常出包。
在这种开发模式下我们同时支持三种开发方式
1)版本需求只需要修改Native部分,直接打开Xcode项目进行开发
2)版本需求只需要修改Flutter部分,直接使用AndroidStudio打开Flutter工程开发
3)混合调试开发方式,版本需求同时修改Flutter和Native代码,也要支持Flutter Native断点调试
我们以Now直播动态搜索页获取Native图片Url为例,看下如何进行断点调试
1)AndroidStudio打开Flutter项目启动debug,在入口处挂breakpoint

3)Xcode挂住调用入口breakpoint


这种集成方式在单独iOS团队集成开发来看,是可以满足需求的,但是不能支持iOS/Android团队公用Flutter代码开发的场景。
多团队协作远程构建产出模式
为了凸显Flutter一份代码同时支持iOS/Android的优势,我们最终考虑将Flutter代码单独分离出去,由RDM机器自动编译产出集成提交到指定的Xcode/Android分支目录的方案。
首先我们在本地配置具备Flutter环境的编译机器挂载映射到RDM上,在该机器上启动定时任务,检测到SVN有代码更新则自动启动编译,并将产出分别提交到对应的Xcode/Android工程SVN上。我们在提交的Flutter产出中标记上分支及revision版本信息,以便后期方便地找到对应版本代码。
SVN代码库分三个,Flutter,iOS,Android,分别维护各自的主流与分支版本。

每个版本需求开发分如下几种情况
1)仅涉及到Native代码
iOS/Android团队分别拉取Native代码开发,Flutter产物使用其主干最新的
2)涉及到Dart代码
iOS/Android团队分别拉取Native代码分支,同时拉取Flutter分支,标记上iOS/Android分支地址信息,开发同时通过SVN定时任务将编译产出同步到iOS/Android分支
总结
以上是我们Now直播终端团队对iOS Flutter混合工程改造的思路和实践过程,欢迎大家前来探讨。Now直播终端团队致力于为Flutter生态作出一点自己的贡献,期待Flutter越来越好!