浅谈App Hybrid混合开发的五种方案

在移动互联网时代来临之后，以微信、淘宝为代表的app迅速占据了我们的手机，诺基亚的迅速灭亡，苹果手机异军突起，以iOS、安卓的客户端开发需求迅速增大，导致iOS、安卓的工程师们成了香饽饽，工资高，工作好找。在之间还经历过一段windows phone，后来随着诺基亚的灭亡，也就死透了。

现在只剩下安卓和iOS两大阵营了，同样由于是两个不同的系统，同样的一个应用需要开发两遍，抛开人力成本的成倍增加，由于是不同团队所开发，所以在细节的实现上，和应用的一致性都会产生问题。

所以急需一种只需开发一次，能够运行两端的技术方案。在PC端，浏览器无疑是最好的跨端应用解决方案，我们只需开发一个web应用，只要在windows、mac、linux上有浏览器就可以运行。

原生 + webview 方案

在移动端中也是一样的道理，只要在安卓和ios中通过webview加载web应用就能达到开发一次，运行两端的目的。

但webview也有其缺点，web应用的体验无法达到原生应用的体验。但其开发效率高，被很多app所使用，做一些非核心业务的页面。

纯webview方案

为了更加快速的开发app，也诞生了一些以webview为主的框架，比如最早的phonegap，以web开发为主，并通过原生插件来提供原生功能，像摄像头、通讯录、地理定位、存储等功能。

现在常用的有ionic框架，支持angular、react、vue框架进行开发。

web技术 转换原生组件

由于webview的性能体验问题，和mvvm框架的成熟，react发布了react native，它的口号是learn once，write anywhere。react native让我们使用react框架来开发移动应用，它采用固定的组件和CSS，然后将其专转换为原生组件进行渲染，体验方面更加接近于原生应用。

react native可以和原生应用进行混合开发，也可以只采用react native进行开发。

现在很多的app也都会采用rn混合这种方案，只有少量的webview页面。

flutter 自绘引擎

react native也并不是完美的解决方案，由于其为使用js编写ui界面，在渲染的时候进行将js转换为原生的ui，所以进行复杂计算面，大数据量，或者动画时，就会产生一定的性能问题，增加应用的耗电量或页面卡顿等问题。

由google开源的flutter颠覆了这一切，它并没有采用js转原生组件的方式，而是使用google的dart语言和自带的skia渲染引擎来开发ui界面。这就相当于他开发一个浏览器，并且还规定了开发ui组件的语言（dart）和api，全部都是自己的，所以高性能成为了其最大的优势，完全可以和原生开发体验相差无几。

flutter最开始时只支持Android和iOS两个平台，现在不仅增加了web平台，桌面端Windows、macOS和Linux应用程序，还有智能设备、可穿戴设备和车载设备等嵌入式应用。

颇有有一统天下的格局，这种产品恐怕也只有Google能够做出来。

小程序方案

小程序方案应该是微信最早发布的，并且大规模使用的。小程序方案是基于webview进行渲染，通过将web资源进行离线存储进行加快加载。但离线存储也不能解决全部问题，页面加载大量的CSS或者JavaScript依然会有白屏的问题。所以小程序的逻辑层和渲染层是分开的，而非像网页中渲染线程和脚本线程是互斥的，大量的脚本会导致页面失去响应。

随着微信小程序方案的逐渐成熟，各大app也争相效仿，支付宝小程序、百度小程序、抖音小程序等等。

总结现在主流方案

目前主流的大型app也无外乎上面几种方案

1、原生 + rn混合开发，比如网易云音乐app，参考文章:https://segmentfault.com/a/1190000023860988

2、原生 + flutter 混合开发 比如闲鱼app，参考文章：https://www.infoq.cn/article/xianyu-cross-platform-based-on-flutter

3、原生 + 小程序，比如微信、支付宝、抖音、头条等。

4、上面几种方案的任意混合

欢迎我的公众号【小帅的编程笔记】，让我们在前端的路上越走越远