《跨平台移动应用开发框架的分析.docx》由会员分享，可在线阅读，更多相关《跨平台移动应用开发框架的分析.docx（7页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、移动应用开发课程报告班 级：学 号：姓 名：202X年月曰一、背景1、跨平台移动应用开发框架的开展及现状跨平台是一种能够在多种平台（例如Android, iOS, Windows等）上运行的 软件。基于此框架构建的应用程序不需要为每个平台进行单独的编码，而是一次 编码就可以在多个平台上高效运行。它是当今应用程序开发领域中最受欢迎的方 法之一。那为什么我们需要跨平台开发？本质上，跨平台开发是为了增加代码复 用，减少开发者对多个平台差异适配的工作量，降低开发本钱，提高业务专注的 同时，提供比web更好的体验。伴随社会进步及经济开展,智能移动设备逐渐兴 起且广泛普及于日常生活。智能移动设备中移动操作
2、系统平台历经日新月异变革, 促使移动应用程序开发进入全新开展阶段，当前时期，形成智能移动设备平台多 样性无法与移动应用程序开发需求相吻合的矛盾。再好的系统平台都需要有软件来支撑，软件是真正表达其价值的载体。移动 应用软件作为直接与用户交互的窗口，开发出具有高认可度的移动应用软件，己 经成为了移动平台占据传统市场的主要手段。Nokia主推的Symbian. Apple的 iOS和Google的Android,分别占据了较大的市场份额。然而，由于当前主 流的移动平台之间互不兼容，针对不同的移动平台系统，当前并没有可以兼容的 应用开发接口和语言；当前，使用C/C+的Symbian、使用Object
3、C的iOS和 使用Java的Android应用开发技术，几乎是完全无法融合的。这种开发技术的不兼容性，将直接为移动平台应用的开展带来重大的阻碍。 从应用开发的角度来说，同样的程序逻辑却不得不在多个平台上使用不同的语言 和API重复编码；从代码维护的角度来说，针对同一个工程需要同时维护多份代 码，一旦程序逻辑发生变化，将导致大规模的代码修改与回归测试；从经济角度 来说，要同时开发和维护多个平台的应用程序，将花费企业巨大的人力和时间成 本。二、现有技术分析1、跨平台移动应用开发框架（1） FlutterFlutter是谷歌的移动应用SDK,用于在iOS和Android上制作高质量的原 生界面。Fl
4、utter不需要JavaScript桥接器与本机移动组件通信，因为它使用 编译的编程语言，称为Dart。它是一种通用编程语言，Google和其他人的开发 人员使用Dart为iOS, Android和Web创立高质量，关键任务的应用程序。使用 Dart桥，即使应用程序大小变大，它的执行速度也会快得多。（2） React NativeReact Native是一个JavaScript框架，用于为iOS和Android本地编写移 动应用程序。它基于React, Face用ok的用于构建用户界面的JavaScript库。 但它不是针对浏览器，而是针对移动平台。使用React Native,应用程序是使
5、 用JavaScript和JSX（XML-esque标记）的混合编写的。在弓I擎盖下，React Native “bridge” 调用 Objective-C （适用于 iOS）或 Java （适用于 Android）中的本 机呈现API。这允许应用使用真实的移动UI组件呈现，而不是使用webview,使 其外观和感觉与任何其他本机移动应用程序一样。2、Flutter 与 React Native 的比照表1两种框架的优缺点比照FlutterReact Native优点支持热重载hot reload,开发调试非常方便两个平台使用一个代码 库，所需测试减少50%一个代码库可用于两个 移动平台采用
6、Dart语言开发，受 众小采用JS语言开发，基于 React,受众更多UI框架性能更高，兼容性 局可以利用原生己有的优 秀UI新发行，功能效率高拥有广泛的支持缺点稳定性不够强用户界面选择自由有限缺乏重要的社区支持与本地应用相比，需要更 多的编码Cupertino库缺少iOS样 式的表单组件需要桥接JavaScript才 能执行功能，应用性能降 低第三方库还很少不能处理耗时的操作2表 2 Flutter VS React NativeFlutterReact Native安装难度需要手动配置PATHnpm安装cli即可UI构建差异使用Skia绘制引擎,可 最大程度保证样式没有 平台差异依旧是原生
7、渲染，具有平 台差异性语言难度基于Dart,声明式语法， 有些混乱，接受度较低JSX,流传很广,阅读性 更高HotReload支持IDE配置主流 IDE (Atoms VSCode WebStorm)均支持API丰富程度现阶段并不完整，局部 API并未支持趋于完整三方库数量正在开展阶段极其丰富HotUpdate不支持支持有很多成熟的第三方热 更新框架（如CodePush）平台倾向性AndroidiOS性能差异（debug模式）为了支持后台hot reload 以及调试辅助等，使用 J1T模式，运行在DartVM 上，所以导致FPS、CPU 指数极其差接近原生性能差异（release模式）rel
8、ease下使用A0T模式， 编译为机器码，所以整体 性能都近乎原生，接近 60FPS的体验接近原生，但高数据量环 境下表现明显劣于前者release包的大小因为内嵌了 Skia绘制引 擎及 Flutter Foundation Framework,包容量增幅 较大相比原生要小很多与原生库通信支持，使用 MethodChannel支持，使用RCTBridge3、React Native和Flutter在使用场景上的区别a.环境搭建无论是React Native还是Flutter ,都需要Android和IOS的开发环境， 也就是JDK、Android SDK Xcodc等环境配置,而不同点在于：
9、React Native 需要 npm、node、react-native-cli 等配置。Flutter 需要 flutter sdk 和 Android Studio / VSCode上的Dart与Flutter插件。从配置环境上看， Flutter的环境搭配相对简单，而React Native的环境配置相对复杂，而且由 于node_module的“黑洞”属性和依赖复杂度等原因，首次配置运行成功率 Flutter是高于React Native的，且Flutter失败的原因那么大多归咎于网络。3b.实现原理在Android和IOS上，默认情况下Flutter和React Native都需要一
10、个原 生平台的Activity / ViewController支持，且在原生层面属于一个“单页面 应用”，而它们之间最大的不同点其实在于UI构建：React Native ： React Native是一套UI框架，默认情况下React Native会在Activity下加载JS 文件，然后运行在JavaScriptCore中解析Bundle文件布局，最终堆叠出一系 列的原生控件进行渲染。简单来说就是通过写JS代码配置页面布局，然后 React Native最终会解析渲染成原生控件，如标签对应 ViewGroup/UIView , 标签对应 Scro 11View/UIScro 11View
11、 , 标签对应 I mageV i ew/l 11 mage V i ew 等。 Flutter ：如果说 React Native是为开发者做了平台兼容，那Flutter那么更像是为开发者屏蔽平台的概 念。Flutter中只需平台提供一个Surface和一个Canvas ,剩下的Flutter 说：“你可以躺下了，我们来自己动。Flutier中绝大局部的Widget都与平台 无关，开发者基于Framework开发App ,而Framework运行在Engine之上， 由Engine进行适配和跨平台支持。这个跨平台的支持过程，其实就是将 Flutter UI中的Widget “数据化”,然后通
12、过Engine上的Skia直接绘制 到屏幕上。三、选择一种框架，详细研究分析框架、优势、缺点与展望1、优势（1）性能强大，流畅Flutter比照weex和react native相比，性能的强大是有目共睹的。基于dom 树渲染原生组件，很难与直接在原生视图上绘图比肩性能，Google作为一个轮 子大厂，直接在两个平台上重写了各自的UIKit,对接到平台底层，减少UI层 的多层转换，UI性能可以比肩原生，这个优势在滑动和播放动画时尤为明显。（2）路由设计优秀Flutter的路由传值非常方便，push一个路由，会返回一个Future对象（也就 是Promise对象），使用await或者.then就
13、可以在目标路由pop,回到当前页面 时收到返回值。弹出dialog等一些操作也是使用的路由方法，几乎不用担忧出 现传值困难.（3）单例模式Flutter支持单例模式，单例模式的实现也非常简单。单例模式很好的解决了一 些问题。在App的初期开发中，往往一个容易实现的单例可以帮助我们快速完成 一些逻辑的搭建。（4）优秀的动画设计Flutter的动画非常，动画对象会根据屏幕刷新率每秒产生很多个（一般是60 个）浮点数，只需要将一个组件属性通过补间（Tween）关联到动画对象上,Flutter 会确保在每一帧渲染正确的组件，从而形成连贯的动画。这种操作在Flutter 上却看不到明显的卡顿，这也是Fl
14、utter的一个魔力所在。相比之下其他跨平台 框架儿乎不能设计动画，往往会遭遇非常严重的性能问题。（5） UI跨平台稳定Google直接在两个平台上在底层重写了 UIKit,不依赖于Css等外部解释器，几 乎不存在UI表达不理想，渲染不正常的情况，可以获得非常稳定的UI表达效果。 Css换个浏览器就有不同的表现，基于Css的跨平台框架很难获得稳定的UT表 现。（6）可选静态的语言，语言特性优秀Flutier采用Dart语言开发，Dart是一个静态语言。Dart可以被编译成js,但 是看起来更像java。静态语言可以防止错误，获得更多的编辑器提示词，极大 的增加可维护性。2、缺点（1）躲不开原生
15、代码跨平台框架也就是UI跨平台，最后还是要在原生平台运行，一套代码平衡iOS 和Android在实际应用中的区别使不太可能的。Flutter具有与原生代码互相调 用的能力是具有科学性的，但是问题反而显得更加明显，对于什么是 UlViewController,什么是Activity学习起来比拟麻烦,而应用Flutter框架 那么需要学习 UlViewController 和 Activity。（2）组合而不是继承的思路Flutter提倡“组合”，而不是“继承”。在iOS开发中,经常会继承UlView,重 写UlVicw的某个生命周期函数，再添加一些方法和属性，来完成一个自定义的 Vicwo但是在
16、Flutter中这些都是不可能的，属性都是final的，例如继承了一 个Container,是不能在它的生命周期中修改他的属性的。始终需要嵌套组合几 种Widget,例如Row, Container, ListView等Widget。这种方法非常不符合直 觉，初学时很难想明白如何构建一个完整的组件。（3） Widget的类型难以选择Flutter 的 Widget 分为 StatefulWidget 和 StatelessWidget 两种，一种是带状 态的一种是不带状态的，刚开发的时候很难想明白用哪个，因为 StatelessWidget也能存值，其实区别就在于框架重构UI的时候会使用Sta
17、te 来重构，如果是StatelessWidget,暂时存进去的值就没了。（4） UI 控件 APIgoogle尽可能的通过构造函数定制化Widget,但是也难免有遗漏的。例如，想 修改一个Appbar的高度，但无法找到关于高度的属性，因为高度是固定的。所 以无法通过生命周期来改变组件属性，写Appbar显得非常没必要，一些定制化 的UI的Api设计经常有缺失。(5)资源管理设计Flutter支持动态加载不同分辨率的图片，但是Sketch导出的多分辨率资源， 几乎不可能直接拖到Flutter里用，极其麻烦。3、前景Flutter是以Dart语言编写，开发体验更接近客户端，Flutter的定位是
18、 多端一体化，以客户端为首，先磨平Android和iOS双端开发体验，再逐步向 Web端渗透。Flutter的UI框架优先支持客户端(Android/iOS)应用的同时,然 后再适配Web端。Flutter既没有采用webView,也没有采用JS桥接原生控件， 而是自行实现一套UI框架，在引擎底层通过Skia渲染到屏幕。对于UI之外所 需要使用的移动设备自身提供的服务，比方相机、定位、屏幕触摸等，那么采用 Platform Channels跟原生系统通信的方式来实现。目前Flutter主要在移动端Android/iOS双端跨端，Flutter的愿景是成为 一个多端运行的UI框架，能够支持不仅仅
19、是移动端，还包括呢b、桌面、甚至 嵌入式设备。在2019 Google I/O开发者大会上推出的使用Flutter开发Web 应用的框架，同年9月发布Flutter 1. 9,并将Flutter web合入Flutter主仓 库。Flutter的优势还有动画流畅，很多开发者反响比原生安卓还流畅，至少在 iOS上是看不到卡顿的，安卓上动画也很稳定，性能上展示了 Google的硬实力。 从Flutter的设计理念来看，其整体架构都是具有革命性的，相比于其他架构， 它实现了真正意义上的跨平台。它能够让各平台的体验一致，并且让用户体验达 到更优。现如今，Flutter的各种UI库和组件都在不断增加，与之相关的各种 生态系统和社区也在不断完善，它对新的操作系统的适配性将会越来越强。相信 在不久的将来，Flutter会慢慢成熟起来，成为主流的开发语言之一。