从Flutter聊聊跨平台移动研发方案

标签: flutter 跨平台 移动 | 发表时间:2022-04-26 08:12 | 作者:Finbird
出处:https://juejin.cn/tag/%E6%9E%B6%E6%9E%84

Flutter 是一款由 Google 开发的开源、跨平台移动端开发框架。Flutter 使用 Dart 作为开发语言,这是一门简洁、强类型的编程语言。它允许使用同一个代码库构建高性能、漂亮的 iOS 和 Android 应用,Flutter还提供了两套视觉库,可以针对不同的平台有不同的展示效果。此外,通过自定义的 Flutter 引擎可以将其嵌入到其他平台。

一直以来,跨平台工具采用以下两种方法之一:

  • 在原生应用程序中嵌入 web view ,像构建网站一样构建应用程序。
  • 封装原生平台里的控件并为它们提供一些跨平台的参数。

Flutter的特别之处

为了使移动端开发变得更好,Flutter 尝试了一种不同的方法。它提供了开发人员工作的框架应用程序和能够托管应用程序的可移植运行时的引擎。该框架依托 Skia 图形库而构建,提供了实际渲染时用到的 widgets,而不仅仅是原生应用控件的包装器。就像 web 包装器选项提供的那样,该方法可以灵活的以完全自定义的方式构建跨平台应用程序,同时还会提供流畅的性能体验。与此同时,Flutter 自带的丰富的 widget 库以及一些开源的 widgets 使其成为一个功能丰富的平台。

目前已经有不少大型项目接入Flutter,阿里的闲鱼、头条的抖音、腾讯的NOW直播,都将Flutter当做应用程序的开发语言。除此之外,还有一些其他中小型公司也在做。

Flutter的整体架构

简单明了的说,Flutter 分为三大部分:由 Dart 语言负责的 Framework 层;Dart 语法执行器;Skia 图像处理引擎。

Flutter 也可以理解为开发SDK或者工具包,其通过Dart作为开发语言,并且提供Material和Cupertino两套视觉控件,视图或其他和视图相关的类,都以Widget的形式表现。Flutter有自己的渲染引擎,并不依赖原生平台的渲染。Flutter还包含一个用C++实现的Engine,渲染也是包含在其中的。

Flutter的跨端优势

1、如果以后想在 Google 的新系统上跑程序的话,用Flutter来编写是一定没错的。

2、Flutter 用 Dart,学习 Flutter的同时会使我们掌握一门新的语言,买一送一。 3、Flutter 天生支持 iOS 风格的控件, 称为 Cupertino,这样我们可以一套设计, 一套code跑在两个系统上。

4、学习Flutter的过程会改变手机端app开发的思维,毕竟只有一个activity,全程跟个游戏引擎一样, 60帧每秒绘图。

5、Hot reload,极大地加速了开发效率。

6、Flutter 提供 method channel 给 Android 和 iOS,其实可以只用 Flutter 来开发UI,其他底层逻辑可以封装Android 和 iOS 分别的 lib package,然后直接Rx封装写回 method channel,也是一种新的开发模式。

7、性能更好, 兼容性更好,开发起来更有乐趣,这才是程序员的人生,正好 Flutter 都能满足。

跨平台方案的比较

NATIVE

原生应用程序在使用新功能时带来的困扰是最少的。由于应用程序是使用平台供应商自己(Apple 或 Google)的控件构建,为了让用户体验更加符合给定的平台,因此他们通常遵循这些供应商制定的设计指南。大多数情况下,原生的应用将会比那些跨平台构建的应用性能要好一些,尽管在很多情况下两者的差异可以忽略不计,不过具体还要取决于底层跨平台技术。原生应用的一大优势是:当需要时,他们可以立即采用 Apple 和 Google 在测试版中开发的新技术而不用等待第三方的集成。构建原生应用的主要缺点是缺乏跨平台的代码复用,如果同时开发 iOS 和 Android 应用,那么开发成本可能会很高。

REACT NATIVE

React Native 允许原生应用使用 JavaScript 构建。应用中用到的控件实际上都是原生平台里的控件,所以用户使用起来感觉和原生应用一样。对于那些 React Native 没有提供的需要自定义的应用,仍然需要使用原生开发。当需要定制的模块比较多时,某些情况下,在 React Native 中开发不如使用原生开发更合适。

XAMARIN

当谈到 Xamarin 时,有两种不同的方法将会被提及。跨平台方法:Xamarin.Forms。该方法不同于 React Native,但是从概念上讲是相似的,因为它也是抽象原生控件。同样的,在定制方面它也有和 React Native 同样的缺点。第二种方法:Xamarin-classic。该方法分开使用 Xamarin 的 iOS 和 Android 产品来构建适用于特定平台的功能,就像直接使用 Apple/Android 原生功能一样,只不过在 Xamarin 中需要使用 C# 或 F# 。使用 Xamarin 的好处是可以共享非平台特定的代码,例如网络、数据访问、Web 服务等。

NATIVE+小程序

说起这个可能首先会想到「原生 + HTML5」,至少一些业务功能通过H5的形式实现,可以节省安装包的体积,也可以实现快速更新。但会发现 HTML5 开发的方式,性能体验问题较大。比如,HTML5 页面在用户手机上经常出现打不开、一直加载中、卡顿,而且H5很多系统权限获取不了,也不支持本地缓存,需要访问通讯录、调用硬件、访问蓝牙啥的这些 H5 都是无法支持的,导致还是有大量的功能不得不放到客户端上实现。

