androidwebview调试工具_从事编程那些年经历的跨平台开发工具框架演变历史

前言&＃xff1a;不知道是幸运还是不幸&＃xff0c;从职业生涯早期开始就常常在做各种跨平台开发&＃xff0c;从早期的Cordova到现在的ReactNative&＃xff0c;从SmartTV到Android、iOS、MacOS以及Windows&＃xff08;还有死去的Windows Phone&＃xff0c;我可爱的Lumia 720只能变成老年机了&＃xff09;&＃xff0c;虽然不敢说全部都融会贯通&＃xff0c;但多少也累积了一些心得与想法。趁着记忆力退化忘光光之前&＃xff0c;写篇文章来记录近年来跨平台开发的发展史&＃xff0c;顺便总结一下心得&＃xff0c;有些可能年代久远记忆有误或用法有更新&＃xff0c;还请各位不吝指正。

先送上一首邓丽君的老歌《往事只能回味》献给大家。

从事编程那些年经历的跨平台开发工具框架演变历史&＃xff0c;你想要的都在这里。Cordova&＃xff0c;Xamarin&＃xff0c;Titanium&＃xff0c;NativeScript&＃xff0c;React Native&＃xff0c;Electron&＃xff0c;uni-app&＃xff0c;Flutter

我做了一个详细的来龙去脉的分析以及优缺点对比&＃xff0c;花了一个通宵整理的&＃xff0c;喜欢的话&＃xff0c;点个赞支持一下吧&＃xff0c;感谢大家关注。

本文是作者AWeiLoveAndroid原创&＃xff0c;未经允许&＃xff0c;严禁转载。更多干货欢迎关注公众号【Flutter那些事】&＃xff0c;精彩多多&＃xff0c;别错过哦。

目录&＃xff1a;

• Cordova & Ionic(底层使用Angular)
• Xamarin
• Titanium
• NativeScript
• Election
• uni-app(底层使用Vue)
• React Native(底层使用React)
• Weex(底层使用Vue)
• Flutter

Cordova & Ionic(底层使用Angular)

说到跨平台&＃xff0c;一般人好像都会先想到这只小机器人.

Cordova是很早期的跨平台解决方案&＃xff0c;它是从更早期的PhoneGap分支出来的。在我刚开始接触跨平台开发的那个年代&＃xff08;大概2012年&＃xff09;&＃xff0c;它是最热门的跨平台解决方案。为什么呢&＃xff1f;因为它简单好上手&＃xff0c;而且那时候它的对手是Xamarin跟Titanium&＃xff0c;两者都是要付费的&＃xff08;这两个后面会作介绍&＃xff09;。

下面看看Cordova的架构图&＃xff1a;

Cordova的架构很简单&＃xff0c;就是一个简单的Activity&＃xff08;为了避免麻烦&＃xff0c;底下的架构都用Android的观点来解释&＃xff0c;绝对不是我iOS不熟喔&＃xff0c;只是内容有限&＃xff0c;就做一部分解读了&＃xff09;&＃xff0c;上面搭载一个CordovaWebView Component&＃xff0c;他是一个改造过的WebView&＃xff0c;加装了一些Cordova API&＃xff0c;让你借此和Native的部分交互。你的App基本上就是一个Mobile Web&＃xff0c;只是多了一些跟Native交互的能力。

优点&＃xff1a;

• 1.好上手&＃xff1a;前端工程师&＃xff08;或Web工程师&＃xff0c;那个年代还不是大家都听过前端这个词&＃xff09;只要知道怎么做Mobile Web(只要会Web&＃xff0c;然后刚好遇到了Cordova&＃xff0c;刚好一拍即合)&＃xff0c;就可以无痛的构建出一个跨平台的App&＃xff0c;Ionic入门很容易&＃xff0c;用Web写App简直就是无脑操作&＃xff0c;快得很&＃xff0c;写代码就是一把梭&＃xff01;听起来是不是很吸引人呢&＃xff1f;

• 2.Cordova的跨平台解决方案,尤其是ionic&＃xff0c;已经看起来和大部分原生app一样了。
• 3.Cordova有丰富的插件去衔接Native平台(Android和iOS)&＃xff0c;你基本上很少去管Native的交互&＃xff0c;社区也比较完善&＃xff0c;还是很不错的。
• 4.使用Ionic可以一套代码在安卓端、iOS端、网站端、小程序端通吃&＃xff0c;做到了“write once, run everywhere”&＃xff0c;开发和学习成本极低。

但是事情总是没有想像中的美好。Cordova这种简单明了的架构是个两面刃&＃xff0c;它也有它的缺点&＃xff1a;

