混合开发

概述

随着移动开发的发展，互联网公司也是层出不穷，有些公司迫于竞争，想要更迅速的更省成本的进行开发，就不再满足 Android 端一套代码，iOS 端一套代码。与此同时，其他技术领域和各大公司也都觊觎着这份大蛋糕，纷纷推出相关的技术，这样跨平台技术应运而生，并且开始在公司中生根发芽。跨平台技术分为 5类，分别 Web App、Hybrid App、语言编译转换、原生渲染、自绘 UI。

Web App

Web App 是指基于 Web 的应用，运行于网络和标准浏览器上，相当于一个网页然后加一个 App 的壳。这种实现方式性能低、用户体验差，无法调用手机原生 API，很多功能无法实现。

Hybrid App

采用 HTML5 + 原生来进行混合开发，这就是 Hybrid。Hybrid App 虽然开发效率高，可以跨平台，但是 Hybrid 体验比不上原生，对于快速开发来说，Hybrid App 是一个不错的选择。
Hybrid 相关的技术有很多，比如 PhoneGap、Cordova、Ionic、VasSonic 等等。

1.微信小程序

微信小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。
小程序的运行环境分成渲染层和逻辑层，这两层分别由 2 个线程管理，渲染层的界面使用了 WebView 进行渲染，逻辑层采用 JsCore 线程运行 JS 脚本。这两个线程的通信会经由微信客户端（Native）中的 JSBridage 做中转。逻辑层发送网络请求也经由 Native 转发，小程序的通信模型下图所示。

其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
微信小程序和 PWA 都是基于 Web 技术，原理的区别是小程序类似 Hybrid 架构，WebView 渲染基本的网页内容，对渲染性能要求较高的组件，通过原生组件来实现，比如相机、视频、地图等等，另外传统 Web 无法访问的本地能力，需要通过 JS SDK 来实现，而 PWA 则是使用多种技术增强 Web 能力，以达到接近 Native 应用的体验。
微信小程序本身和 App 就不是竞争关系，更多的是一个推广渠道，它更像是一张海报，用于快速推广倒流，而 App 则是要推广的对象。微信小程序的缺点很明显，体验上无法跟 App 相提并论，功能依托并受限于微信，无法进行拓展。可以说微信小程序就是建立了次级生态，这个生态中微信说的算，其他对手的发展会受到限制。

语言编译转换

。。。

原生渲染

原生渲染在本篇文章中指的是由 JavaScript 开发并且由原生控件渲染，代表有 React Native、Weex、快应用。

1.React Native

React Native 是 Facebook 早先开源的 Web UI 框架 React 在原生移动应用平台的衍生产物，底层对 Android 和 iOS 平台的原生代码进行封装，通过使用 JavaScript 就可以编写出原生代码。

Virtual DOM 是 DOM 在内存中的一种轻量级表达方式，可以通过不同的渲染引擎生成不同平台下的 UI。React Native 与原生框架通过 Bridge 进行通信，如果使用 Chrome 浏览器进行调试，那么所有的 JavaScript 代码将运行在 Chrome V8 引擎中，通过 WebSocket 和原生代码进行通信。

2.Weex

Weex 是阿里开源的一款跨平台移动开发工具，它能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出原生级别的性能体验，并支持 iOS、Android、YunOS 及 Web 等多端部署。目前 Vue.js 和 Rax 这两个前端框架被广泛应用于 Weex 页面开发，因此 Weex 支持 Vue 语法和 Rax 语法，而 React Native 只支持 JSX 语法。

Weex 首先将编写的 Weex 源码，通过 transformer 转换成 JS Bundle。然后将 JS Bundle 部署在服务器，当接收到终端（Android、Web 端、iOS 端）的 JS Bundle 请求时，将 JS Bundle 下发给终端。在终端中，由 Weex 的 JS Framework 接收和执行 JS Bundle 代码，并且执行数据绑定、模板编译等操作，然后输出 JSON 格式的 Virtual DOM，JS Framework 发送渲染指令给 Native ，提供 callNative 和 callJS 接口，方便 JS Framework 和 Native 的通信。

