移动端跨平台方案比较

跨平台技术分类

• hybrid(ionic，vant，微信小程序)
• javascript开发+原生渲染(react native，weex)
• 自绘UI+原生(QT ，flutter)

hybrid混合开发(H5+原生)

    这类框架原理是将APP一部分需要动态改变的内容通过H5来实现，通过原生的网页加载控件WebView(Android)或WKWebView(IOS)来家在。这样H5的部分就可以随时修改不用发班，满足东台话改动的需求。同时，H5代码只需开发一次，就可在Android和iOS两个平台运行，减少开发成本。这类h5+原生的开发模式成为混合开发模式，开发的应用称为Hybrid APP。

混合开发技术点

如之前所述，原生开发可以访问平台所有功能，而混合开发中，H5代码是运行在WebView中，而WebView实质上就是一个浏览器内核，其JavaScript依然运行在一个权限受限的沙箱中，所以对于大多数系统能力都没有访问权限，如无法访问文件系统、不能使用蓝牙等。所以，对于H5不能实现的功能，都需要原生去做。而混合框架一般都会在原生代码中预先实现一些访问系统能力的API， 然后暴露给WebView以供JavaScript调用，这样一来，WebView就成为了JavaScript与原生API之间通信的桥梁，主要负责JavaScript与原生之间传递调用消息，而消息的传递必须遵守一个标准的协议，它规定了消息的格式与含义，我们把依赖于WebView的用于在JavaScript与原生之间通信并实现了某种消息传输协议的工具称之为WebView JavaScript Bridge, 简称 JsBridge，它也是混合开发框架的核心。

React Native

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和Android两个平台。

DOM树与控件树

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口，一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的标准接口。简单来说，DOM就是文档树，与用户界面控件树对应，在前端开发中通常指HTML对应的渲染树，但广义的DOM也可以指Android中的XML布局文件对应的控件树，而术语DOM操作就是指直接来操作渲染树（或控件树）， 因此，可以看到其实DOM树和控件树是等价的概念，只不过前者常用于Web开发中，而后者常用于原生开发中。
React Native 是React 在原生移动应用平台的衍生产物，那两者主要的区别是什么呢？其实，主要的区别在于虚拟DOM映射的对象是什么？React中虚拟DOM最终会映射为浏览器DOM树，而RN中虚拟DOM会通过 JavaScriptCore 映射为原生控件树。
JavaScriptCore 是一个JavaScript解释器，它在React Native中主要有两个作用：

• 为JavaScript提供运行环境。
• 是JavaScript与原生应用之间通信的桥梁，作用和JsBridge一样，事实上，在iOS中，很多JsBridge的实现都是基于 JavaScriptCore 。
  而RN中将虚拟DOM映射为原生控件的过程中分两步：
• 布局消息传递， 将虚拟DOM布局信息传递给原生；
• 原生根据布局信息通过对应的原生控件渲染控件树；

至此，React Native 便实现了跨平台。 相对于混合应用，由于React Native是原生控件渲染，所以性能会比混合应用中H5好很多，同时React Native使用了Web开发技术栈，也只需维护一份代码，同样是跨平台框架。

FLutter

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

总体来说，相比于React Native框架，Flutter的优势最主要体验在性能、开发效率和体验两大方面。

React Native所使用的JavaScriptCore，原本用在浏览器中，用于解释执行网页中的JavaScript代码。为了兼容Web标准留下来的历史包袱，无法专门针对移动端进行性能优化。Flutter却不一样，它一开始就抛弃了历史包袱，使用全新的Dart语言编写，同时支持AOT和JIT两种编译方式，而没有采用HTML/CSS/JavaScript组合方式开发，在执行效率上明显高于JavaScriptCore。

除了编程语言的虚拟机，Flutter的优势还体现于UI框架的实现上。它重写了UI框架，从UI控件到渲染，全部重写实现了，依赖Skia图形库和系统图形绘制相关的接口，保证了不同平台上能有相同的体验。
Flutter利用Skia绘图引擎，直接通过CPU、GPU进行绘制，不需要依赖任何原生的控件。【Andriod操作系统中，编写的原生控件中实际上也是依赖于Skia进行绘制，所以Flutter在某些Andriod操作系统上甚至还要高于原生-因为原生Andriod中的Skia必须随着操作系统进行更新，而Flutter SDK中总是保持最新的】

Flutter 在业务层面的发展阻力

Flutter 多端一致性上表现良好，能做到所见即所得，无需针对某一平台做额外适配工作；性能流畅度提升，相较于 H5 版本首屏时间有较大提升。

1. Flutter 采用的是 Dart 语言，没能引入前端成熟的生态体系
   作为前端工程师可能更希望是 Flutter 上层采用的是 JavaScript 或者 TypeScript，未来可考虑提供高性能的 Dart 与 JS 互转能力。另外，Flutter 开发对于前端开发工程师而言，还是有一些挑战的，纯前端不一定能 Cover 的技术，比如 Flutter 的一个硬件相关的 Plugin 只在某款手机出现 Bug，如果社区没有现存解决方案，可能就需要花比较大的时间成本去学习 Native 技术，或者请教客户端工程师。

2. 开源库相对比较欠缺，更新频次不足
   Flutter 生态还不够完善，新业务接入需要自己造轮子，尤其是在业务团队对 Flutter 掌握不够熟练的情况下，会增加额外的成本，Flutter 在大中型企业会更容易推广起来，有人力可以去造轮子让公司内其他的业务复用；另外，Flutter 文档有点少，能借鉴的经验不多，未来需加强和鼓励更多开发者加入到生态共建。

3. 跟原生系统生态存在着一定的竞争关系
   有朋友跟我说起过这样一件事，看到 Flutter 这么火，Android 开发团队就问他，“大家为什么要用 Flutter 开发 App，我们 Android 哪一点不好，告诉我们，我们可以改进它”。姑且不说他们对跨平台理解不够，但至少能看出原生平台对跨端技术的担忧，不少 Android 团队在推出 Kotlin Multiplatform ，希望能争夺更多市场。 另外，苹果商店的审核风险也是大家所担忧的，官方的公告原意是说应用程序的核心特性和功能必须包含在软件的二进制文件中，而不是通过类似 HTML5 的技术来实现动态更新，苹果要打压的是动态更新技术，考虑到 Flutter 的合规性，Google 主动把 Flutter 的 iOS 动态化能力去掉了，Flutter 最终打包生成的产物就是 IPA，Flutter 其实是完全符合规范的，甚至还有使用 Flutter 开发的应用还被 Apple 推荐过。相反，React Native、Weex、H5 等技术都是一种动态化解决方案，这正是苹果要管控的，目前苹果的态度更多的是不提倡，但也不保证不封杀。即便如此，苹果不希望原生开发生态被其他跨平台技术抢占，苹果也在不断推行 SwiftUI 框架，力图抵挡 Flutter 等跨平台技术对原生开发的蚕食。Flutter 未来要加强推进步伐，让更多的大型 App 通过 Flutter 技术得到收益，只有用户群体上来，未来的地位和话语权才会更高，就像现在小程序，原则上是不符合苹果的审核要求的，但各大型应用基本都上线了小程序功能，目前来看不至于说苹果把小程序直接干掉。

三种技术的对比