Now直播iOS Flutter混合工程实践

9,995 阅读3分钟

作者:腾讯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工程。

这种集成方式不会影响现有工程项目的编译,与现有的开发模式无缝集成。但是由于Dart代码开发存储在本地,不适用于多人协作开发,同时也无法方便地进行代码调试。

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

2)Xcode Attach到手机对应的App进程,同时在MessageChannel调用处挂breakpoint
3)Xcode挂住调用入口breakpoint
4)Xcode函数处理完成后回调给Dart

5)Flutter工程收到回调内容并展示
这种集成方式在单独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越来越好!