Cordova(Ionic)成也WebView&＃xff0c;败也WebView&＃xff0c;使用Web性能体验很差。虽然它开发起来很快&＃xff0c;但是终究是个Web&＃xff0c;也成不了Native&＃xff0c;就好比你再怎么打扮也成不了吴彦祖&＃xff0c;胡歌一样的道理。那个年代Mobile设备的硬件条件非常有限&＃xff0c;还只是1GB RAM的时代&＃xff0c;Mobile Web的性能体验和Native相比起来差距非常大。比如&＃xff1a;Android上的Web UI跟Native UI比起来差异很大&＃xff0c;比如iOS上的高延迟&＃xff0c;掉帧&＃xff0c;黑屏等。相同硬体条件下&＃xff0c;iOS 上面就没有那么明显的差距&＃xff0c;原因归结于Android和iOS两个平台的底层渲染机制架构不同所产生的差异。

后来的改进方案&＃xff1a;

Web工程师们也意识到了这个问题的严重性&＃xff0c;在js或是css部分可以做一些trick來做GPU加速来改善Android上的UI体验。其中最好的当然就是Inoic了。PS&＃xff1a;那个年代我买了第一台小米手机&＃xff0c;体验一下什么是&＃xff1a;“为发烧而生”&＃xff0c;那个年代小米那个配置确实很牛逼啊&＃xff08;纯粹为了怀旧&＃xff09;。那个年代也是智能手机快速发展的时候&＃xff0c;当然随着而来的就是各种Mobile Web框架了&＃xff0c;比如&＃xff1a;JQuery Mobile、Bootstrap等等&＃xff0c;还有各大厂推出的开源框架和工具&＃xff0c;当然还有一些叫不出名字的。Inoic虽然推出的晚一些&＃xff0c;不过也算是“长江后浪推前浪”&＃xff0c;也算是不错的了。最新的ionic4控件做的相当完美&＃xff0c;为了一些十分微小的UX细节不断的改进。另外Ionic4好像有想要解决一些性能问题&＃xff0c;推出了一个capacitor的工具&＃xff0c;Ionic team是想做一個工具来优化web-based的跨平台开发体验。但是Cordova的性能部分&＃xff08;特別是渲染效能&＃xff09;基本上Ionic team这边应该是不太能做什么大的改进的&＃xff0c;因为框架就是那样设计的。或许在js或是css部分可以做一些trick來做加速&＃xff08;他们也确实花了很多工在这上面&＃xff09;&＃xff0c;但是整体的性能还是依赖于平台上的WebView。之前有人提出把Cordova webview替换成Chromium&＃xff0c;虽然会造成app体积臃肿&＃xff0c;不过也在一定程度上提升了性能。当然功能是满足不了需求的&＃xff0c;也可以通过原生插件来进行修补。

PS: 【Phonegap、Ionic、Angular和Cordova的区别和联系】&＃xff1a;

很多人都搞不清楚的问题&＃xff0c;在这里我也帮大家解答一下&＃xff1a;Phonegap、Ionic、Angular和Cordova的究竟有什么区别和联系&＃xff1f;

• Phonegap原本由Nitobi公司开发的&＃xff0c;现在由Adobe拥有&＃xff0c;它是一个使用HTML、Javascript、CSS等Web API开发跨平台的移动应用程序的框架。

2011年&＃xff0c;Adobe/Nitobi把PhoneGap的源代码贡献给Apache软件基金会&＃xff08;ASF&＃xff09;托管&＃xff0c;后来社区将这份开源的代码取名位&＃xff1a;“Cordova”。PhoneGap是Apache Cordova的一个分支。你可以这样想&＃xff0c;Apache Cordova是一台发动机&＃xff0c;运行在PhoneGap上&＃xff0c;就像WebKit浏览器引擎运行在Chrome浏览器和Safari浏览器上。

• Ionic 是一个全堆栈的混合应用开发框架&＃xff0c; Ionic &＃61; Cordova &＃43; Angular &＃43; Ionic UI&＃xff0c;Ionic主要功能是负责页面的实现。
• Angular 是一个Javascript的前端框架。
• Cordova提供了一组原生设备相关的API&＃xff0c;通过这些API可以使用Javascript访问原生的设备功能&＃xff0c;如摄像头、麦克风等。同时Cordova负责将实现的页面包装成原生应用&＃xff08;Android是apk的形式&＃xff1b;iOS是ipa的形式&＃xff09;。

简单的打个比方吧&＃xff1a;就像你吃柚子一样&＃xff0c;最内层的柚子瓤是Angular&＃xff0c;柚子瓤外面的一层皮就是Ionic&＃xff0c;而最外层的厚厚的柚子皮就是Cordova。