3.快应用

由小米，OPPO，VIVO，华为等 10 家国内主流厂商成立了快应用联盟。快应用介于移动网页和原生应用之间，第三方应用以移动网页的形式进行开发，最终得到原生渲染的效果体验。快应用框架深度集成进各手机厂商的手机操作系统中，可以在操作系统层面形成用户需求与应用服务的无缝连接，很多只用在原生应用中才能使用的功能，在快应用中可以很方便的实现，享受原生应用体验，同时不用担心分发留存等问题，资源消耗也比较少。对于每台手机设备，应用可以从多个系统入口，引用用户体验产品。

与 React Native 和 Weex 相比主要有两点不同：
1.快应用自身不支持 Vue 或 React 语法，它采用的是 JavaScript 开发。

2.React Native 和 Weex 的渲染引擎是集成到框架中的，每一个 APP 都需要打包一份，安装包体积较大，快应用渲染引擎是集成到 ROM 中的，应用中无需打包，安装包体积小。和微信小程序很像，快应用本质上也是要建立次级生态，快应用的架构如下图所示。

快应用实现划分为编译时、运行时两个方面，UX 页面源码经过编译时得到 JS，然后经过运行时得到界面 UI。每一个页面由 HTML+CSS+JS 组成，编译运行后得到内存中的 DOM 树。多个页面组成一个项目，编译后得到 rpk 文件，最终运行时以应用形态呈现。
快应用推出 1 年后仍然不温不火，面对微信小程序，快应用在流量和入口等关键数据都无法与小程序匹敌，未来发展堪忧。

自绘 UI

自绘 UI 指的是通过在不同平台实现一个统一接口的渲染引擎来绘制 UI，而不依赖系统平台的原生控件，这样做可以保证不同平台 UI 的一致性。不用像 React Native 一样，随着不同平台系统版本的变化，开发者还需要处理不同平台的差异，甚至有些特性只能在单个平台上实现，这样无法保证不同平台 UI 的一致性。自绘 UI 框架的代表有 Qt 和 Flutter。

1.Flutter

Flutter 是谷歌的移动 UI 框架，可以快速在 Android 和 iOS 上构建高质量的原生用户界面， 它的前身是谷歌试验项目 Sky。
Futter 提出了一切皆 Widget 的概念，除了基本的文本、图片、卡片、输入框，布局方式和动画等也都是由 Widget 组成的。通过使用不同类型的 Widget，就可以实现复杂度的界面。

Flutter 框架采用了分层设计，此设计的目标是帮助开发者使用更少的代码完成更多工作。例如，Material 层是由 widgets 层的普通 widget 组成的，而 widgets 层本身是通过来自 rendering 层的低级对象构建的。目前在 Flutter 基础上开发的框架已经开始出现，这也证明了业界普遍开始认可 Flutter，并开始进行尝试。

尽管Flutter作为Google爸爸的亲儿子，本质上，它和react-native, weex没有任何区别，它们仅仅是UI框架，它解决的是跨平台上UI的统一实现，仅此而已。

Fluuter不会有多少专门针对某平台的支持。包括 Android，更别提iOS，所以，使用 Flutter 也是离不开原生开发的。将不同平台的差异功能包装成跨平台的 Flutter 包，这种东西叫做插件，插件里边都是各平台的原生 API 调用代码。Flutter 连申请一个权限都做不到，你怎么替代原生？

也许国外很多公司都已经在开始用 flutter 开发了，国内的话，手机品牌太多了。去 issue 区搜搜，xiaomi 和 huawei，至少每个关键词有100 个未解决的 issue 吧，skia 本身也有一些兼容性问题。

另外，Flutter使用Google自主开发的Dart语言，任何一门新语言，都有它的学习成本，即使你现在Flutter已经学得出神入化，但是一行Java代码都不会写，就想在公司开发Android？抱歉，没有公司会要你的.....

引用一位大佬的话，能干掉平台的只有平台，除非Android有一天被取代，否则，原生开发的地位应该是不会轻易动摇。