由于国内的特殊的原因,在微信、支付宝的带动下小程序成为移动端的时代搅局者,小程序具有强大的 Web 渲染引擎、提供丰富组件、支持本地缓存、避免 DOM 泄露等等这些都是,而且小程序技术也有利于帮助App实现「松散耦合」,比如当App的一些业务功能用小程序的形式替代,那么这个小程序可由团队或者个人独立开发、独立部署、独立管理生命周期,随时上下架而不影响APP主体,实现APP复杂业务动态化,多维发布。

目前也有国内厂商推出了成熟的解决方案,之前有了解到 FinClip ,这个框架对标微信小程序的功能,相同的代码,既能在微信端跑,也能在自己的 App 里跑,效果是一样的,相当于把已经上架的微信小程序能够直接搬到自己的 App 能运行。开发一次就能够在包括 Linux、Windows、MacOS、麒麟等操作系统运行。这意味着,PC 端、车载设备、智能电视都能使用小程序了,实现了“一次开发,到处运行”。

相关 [flutter 跨平台 移动] 推荐:

移动跨平台框架Flutter介绍和学习线路

- - SegmentFault 最新的文章
Flutter是一款移动应用程序SDK,一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序. Flutter目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序. 我们兼容滚动行为、排版、图标等方面的差异. 在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的.

从Flutter聊聊跨平台移动研发方案

- - 掘金 架构
Flutter 是一款由 Google 开发的开源、跨平台移动端开发框架. Flutter 使用 Dart 作为开发语言,这是一门简洁、强类型的编程语言. 它允许使用同一个代码库构建高性能、漂亮的 iOS 和 Android 应用,Flutter还提供了两套视觉库,可以针对不同的平台有不同的展示效果.

Flutter 2 来了:专为 Web、移动与台式机环境构建

- - InfoQ推荐
下一代 Flutter 专为 Web、移动与台式机环境构建而成. 今天,我们宣布 Flutter 2 正式亮相. 作为 Flutter 的一次重大版本升级,Flutter 2 将帮助开发人员立足任意平台创建起美观、快速且能够轻松移植的应用程序. 在 Flutter2 的支持下,您可以使用相同的代码库将原生应用程序发布至 iOS、Android、Windows、macOS 以及 Linux 五大系统阵营之上.

闲聊 Flutter

- - bang’s blog
移动端开发从08年开始就有个大家前赴后继不断追求的目标:跨平台,15年时 nwind 有篇 雄文,详细调研了跨平台各流派,其中最后的 Dart 栏可以看到现在 Flutter 的雏形. 可以看出来,Flutter 是从精简浏览器的思路演化过来的,实际上 web 与 Flutter 从底层看是一致的,web 是提供了一层平台无关的独立引擎,可以看成平台只提供了画布,所有的UI组件、框架、事件处理都是 web 引擎封装处理.

Flutter Weekly Issue 51

- - IT瘾-dev
一个易用的 Flutter 应用页面事件埋点插件. 它不仅支持在普通导航事件中监听页面曝光和离开,也支持弹窗的曝光和离开. flutter滑动曝光埋点框架,支持SliverList、SliverGrid. Inner Drawer is an easy way to create an internal side section (left/right) where you can insert a list-menu or other..

移动端跨平台技术总结

- - CSDN博客推荐文章
曾经大家以为在手机上可以像桌面那样通过 Web 技术来实现跨平台开发,却因为性能或其他问题而放弃,不得不针对不同平台开发多个版本. 而React Native让跨平台移动端开发在次回到人们的视野中,其成功的原因除了他“一次编写处处运行”,还因为它相比h5等前端技术,有了更接近原生的体验. 为了方便理解,笔者将跨平台技术分为4大流派:.

Moscrif:用JavaScript进行跨平台移动开发

- - InfoQ cn
Moscrif是构建在定制虚拟机上的跨平台移动开发环境. 尽管该平台提供了访问原生设备的功能,但编程语言却是JavaScript的一个定制版本. 据公司联合创始人Michal Habalcik所说,Moscrif已支持iOS、Android、Symbian、Windows Mobile和Bada等平台,而且还将在微软发布API之后,添加对Windows Phone 8的支持.

文章: Calatrava:自由构建UI的跨平台移动框架

- - InfoQ cn
移动是未来计算的趋势,越来越多的人使用移动设备来访问互联网. 但是目前至少三大平台:iOS、Android、移动Web. 相比桌面Web,移动用户需要更好的体验、界面和设计. 然而移动设备受限于电池、不可靠的网络连接和小尺寸屏幕. 创业者之翼为创业新星免费提供甲级办公场所,详情请点击. 2012RIA天地行•西南游戏开发者大会11月25日,火热报名中.

跨平台移动框架iMAG开发入门

- - IT技术博客大学习
iMAG是一个非常简洁高效的移动跨平台开发框架,开发一次可以同时兼容Android和iOS平台,有点儿Web开发基础就能很快上手. 当前移动端跨平台开发的框架有很多,但用iMAG还有一个好处,就是用iMAG开发出的App是原生的. iMAG采用XML + JavaScript(配置 + 脚本)的开发方式,它的原理是将符合iMAG开发规范的XML文件解释成对应的原生应用代码来执行.

聊聊移动端跨平台开发的各种技术

- - FEX 百度 Web 前端研发部
最近出现的 React Native 再次让跨平台移动端开发这个话题火起来了,曾经大家以为在手机上可以像桌面那样通过 Web 技术来实现跨平台开发,却大多因为性能或功能问题而放弃,不得不针对不同平台开发多个版本. 但这并没有阻止人们对跨平台开发技术的探索,毕竟谁不想降低开发成本,一次编写就处处运行呢.