在那个年代Cordova风风火火了一阵子&＃xff0c;但是在在架构及硬体环境下呈现出来的视觉表现&＃xff0c;不太乐观&＃xff0c;远远比不上原生平台的体验&＃xff0c;所以给人一种“跨平台&＃61;效果差劲”的错觉。后来其他的跨平台推出时的时候&＃xff0c;很多开发者都会说&＃xff1a;“我之前使用Cordova&＃xff0c;那个体验太差了&＃xff0c;我宁愿原生的做&＃xff0c;也不做跨平台了”&＃xff0c;所以说成了WebView&＃xff0c;败也WebView&＃xff0c;树大招风&＃xff0c;Cordova招你惹你了&＃xff0c;居然躺枪&＃xff0c;看来火起来了在哪里都被提起&＃xff0c;躲都躲不过啊。

Xamarin

接下来登场的是C#家族的框架“Xamarin”了。

Xamarin跟Cordova差不多是同一个时期的产物&＃xff0c;它在被微软收购之前&＃xff0c;就已经是小有名气的跨平台框架了&＃xff0c;不过跟开源的Cordova不同&＃xff0c;Xamarin当时是需要收费的&＃xff0c;这也可能是它的名气不如Cordova的原因吧。另一个Xamarin没有红起来的原因是&＃xff1a;它使用C#当主导开发语言。

PS&＃xff1a;我不是针对C#,不是说它不好&＃xff0c;我也用过C#写过程序&＃xff0c;很像Java语言的。当年就是借鉴Java语言出道的&＃xff08;Java&＃xff1a;你C#可以模仿我的脸&＃xff0c;你不能模仿我的灵魂&＃xff09;。在.netCore还没出现之前,C#家族的产物都是相对的比较封闭的&＃xff0c;开源的资源比较少&＃xff0c;相比当时的慢慢火起来的Javascript来说&＃xff0c;简直是太少了&＃xff0c;这就造成了Xmamrin先天上的劣势。

Xamarin android端架构图&＃xff1a;

Xamarin iOS端架构图&＃xff1a;

从图中可以看出Xamarin比Cordova复杂多了&＃xff0c;有一组完整的Android & Java binding&＃xff0c;还有一个跨平台的 .net runtime — Mono。Xamarin大致上分成几个部分&＃xff1a;Xamarin.Android、Xamarin.iOS、Xamarin.Mac&＃xff08;后来才出现的&＃xff09;以及Xamarin.Forms。

感兴趣的可以看看官网介绍&＃xff1a;Xamarin | Open-source mobile app platform for .NET

这里我又要来顺便科普一下&＃xff0c;Xamarin和Cordova都出现过改名风波&＃xff0c;肯定有人会问的Xamarin的几个框架之间的关系&＃xff1a;

PS: 【.NET Framework、.NET Core、Mono、Xamarin之间的区别和联系】&＃xff1a;

• .NET Framework:微软2002年2月发布第一个版本&＃xff0c;只支持在Windows平台上开发和运行&＃xff08;重点圈起来&＃xff1a;闭源&＃xff0c;商业化&＃xff09;。
• Mono&＃xff1a;Mono是一个开源框架&＃xff0c;它是第三方公司Ximian发布的&＃xff0c;最早在2004年6月发布了Mono 1.0版本&＃xff0c;支持在Linux、Windows、Unix、Android等平台。&＃xff08;野生版的 .net Framework开源实现&＃xff09;
• .NET Core&＃xff1a;微软在2014年将.net Core开源,2016年6月发布其实现.net Core 1.0。内容包括跨平台虚拟机CoreCLR、.NET Framework APIs的实现子集以及新增类库等。&＃xff08;重点&＃xff1a;开源&＃xff0c;基于 .net Framework新增一些类库&＃xff09;
• Xamarin&＃xff1a;Xamarin的前身是Mono&＃xff0c;Mono项目几经转手&＃xff0c;2011年落入Xamarin公司手中&＃xff0c;2016年2月&＃xff0c;微软正式收购Xamarin。支持包括Windows、Linux、macOS、iOS、Android在内的各种主流平台和操作系统。

为了更好地说明这个问题&＃xff0c;借鉴网友的一张图表示&＃xff1a;

此图片来源于博主&＃xff1a;https://www.cnblogs.com/wer-ltm/p/8776846.html

优点&＃xff1a;

