贝壳flutter动态化,Flutter动态化

Flutter中Dio动态设置Http代理IP和端口

这问题,一开始就有。因为忙着忙着也没管。后来发现还是很有需要灵活修改代理ip和端口号的。所以得处理一波了。

创新互联公司基于分布式IDC数据中心构建的平台为众多户提供多线BGP机房 四川大带宽租用 成都机柜租用 成都服务器租用。

因为本身做Android出身,就草船借鉴了下Android里的设置点个8下,进入开发者模式的套路。看到这,系不系心如明镜般?哈哈~ 摸着Android过河也是可以的。

解决方案有了:

我们设置了20次,点点点吧,减小误触几率。

这个Http代理填写IP和端口号的页面,可以新开一个,就是两个输入框,点Submit后,重置Dio实例,并把代理设置给HttpClient。

这里需要注意的是,如果你这里重置了client.findProxy,那么一定要重新实例化Dio实例,不然不生效。这一点也可以在源码中得到印证.

^_^,这就搞完了。还挺简单的。但是确实解决了很大的问题,也很灵活。大家自行拿去试试吧。

Keframe 分帧入屏: 处理flutter卡顿,优化流畅度

在掘金上浏览到 Nayuta 开源的贝壳flutter流畅优化组件 Keframe 。在Demo上试用了一番,确有奇效,下面记录一下笔记心得。

借用一下作者的图解:

另外 Keframe 还提供了一个工具类 SizeCacheWidget 用于缓存子节点中,分帧组件嵌套的实际 widget 的尺寸信息。对于列表,在每一个 item 中嵌套 FrameSeparateWidget,并将 ListView 嵌套在 SizeCacheWidget 内即可。

Flutter动态化方案调研

腾讯课堂14M

今日头条3M

闲鱼22M

百度贴吧13M

蚂蚁财富56.8M

百度网盘14M

手机淘宝15M

贝壳找房8M

由粗粒度小组件动态拼装出页面,Native端已经有很多成熟的框架,如天猫的Tangram。

开发语言:iOS、Android

适用场景:快速迭代的活动营销页面

优点:无侵入,更新简单

缺点:提前预埋,扩展性差,灵活性差

以webview作为容器的app,历史悠久,最早到2011年。

开发语言:HTML

适用场景:双端严格一致的银行类app,容器类的支付宝小程序等

优点:动态更新,跨平台

缺点:性能,加载速度

UI用Xml+JS表达,用Native View渲染。

开发语言:Xml+JS

适用场景:双端严格一致的银行类app,容器类的支付宝小程序等

优点:native组件,生态成熟

缺点:三方库crash,性能缺陷

UI用Dart表达,用Dart engine渲染。

Flutter官方不支持动态化。原因是Flutter在 Release 模式下构建的是 AOT 编译产物,在 Debug 模式下构建的是 JIT ,AOT 依赖的 Dart VM 和 JIT 并不一样, JIT Release 并不支持 iOS 设备。可行的方案是:AOT 需要一个编译后的 “Dart VM”。抽离一份 DartVM 独立编译,再以动态库的形式引入项目。

开发语言:Dart

适用场景:iOS、Android、Web、Desktop、Embed

优点:性能最佳

缺点:增大包体积 20MB+

大厂的主流方案。UI用JS表达,用Dart engine渲染。

开发语言:JS、类JS

适用场景:iOS、Android

优点:性能最佳

缺点:需要掌握JS、Dart两个语言和框架

大厂的主流方案。UI用Dart表达,用Dart engineX渲染。

开发语言:Dart

适用场景:iOS、Android

优点:性能最佳

缺点:需要改造Dart engine

1、 美团外卖Flutter动态化实践

2、 携程App 首页动态化探索

3、 Flutter 动态化在最右 App 中的实践

4、 Flutter 动态化热更新的思考与实践

5、 NOW直播Flutter动态搜索列表页实现

6、 Flutter动态化的方案对比及最佳实现-闲鱼

7、 基于JavaScript 的MXFlutter

基于Weex的Flutter项目框架

最近在做的一个项目,项目的前期采用Weex开发。但是随着交互复杂度的增加,Weex一处开发多处多处运行的特征并没有很好的体现,相反很多时候我们还是需要做IOS和Android的适配。如今火热的Flutter相比Weex和Rn来说,给出了更好的跨平台解决方案。所以我们设计了一套基于Weex实现,底层跑在Flutter Engine上的框架。

底层的Runtime采用isolate engine,框架业务逻辑,Dom的解析逻辑和Render逻辑都跑在这里。

渲染引擎采用Flutter的Skia,彻底剥离了Android和IOS的差异性.

将Weex VirsualDom的解析都替换成Flutter Widget.

设计基于Weex2Dart的Brider,使JS和Dart可以相互调用

weex-demo的性能展示

release环境下采用AOT模式,性能会有质的飞跃。

Android-Release版本只有10m大小

相比Weex和Rn具有更好的性能,同时具有更好的跨平台性

相比Flutter,具有动态部署的能力(Flutter Release采用AoT模式并没有动态部署的能力,即使Debug版本也只是开发环境下才有动态化能力并没有可以实施项目的能力)

只需要会Weex开发或则Rn开发就可以,不需要额外学习Dart,已有的Weex项目可以无缝切换。

Flutter工程化之iOS混编集成

在flutter官网上推荐了iOS项目中两种混编方式:

笔者在采用两种集成方式的过程中,因为iOS项目结构设计导致这两种简单的集成方式都有些麻烦,所以在实践中更改和优化了集成方式,使之在笔者的项目中能够更加简单和快速的集成。

问题:在不更改flutter tool中相关脚本的前提下,添加的Script Phase中的脚本相对路径错误,如果只是开发,手动更改下路径就可以了,但是在考虑到CI中不能每次在pod install之后都去更改,所以在开发调试中采用该集成方式,结合flutter attach的方式去调试。

通过编译相关的 xcframework + Cocoapods私有库的集成方式在CI中集成,这样QA的CI不需要配置flutter的相关依赖

根据flutter编译工具的提示: 上面的编译命令是打包flutter工程项目和插件的产物,在实际开发过程中可以发现是否引入了依赖Native的插件会导致贬义编译产物的不同。

根据上面的对比:

第一部分:基础的 Flutter Engine + Flutter App 编译后的产物 Flutter.xcframwork -- Flutter引擎的包 App.xcframework -- 工程项目对应的AOT的编译产物 第二部分:三方插件的注册中心 FlutterPluginRegistrant.xcframework -- 第三方插件的注册中心,其实是Native + iOS通信的集合 第三部分:依赖iOS Native的原生 FMDB . xcframwork path_provider_ios.xcframework sqflite.xcframework -- cached_network_image依赖的原生实现

根据上面的编译产物可以知道Flutter和App是编译后必有的包,后面的两个部分完全是服务于三方插件的,到这可以解答第二个问题:笔者App的混编过程中混编插件失效是因为笔者在NativeApp中重写了Flutter的容器,使用了FlutterEngineGroup动态创建多引擎去对应进入不同的功能模块,混合插件是因为重写过程中没有通过GeneratedPluginRegistrant注册插件,所以需要在Native的Flutter容器中注册插件,使之生效。

在这为什么使用commit的hash作为flutter-libs的依赖,因为pod install的时候会有缓存,除了版本好,commit hash也能保证每次CI编译通过 pod install 来更新flutter-libs依赖产物

完成!!!


名称栏目:贝壳flutter动态化,Flutter动态化
文章位置:http://azwzsj.com/article/phpspi.html