hybrid App原理介绍、环境搭建、打包（Cordova）及常见错误解析（windows环境）

因为在学习Hybrid App开发技术，我自己之前是基本没了解过Hybrid App开发的，也是从零开始。这篇文章就介绍，如何从零开始，然后一步一步把web App打包成Android应用的。

hybrid App，Web App，native App定义

1、Web app

Web App就是运行于网络和标准浏览器上，基于网页技术开发实现特定功能的应用。（我们现在的几个产品都是Web App）

优点：开发速度快，程序更新方便。

缺点：无法访问本地数据（摄像头，获取定位，文件读写等等），有些展现不如Native App流畅。

2、Native app

也叫本地app，一般使用的开发语言为JAVA、C++、Objective-C，使用原生程式编写运行的第三方应用程序。（程序中不包含网页访问）

优点：用户交互友好，可离线使用。

缺点：开发速度较慢，无法跨平台。

3、hybrid app

是Native App和Web App的结合，相当于在Native App中嵌入了浏览器（内核），即可以访问本地数据，又可以展示网页。

优缺点是Web App和Native App的折中吧。

原理介绍及实例解析

原理图如下所示


图中标注的 1 和 2 两部分组成了Hybrid App。

1、可以看做Native App，就是一层外壳，根据业务不同，这一层壳可厚可薄。

2、Webview控件或html渲染引擎（可以看做嵌入的浏览器内核等等，用来解析页面）

所以总结起来，hybrid App可以看在native app中嵌入如何web页面的渲染引擎，这样hybrid app即可以访问web站点应用，又可以访问本地数据（摄像头，定位数据等等），兼具了native app和web app的一些优点。

html页面访问本地数据的流程：js调用native app接口，native app调用操作系统接口，，这样html页面就可以访问本地数据了。

例子解析:

我们打开天猫app，分别在有网络和无网络的时候进入天猫国际，如下：



通过两幅图片的对比可以看出，这是hybrid app，在app中访问了网页。

框架介绍

1、IONIC

2、phonegap

3、ApiCloud

4、MUI

5、React Native

react native 与其他框架有些不同，它的目标是经过编译转换后，生成的是native app（纯原生app），而非Hybrid app。最近部分公司（Airbnb等）弃用react native，达不到部