• 1.使用C&＃xff03;编写代码&＃xff0c;可以重复利用多达96&＃xff05;的源代码加快工程周期。同时Xamarin使维护和更新变得更加简单。
• 2.性能接近原生。它的性能损耗比起Cordova少的多。Cordova必须承担Web Rendering所带来的巨大损耗&＃xff0c;但Xamarin只有跨语言层面的损耗而已&＃xff0c;相较起来相当轻微&＃xff0c;这也是它在视觉渲染上带来的优势。比如&＃xff1a;使用Xamarin.Forms工具构建&＃xff0c;该工具可在应用程序运行时将应用程序UI组件转换为平台特定的界面元素。
• 3.丰富内置功能。Xamarin组件提供了数千个自定义UI控件&＃xff0c;各种图表&＃xff0c;图形&＃xff0c;主题和其他强大的功能&＃xff0c;可以仅添加到应用程序中点击次数很少。这包括内置支付处理&＃xff08;如Stripe&＃xff09;&＃xff0c;信标和可穿戴设备集成&＃xff0c;开箱即用推送通知服务&＃xff0c;云存储解决方案&＃xff0c;多媒体串流功能等等

缺点&＃xff1a;

• 1.与第三方库和工具的兼容性问题&＃xff1a;以前是新的Native API必须等待官方的封装才能使用&＃xff0c;不过现在Xamarin也开源了&＃xff0c;但是还是比较慢。另外&＃xff0c;尽管Xamarin拥有自己的组件商店&＃xff0c;但您可能需要在您的应用中需要特定的功能或整合&＃xff0c;而这些平台并未提供这些功能或整合&＃xff0c;所以这一点就很蛋疼了。有些网友也给我反馈过&＃xff1a;android和iOS的一些交互细节也会不太好。
• 2.对原生平台的最新更新的支持不会很及时。这完全取决于Xamarin开发团队&＃xff0c;这些更改和/或引入新的插件等需要一些时间&＃xff0c;尽管Xamarin声称提供当天的支持&＃xff0c;但仍然可能有些延误。
• 3.Xamarin开源生态系统问题。Xamarin社区比iOS或Android的小得多。因此&＃xff0c;找到一个有经验的Xamarin开发人员可能是一个挑战。
• 4.应用程序比较大。Xamarin应用程序通常比Native应用程序大&＃xff0c;比如&＃xff1a;Android的一个简单的“hello&＃xff0c;world”应用程序最多可能需要16 MB。
• 5.不适用于重图形应用程序。在Xamarin中构建游戏&＃xff0c;丰富的自定义用户界面或复杂的动画变有很大的限制。
• 6.使用MvvmCross(MvvmCross)&＃xff0c;需要做两套界面&＃xff0c;android性能有所提高&＃xff0c;但占用资源少&＃xff0c;第三方的库转换麻烦。MvvmCross是专门为Xamarin和移动生态系统开发的框架。它支持Xamarin.iOS&＃xff0c;Xamarin.Android&＃xff0c;Xamarin.Mac&＃xff0c;Xamarin.Forms&＃xff0c;通用Windows平台&＃xff08;UWP&＃xff09;和Windows Presentation Framework&＃xff08;WPF&＃xff09;。

Titanium

Titanium的logo就是下面这个&＃xff1a;

对不起&＃xff0c;我跟这个不熟&＃xff0c;只记得当初也是要收费的&＃xff0c;然后走的是JS to Native Binding的形式&＃xff0c;可是听说雷超级多&＃xff0c;就没有去踩了&＃xff0c;如果有曾经用过的朋友们&＃xff0c;可以来聊聊你的体验。我以外的发现了github有开源代码&＃xff0c;难道现在开始开源了&＃xff1f;github代码&＃xff1a;appcelerator/titanium_mobile

以下Titanium的优缺点介绍来源于博客&＃xff1a;Comparing Titanium and PhoneGap

优点&＃xff1a;

• 1.直接调用原生平台特性和功能&＃xff0c;无需其他的工具。Titanium的目的是为跨平台的原生移动开发提供一种更高级的API&＃xff0c;所以你可以直接访问一系列广泛的原生特性和功能&＃xff0c;从用户界面组件、插座接口到通知系统集成。Titanium的目的是&＃xff0c;将Titanium应用程序和纯原生应用程序之间在功能方面的差异缩小到几乎为零。
• 2.集成和扩展很方便。由于Titanium可以用插入到与应用程序其余部分一样的视图层次体系的可视组件来扩展&＃xff0c;你最终能够在底层原生平台上实现任何可能的用户界面。需要使用特殊的原生代码&＃xff0c;让表格视图&＃xff08;TableView&＃xff09;以60fps的速度滚动&＃xff1f;你能做到这一点。想无缝地集成游戏的OpenGL绘制曲面&＃xff0c;同时用Javascript保留运行循环的逻辑&＃xff1f;你能做到这一点。你可以把这些用户界面扩展直接集成到用核心Titanium API编写的应用程序中。
• 3.接近原生体验。使用常用的用户界面窗口组件时&＃xff0c;Titanium应用程序的外观和感觉也是这种平台的一个优点。不用进行可视仿真&＃xff08;或通过应用CSS&＃xff0c;或者使用OpenGL或Flash渲染用户界面窗口组件&＃xff09;。当你创建NavigationGroup时&＃xff0c;它得到iOS上的实际UINavigationController的支持。动画和行为与原生应用程序用户预期的相一致&＃xff0c;因为你使用同样的用户界面控件。
• 4.入手门槛低。由于Titanium通过Javascript提供了一种高级的原生编程API&＃xff0c;为用过基于ECMAScript的语言的任何人大大降低了原生编程方面的准入门槛。

