跨平台高手必修课--Flutter动态化解决方案实战[完结14章]

贾元春
• 阅读 271

虽然 Flutter 的成长曲线和未来前景看起来都很好,但不可否认的是,目前 Flutter 仍处在发展阶段,很多大型互联网企业都无法毫无顾虑地让全线 App 接入,而其中最主要的顾虑是包大小与动态化。(安装包下载:/s/1XaCF_QAYsQtszdpW3tXIvA 提取码: aeiu) 动态化代表着更短的需求上线路径,代表着大大压缩了原始包的大小,从而获得更高的用户下载意向,也代表着更健全的线上质量维护体系。当明白这些意义后,我们也就不难理解,在 Flutter 的应用与适配趋近完善时,动态化自然就成为了一个无法避开的话题。RN 和 Weex 等成熟技术甚至让大家认为动态化是跨端技术的标配。

一、什么是动态化? 目前移动端应用的版本更新, 最常见的方式是定期发版,无论是安卓还是iOS,都需要提交新的安装包到应用市场进行审核。审核通过后,用户在应用市场进行App的下载更新。而动态化, 就是不依赖更新程序安装包, 就能动态实时更新页面的技术。

二、动态化的必要性 为什么需要动态化技术呢? 因为上述定期发版更新应用的方式存在一些问题,比如: 1、审核周期长, 且可能审核不通过。 周期长导致发版本不够灵活, 紧急的业务需求不能及时上线。 2、线上出现急需修复的bug时,需要较长修复周期,影响用户体验。 3、安装包过大, 动辄几十兆几百兆的应用升级可能会让用户比较抗拒。 4、即使上线了,也无法达到全部用户升级, 服务端存在兼容多版本App的问题。

三、Flutter的动态化可以通过在Flutter应用程序中集成可编程的UI组件来实现,例如将Dart代码作为字符串从服务器端下载并评估,从而生成新的UI元素。下面是一些设计思路和代码实现: 1、使用Flutter的自定义渲染器(Custom Renderer):您可以编写一个自定义渲染器,该渲染器将解析从服务器或其他来源下载的UI描述,并使用Flutter Framework API构建UI元素。这种方法需要更多的开发工作,但它提供了更大的灵活性和控制权。 2、使用Flutter Widget树序列化:Flutter Widget树可以序列化为JSON格式,并可以发送到移动设备上的Flutter应用程序。您可以使用此功能,从远程服务器下载UI树并将其反序列化为真实的Flutter组件树。 3、使用Flutter插件:在Flutter中,插件是一个独立的、客户端库,在Flutter应用程序中运行。您可以编写一个插件,使其可以从云服务器下载所有UI元素并展示给用户

四、实现思路 按道理iOS上也可以采取跟Android同样的思路,但是由于苹果开发者协议的规定,不允许动态更新、运行可执行代码;所以在Flutter资源的处理上,我们可以采用同Android一样的思路,但是对代码的处理,我们需要寻找新的方案。回顾之前的这些跨端方案,我们可以参照RN的实现,只不过N不再是Native了,而是Flutter。RN是通过JS控制Native渲染,我们要实现的是通过JS控制Flutter渲染。

五、Flutter发展前景 随着移动应用市场的不断扩大,跨平台开发框架的需求也越来越大。Flutter框架可以帮助开发者在不同平台上快速开发高质量的移动应用程序,这种趋势将进一步推动Flutter的发展和普及。

作为一名Android开发工程师,学习Flutter框架是非常有必要的。因为现在的前端开发已经不仅仅局限于网页开发,而是需要涉及到多个平台的应用开发。如果掌握了Flutter框架的开发技能,就可以更好地满足前端开发的多样化需求。

从19年过去的几年时间,Flutter在Google带领各大厂商的引领下,飞速发展。flutter sdk官方也在快速的迭代升级,从1.0到现在的3.1,从底层引擎到适配层再到框架层都有比较大的更新。

六、Flutter动态化解决方案的两种方法:

  1. 热重载(Hot Reload): 热重载是Flutter框架的一项独特功能,它允许开发者在应用运行时快速预览代码更改的效果,而无需重新启动整个应用。热重载使开发人员可以实时查看界面、布局和功能等变化,并立即在应用中看到这些变化的效果。

  2. 插件化(Flutter Plugin): 插件化是一种在Flutter应用中集成动态化插件的方法,可以在应用运行时动态加载新的功能模块或代码。开发人员可以编写自定义插件,将其集成到应用中,以实现动态化更新和扩展功能的目的。

七、动态化方案调研 在Flutter实践层面,简单来说分为三个流派: 方案一:JavaScript是最好的语言( 碰瓷PHP) 主要思路:利用Flutter做渲染,开发使用js,逻辑层通过v8/jscore解释运行。代表框架是腾讯的MXFlutter。这个框架是开源的,大写的 。 方案二:DSL + JS 主要思路:基于模板实现动态化,主要布局层采用Dart转DSL的方式,逻辑层使用JS。代表框架是58同城开源的Fair。 方案三:布局,逻辑,一把梭 主要思路:与方案一最主要的区别是,逻辑层也是使用dart,增加了一层语法解析和运行时。有一个代表,美团的MTFlutter,然而没有开源动向,无从考察更多。

点赞
收藏
评论区
推荐文章
浩浩 浩浩
3年前
Flutter 2.0 下混合开发浅析
多余的前言Flutter2.0发布时,其中最受大家关注之一的内容就是AddtoApp相关的更新,因为除了热更新之外,Flutter最受大家诟病的就是混合开发体验不好。为什么不好呢?因为Flutter的控件渲染直接脱离了原生平台,也就是无论页面堆栈和渲染树都独立于平台运行,这固然给Flutter带来了较好的跨平台体验
Stella981 Stella981
3年前
Flutter 不一样的跨平台解决方案
本文主要介绍Flutter相关的东西,包括Fuchsia、Dart、Flutter特性、安装以及整体架构等内容。1\.简介Flutter作为谷歌最近推出的跨平台开发框架,一经推出便吸引了不少注意。关于Flutter,目前我们知道它是一个跨平台开发框架。但是它本身并不止于此,例如Fuchsia、Dart等,我们也都需要去了解。
田楷 田楷
3星期前
鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件
使用ArkTs开发Flutter鸿蒙平台插件本文讲述如何开发一个Flutter鸿蒙插件,如何实现Flutter与鸿蒙的混合开发,以及双端消息通信。Flutter侧,编写MethodChanneldartconstMethodChannelmethodCha
田楷 田楷
3星期前
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter实战:混合开发鸿蒙Flutter混合开发主要有两种形式。1.基于har将fluttermodule打包成har包,在原生鸿蒙项目中,以har包的方式引入。其优点是主项目开发者可以不关注Flutter实现,不需要安装配置Flutter开发环
田楷 田楷
3星期前
鸿蒙Flutter实战:09-现有Flutter项目支持鸿蒙
鸿蒙Flutter实战:现有Flutter项目支持鸿蒙背景原来使用Flutter开发的项目,需要适配鸿蒙。环境搭建见文章[鸿蒙Flutter适配指南],搭建开发环境,使用fvm管理多版本SDK。模块化原有项目保持模块化,拆分为apps/common/com
贾元春
贾元春
Lv1
青春就是,不屈服,不媚俗,向着阳光,野蛮生长。
文章
2
粉丝
0
获赞
0