Flutter开发之《网易新闻客户端Flutter混合开发实践》笔记(52)

摘自:网易新闻客户端Flutter混合开发实践

引言
网易新闻项目本身很庞大,业务繁多,全部改为Flutter实现肯定是不现实的,在使用Flutter的前期阶段,我们挑选了相对独立的几个模块,在现有工程的基础上对其进行Flutter改造,以循序渐进的改造方式保证项目稳健,下面以Android为例,从以下几个方面介绍下此混合开发实践过程:

Flutter集成方式

如上介绍说明,开发者可以使用Flutter开始一个全新的应用,也可以把Flutter作为应用的一个module,把这个module引入到现有的工程中,因此有如下图的两种接入方式:
在这里插入图片描述
网易新闻采用上图右所示的方式,以现有工程为主端的Flutter Module的方式集成到现有工程中去,具体集成方法可参考https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps,开发者在lib文件下使用Dart语言编写相应的业务代码。

混合栈及路由

以module的方式接入Flutter, 对于要改造的模块或者页面,在Activity或Fragment的onCreateView中创建FlutterView,Activity或者Fragment为FlutterView的一个容器;另Flutter的framework层提供的navigator管理控制Flutter内部的页面, 如下图中pageWidgetC1,C2,C3的都为Dart实现的flutter页面,而它们是处在同一个Activity中的,因此就有了混合栈的问题(原生栈和Flutter内部栈同时存在)。
在这里插入图片描述

对于混合栈路由的处理,如下图左所示,一个Activity里有多个Flutter页面,Flutter之间的跳转切换由Flutter内部栈管理,不过相应的对于页面跳转动画,手势右滑跟随退出等效果也要同原生端效果再实现一套,且需要同Android,iOS原生端现有的保持一致性,但Android,iOS两端现有的本来就是不一致的,因此就有了如下右图所示的第二个方案,一个Activitiy对应一个Flutter页面,路由由原生维护一套,Flutter页面之间的跳转其实是Native的跳转,比如Flutter page1跳转Flutter Page2,需要page1通过约定的消息协议通知到Native,Native收到跳转Flutter页面的协议后会再开启一个承载FlutterView的Activity来绘制Flutter page2页面,但该方案对于跳转层级比较深的页面,多个FlutterView实例对于性能有一定的损耗,因为每个flutterView的底层对应一个engine, 且页面比较隔离,对于数据同步问题要通过native获取,当然对于第一个方案混合路由来说,在原生页面和Flutter页面交替出现的场景下,也同样会存在这些问题。

在这里插入图片描述
这两种方案都是可选的,但都不是最优方案,Flutter设计的初衷应该是多以新的纯的Flutter工程为出发点来支持跨平台开发的,对于在现有工程改造的混合开发没有很好的支持,具体采用哪种方案,根据自己项目情况来定,或者更改Flutter的engine来优化内存和数据同步等问题。
网易新闻因为前期选取的改造模块比较独立,一个模块对应一个Activtiy, 该Activtiy里有多个Flutter页面,对于跳转动画,手势右滑跟随退出等效果同Android原生端效果一致,且在统一路由跳转处增加配置项,可切换一对一方案,这样可以保证iOS的接入与原生的交互体验一致性,后续随着越来越多的业务模块改造,对于现有设计方案,我们会不断更新调整优化。

稳定性保证

对于稳定性保证采用如下方案:
选取个别渠道上进行灰度测试;
动态接口开关控制用户逐渐放量测试;
通过FlutterError.onError和runZoned捕获异常,异常错误信息用channel机制通过native上报到崩溃收集系统(fabric-Crashlytics)。
上线情况:网易新闻Flutter用户量由4%逐渐放量到目前10%, 在几个版本的迭代过程中,异常收集达到万分之一,已达到生产标准。

发布了249 篇原创文章 · 获赞 224 · 访问量 20万+

猜你喜欢

转载自blog.csdn.net/shifang07/article/details/98627421