缺点&＃xff1a;

• 1.Titanium API的范围使得添加新平台有难度。在一种新的原生平台上实现Titanium API是项艰巨任务。正由于如此&＃xff0c;Titanium平台只出现在目前被认为最重要的移动平台上&＃xff1a;iOS、Android和Web。
• 2.移动Web浏览器支持还没有达到可以投放市场的质量。Titanium在继续致力于改进我们的用户界面窗口组件集的性能和感觉上&＃xff0c;同时完善核心Titanium API的实现。
• 3.由于Titanium提供的抽象层很庞大Titanium的内部框架仍存在API实现未达到最佳标准的问题。在一些情况下&＃xff0c;一些用户界面组件还无法做到性能与原生用户界面组件一样好&＃xff0c;比如布局高度定制化的非常庞大的表格视图。优化核心的用户界面组件对Titanium团队来说仍是首要的技术任务。
• 4.另外由于Titanium平台的宏伟目标&＃xff0c;扩展Titanium并非易事。想有效地集成一种新的原生控件或API&＃xff0c;深入了解Titanium的架构和环境必不可少。开发者体验、API文档和面向模块开发者的总体指南。

NativeScript

NativeScript是Telerik&＃xff08;做过Kendo UI&＃xff09;推出的&＃xff0c;后来转成开源的形式。他们的想法跟Titanium类似&＃xff0c;都是想做JS跟Native之间的binding&＃xff0c;而他们采用的是反射&＃xff08;reflection&＃xff09;的形式&＃xff0c;NativeScript并不是直接用Java的反射去动态查找API&＃xff0c;因为性能不哈&＃xff0c;他会预先生成一个Metadata在apk里&＃xff0c;用于查找和匹配mapping。

优点&＃xff1a;

• 1.用映射的方式达到了极大的扩展性。NativeScript把Android / iOS上的API都映射到NativeScript runtime里&＃xff0c;让开发者可以直接以Javascript调用这些native API&＃xff0c;类似于V8引擎的原理。
• 这种做法给NativeScript带来超级强大的扩展性&＃xff0c;因为你可以使用“任何”原生app可以使用的api&＃xff0c;包括第三方lib&＃xff0c;而且不需要做额外的处理&＃xff1b;当平台有API变更时&＃xff0c;所有的变更也都可以马上被使用&＃xff08;除非反射机制在更新中被破坏了&＃xff09;&＃xff0c;这个不像Xamarin那样需要等待团队去做更新。从这一点上看&＃xff0c;还是有一点优势的。
• 2.NativeScript在View上也做得不错&＃xff0c;UI上也跟现代的Angular / Vue做结合&＃xff0c;带来了很高的开发效率。除了原生的组件之外&＃xff0c;他还提供了一个CSS subset作为styling使用&＃xff0c;这让它在UI开发上比Native app更加方便。NativeScript一开始是使用Angular来做UI&＃xff0c;不过后来他们分离出了三种开发方式&＃xff1a;基本的js/ts、Angular、Vue&＃xff08;这就是为什么我没打算研究Weex的原因&＃xff09;&＃xff0c;而且三种方式都可以享受到data-binding的爽感。
• 3.NativeScript还有一个很大的优点&＃xff0c;它把TypeScript当成一等语言&＃xff08;NativeScript本身也是用TypeScript写成的&＃xff09;。不过想想这也是理所当然&＃xff0c;毕竟在使用反射机制的情况下&＃xff0c;如果没有TypeScript辅助&＃xff0c;光是API 反射就会搞死人&＃xff08;没接触过TypeScript的朋友&＃xff0c;就试想一下用记事本写Java的感觉吧&＃xff0c;哈哈。。。&＃xff09;

缺点&＃xff1a;

• 1.开发者要有一定程度的Native知识。因为NativeScript runtime是基于v8/JavascriptCore&＃xff0c;而不是Webkit&＃xff0c;所以你没有办法使用任何的WebAPI&＃xff08;除非有人帮你实现&＃xff09;。举例来说&＃xff0c;常见的XmlHttpRequest或fetch是属于Webkit这层的实现&＃xff0c;在NativeScript里就需要使用native平台上的实现来做封装&＃xff0c;这也加重了开发者对于Native相关知识的依赖。
• 2.它之所以没有红&＃xff0c;主要的原因是出现的时间点有点差。NativeScript刚推出没几个月&＃xff0c;还来不及成熟的时候&＃xff0c;React Native就夹带着React社群的超人气横空出世了。如果它能够早一点出现&＃xff0c;也许现今的版图分布会不太一样了。

网友对 NativeScript 的评价&＃xff1a;

如果本身是走Angular阵营的话&＃xff0c;NativeScript是一个相当值得尝试的东西。

Election

Electron&＃xff1a;PC跨平台。

Electron的前身叫做Atom-Shell&＃xff0c;本来是GitHub发布开源编辑器Atom时一并发布的副产物&＃xff0c;但是后来这个副产物的影响力远远的超过了Atom editor本身&＃xff0c;于是便改名为一个独立专案&＃xff0c;也就是现在的Electron。Electron的本质很简单&＃xff0c;就是Chromium&＃43;Node.js的组合&＃xff0c;两者之间透过ipc通讯。

优点&＃xff1a;

• 1.Electron至今已经很成熟了&＃xff0c;开发Electron app对js有一定水平的工程师而言就跟喝开水一样简单&＃xff0c;前端是一个完整的Web环境&＃xff0c;而且还是兼容性高、走在时代前端的Chromium&＃xff0c;可以使用各种先进的语法以及WebAPI&＃xff1b;而后端是Node.js&＃xff0c;而且版本也相当高。
• 2.Electron也不需要担心跟平台的互动性不足&＃xff0c;得利于丰沛的Node.js生态圈&＃xff0c;大部分你需要的功能都可以找到模块&＃xff0c;而像自动更新跟打包发布这些大多数App都需要的东西&＃xff0c; Electron跟他的生态圈也都帮你搞定了。就如同官网的标语&＃xff0c;Electron帮你处理了许多琐事&＃xff0c;你只要专心在核心功能的开发上就好了。

缺点&＃xff1a;

• 1.臃肿。你必须把完整的Chromium带进去&＃xff0c;所以最小的HellowWord压缩起来也要几十mb&＃xff0c;不过这其实对桌面软体而言不成问题。
• 2.消耗内存、以及启动时间问题。因为前端用的是Chromium的关系&＃xff0c;Electron在内存消耗上一直为人所诟病&＃xff0c;基本上开起来就吃个1xx mb内存是很正常的事&＃xff0c;应用复杂度高的话数字也会猛烈攀升。Electron团队应该是无能为力&＃xff0c;只能看Chromium未来能不能改善这个问题了。同样的&＃xff0c;Electron在启动时间问题上Electron团队应该是无能为力&＃xff0c;只能看Chromium未来能不能改善这个问题了&＃xff0c;Chromium的启动时间会成为一个瓶颈。

【小结】如果要开发一个桌面为主的跨平台app&＃xff0c;那Electron可以说是当仁不让的首选。不论是整体的成熟度、社群的热门程度、可用的资源、旗舰级的showcase&＃xff0c;从各方面来看都令人安心。

uni-app(底层使用Vue)

后来朋友推荐使用HBuilder工具&＃xff08;后来升级为HBuilderX&＃xff09;&＃xff0c;开发很方便&＃xff0c;然后我就去HBuilder工具官网搜索了一下&＃xff0c;发现了一个叫做uni-app的框架&＃xff0c;uni-app是一个使用Vue.js开发所有前端应用的框架&＃xff0c;开发者编写一套代码&＃xff0c;可发布到iOS&＃xff0c;Android&＃xff0c;H5&＃xff0c;以及各种小程序&＃xff08;微信/支付宝/百度/头条/ QQ /钉钉&＃xff09;等多个平台&＃xff0c;简直就是Web极致跨端口的工具&＃xff08;算不上真正意义的跨平台&＃xff0c;但是比前面的Cordova感觉要厉害一些&＃xff0c;毕竟多吃了纪几年饭&＃xff0c;研究出来的东西就是不一样啊。。。O(∩_∩)O哈哈~&＃xff09;。可以说uni-app是懒人必备吧&＃xff0c;它使用Vue.js编写你的业务代码。

先来说说它的优点&＃xff1a;

• 1.使用HBuilderX工具开发&＃xff0c;一键创建项目模板&＃xff0c;快捷方便&＃xff0c;HBuilderX和uni-app都是同一家公司推出的&＃xff0c;该公司还有其他一些框架&＃xff0c;都可以使用HBuilderX创建你要的项目类型以及编写你的代码。
• 2.uni-app对前端开发人员比较友好&＃xff0c;封装的组件和微信小程序的组件一毛一样&＃xff0c;熟悉小程序的朋友应该会觉得很不错。
• 3.uni-app拓展能力强&＃xff0c;封装了H5&＃43;,支持nvue&＃xff0c;也支持原生Android&＃xff0c;ios开发。可以将原有的移动应用和H5应用改成uni-app应用。uni-app的App端&＃xff0c;内置一个完整小程序引擎&＃xff0c;并补充了可选的weex引擎给对性能要求更高的开发者。这也是uni-app在App端能够正常运行微信小程序代码的原因。其他Web跨平台框架做不到这点。

再说说它的缺点&＃xff1a;

• 1.使用Vue开发&＃xff0c;你必须要熟悉h5&＃xff0c;vue&＃xff0c;小程序&＃xff0c;学习成本很高。如果不熟悉这些话&＃xff0c;需要花时间学习新框架&＃xff0c;比如小程序、Vue都要学习。
• 2.uni-app问世的时间还比较短&＃xff0c;移动端平台的兼容性有很多地方还不是完善&＃xff0c;坑很多&＃xff0c;在Android平台上表现较微信小程序和iOS上差&＃xff0c;需要完善。
• 3.性能还是一个问题。毕竟uni-app底层使用的js&＃xff0c;就算能够编译成原生程序&＃xff0c;那个性能和兼容性方面也是个问题&＃xff0c;如果只是做Web还行&＃xff0c;小程序什么的还算出色。

React Native(底层使用React)

小弟算是第一批把React Native用在生产环境上的人&＃xff08;当时是0.0.3版&＃xff0c;第一个public版&＃xff0c;想想我当时胆子还真大&＃xff09;。

ReactNative没有像NativeScript一样做反射&＃xff0c;而是建构了一组RCTBridge&＃xff0c;用来做js跟native之间的交互&＃xff0c;要使用native API或native 组件的话都要在native层做桥接&＃xff0c;然后导入到js里面&＃xff08;类似你写Node的C&＃43;&＃43; addon的感觉&＃xff09;。

优点&＃xff1a;

• 1.ReactNative能有今天的反响&＃xff0c;很大一部分是得利于React生态圈的整体发展优势&＃xff0c;以及有Facebook已经在他们的app上做过产品实践&＃xff0c;这对很多人而言是一剂强心针&＃xff0c;再加上诸如Airbnb&＃xff0c;Uber等大型公司也纷纷采用&＃xff0c;更造成了推波助澜的效果。
• 2.打出来的包会比NativeScript的小&＃xff0c;架构实现上也比较单纯。因为ReactNative没有像NativeScript一样做反射&＃xff0c;而是建构了一组RCTBridge&＃xff0c;用来做js跟native之间的交互&＃xff0c;所以打出来的包会比NativeScript的小&＃xff0c;架构实现上也比较单纯。
• 3.ReactNative当初出现时打的口号是“learn once, write everywhere”&＃xff0c;让不同平台上保有不同的平台特性。这个中心思想所带来的架构设计&＃xff0c;让ReactNative可以很轻易的扩展到其他平台上&＃xff0c;例如第三方开发者实现的react-native-macos、react-native-appletv&＃xff08;后来被整合进官方里&＃xff09;、微软官方开发的react-native-windows&＃xff08;原名是uwp&＃xff09;、Samsung官方的react-native-tizen&＃xff0c;几乎可以说所有平台上都可以看到ReactNative的影子&＃xff0c;具体是否成熟有待研究。

缺点&＃xff1a;

• 1.ReactNative目前其实还不算是在一个稳定的状态&＃xff0c;他们每两周都会更新一次&＃xff0c;这也是开发时要注意的一点。
• 2.你必须拥有native platform相关的知识。应该说&＃xff0c;自从Cordova之后的主流跨平台方案都会要求要具备一定程度的平台原生相关知识。虽然说比起NativeScript&＃xff0c;ReactNative在没有任何的原生知识的情况下也是可以编译打包生成一个可用的app&＃xff0c;但是这会大大的限缩了你的可扩展性&＃xff0c;而且在不了解原生的渲染以及运作方式的情况下&＃xff0c;可能会不小心让CPU发烫成了定时炸弹。
• 3.每个native module都要自己桥接一次&＃xff0c;非常麻烦。
• 4.性能差&＃xff0c;卡顿严重&＃xff0c;远比不上native应用性能。

Weex(底层使用Vue)

weex资料太少了&＃xff0c;我就不做介绍了&＃xff0c;反正我是踩过坑的&＃xff0c;后来放弃weex了&＃xff0c;文档不齐全&＃xff0c;API缺少&＃xff0c;扩展功能不完善&＃xff0c;性能也好不到哪里。。。

Flutter

Flutter是谷歌推出的一个全新的高性能高一致性的跨平台的开发框架。

【优点&＃xff1a;】

• 1.你只需要使用Dart语言写一套代码&＃xff0c;即可自动编译到各个平台&＃xff0c;目前支持Android,iOS,Web(Beta)&＃xff0c;Desktop(Alpha)&＃xff0c;当然也有Windows PC和linux平台的兼容支持官方正在研发中。所以你完全不用担心框架内部是如何帮你实现的。你只需要一个命令行就可以在对应平台运行你的代码了&＃xff0c;比如&＃xff1a;flutter run xxx&＃xff0c;这里的xxx指的是你的平台设备名称&＃xff0c;比如“flutter run chrome"表示将程序运行在浏览器上面。
• 2.独立的Skia渲染引擎&＃xff0c;高性能高一致性。你的代码编译出来的程序可以达到60bps的高性能。
• 3.丰富的组件支持&＃xff0c;你完全可以按照你的想法去做&＃xff0c;扩展性非常强大&＃xff0c;MD风格的&＃xff0c;以及ios风格的组件都有&＃xff0c;足够满足平时开发需求。而且Flutter基于react以及flex的思想进行布局。
• 4.丰富的社区支持。目前常用的组件以及一些第三方包都有大佬开源出来了&＃xff0c;足够应对平时的开发了。如果你不清楚的话&＃xff0c;也没关系&＃xff0c;我特意收集了Flutter工具集合&＃xff0c;这里面啥都有&＃xff0c;足够让你可以快速找到你要的东西&＃xff0c;你可以点进来看看&＃xff1a;AweiLoveAndroid/Flutter-learning
• 5.开源免费的。你可以随意修改内核引擎代码&＃xff0c;以及组件代码&＃xff0c;定制化的开发&＃xff0c;比如闲鱼&＃xff0c;腾讯&＃xff0c;字节跳动等大厂都基于Flutter进行针对他们的App开发做了定制化的整合方案&＃xff0c;当然你要是感兴趣的话&＃xff0c;你也可以这么做。
• 6.使用Dart语言进行开发。Dart语法很像JS&＃43;Java&＃43;Swift&＃43;Kotlin&＃43;C#&＃43;TypeScript&＃43;Javascript&＃43;PHP&＃xff0c;虽然表面上没有使用web开发&＃xff0c;但是你完全不用担心&＃xff0c;你仍然可以进行开发&＃xff0c;只是语言写法不一样&＃xff0c;但是这里面很多都是熟悉的东西&＃xff0c;基本上上手成本也是很低的。

• 更多干货请查看&＃xff1a;https://edu.csdn.net/combo/detail/1533

【缺点&＃xff1a;】

如果不熟悉原生开发&＃xff0c;第三方包满足不了你的需求的时候&＃xff0c;那么就需要你自己去写或修改已有的插件&＃xff0c;这个需要学习一点原生开发的知识&＃xff08;其实这也是很多跨平台技术必不可少的步骤&＃xff09;&＃xff0c;当然如果你们公司有android或ios的程序员&＃xff0c;可以让他们协助写一个插件&＃xff0c;这对于他们来说都是小问题。

网友对 Flutter 的评价1&＃xff1a;

Flutter是Google的亲儿子&＃xff0c;目前最火爆的跨平台框架&＃xff0c;也是跨平台框架中最接近原生的一种框架&＃xff0c;也是效率最高的。目前应用在移动端(安卓端&＃xff0c;iOS端)&＃xff0c;Web也发布了预览版&＃xff0c;但是还无法真正放在小程序或者Web项目中实战。目前来看&＃xff0c;Web上面还是无法真正的替代ionic框架。虽然脱离了JS强大的社区,但是这一年多以来Dart语言社区也在逐渐长大&＃xff0c;pub.dev上面各种Flutter和Dart的开源库和工具都有&＃xff0c;开发项目起来还是不错的&＃xff0c;只是Flutter Web发展还不够完善&＃xff0c;很多Web的一些包一级浏览器的功能还不完善。

网友对 Flutter 的评价2&＃xff1a;

我是做前端的&＃xff0c;我朋友是移动端的&＃xff0c;他走的Flutter路线&＃xff0c;他是做安卓开发的&＃xff0c;用的java&＃xff0c;他说Flutter接近原生体验&＃xff0c;非常好。而我们公司需要快速上线&＃xff0c;还是走的是WebView的路线&＃xff0c;我和他同时做一个小Demo出来对比了一下&＃xff0c;发现App的性能体验真的很大&＃xff0c;排序如下&＃xff1a;原生 >&＃61; Flutter > WebView。

## 最后来提几个问题&＃xff1f;

1.跨平台最难的就是各平台之间的差异性这个问题如何解决&＃xff1f;

2.Cordova 和 RN, NativeScript 有什么不同呢?