引言

时下流行的移动Web应用可分为三种：原生应用、Web应用和混合型应用。

原生应用：通过各种应用市场安装，采用平台特定语言开发。

Web应用：通过浏览器访问，采用Web技术开发。

混合型应用：通过各种应用市场安装，但采用Web技术开发。它虽然看上去是一个原生应用，但里面访问的实际上是一个Web应用。

本文所讲的Cordova，Cordova正是混合型框架中的佼佼者，它基于标准的Web技术——HTML、JavaScript和CSS，用JavaScript包装平台的API供开发者调用，具备强大的编译工具来为不同平台生成应用，同时拥有丰富的第三方资源和产业链。

个人还有一些观点是，只能包装纯HTML/CSS/JS,动态网站jsp,asp,php等是打包不了的，但是，因为前端兴起的SPA单页面应用，配合服务端也能起到动态网站的作用，所有这并不影响它的影响范围。

另一方面Cordova等和React native、Week、Flutter又不太一样，后者已经比较接近原生app了，甚至近来Flutter的热度是愈来愈大。

安装

Cordova安装时是要借助npm平台，故需先安装node，若你之前没有安装，可以到node官网根据自己电脑下载安装node.js

已经安装了node后，在控制台用命令全句安装Cordova：

1	npm install -g cordova

如果要安装并配置相关平台的环境变量，若要打包Android APP，则需要安装jdk和安装sdk，和配置相关环境变量，下面会提到。

基本打包操作

注：本文主要通过打包Android应用，来讲解。

1.创建一个cordova项目

如创建一个名为cordovaApp的工程(以下操作代码均为控制台输入命令)：

1	cordova create cordovaApp

有些也可以通过下面命令安装也是一样的

1	cordova create cordovaApp com.cordovaApp.app cordovaApp

说明：

第一个cordovaApp 表示文件夹的名称

第二个com.cordovaApp .app 表示项目id

第三个cordovaApp 表示项目名称

进入项目目录

1	cd cordovaApp

项目文件目录：

注：www文件夹下的HTML/CSS/JS文件即为本项目Web应用，你可以在其基础上开发，也可以将自己已经写好的web应用（单页面应用打包好的文件也可以）替换默认的。

2.添加安卓平台

1	cordova platform add android --save

3.创建Android应用

1	cordova build android

4.打包成品查看

手机连接在电脑上，运行该 Android 程序 :

1	cordova run android

或者将 项目\platforms\android\app\build\outputs\apk\debug下的apk包，安装到手机上即可

看，一共才几步，就能让一个网页应用，打包出成一个手机上应用的Android APP,甚至是ios APP, windows 应用等。是不是很实用很简单？

当然没那么简单，运行命令是不是一大堆错误？有错误就不错啦，人家一大堆英文还不知道出了什么问题呢，如果上面几步都没有出错且最后能得到可用的安装包，那恭喜你，你要么很幸运，要么就是有其平台的开发经历。

总结一下常见的几个问题：

解决问题

在第二步添加安卓平台之后，第三步之前，可以先通过下面的命令查看当前电脑的Android平台的配置是否有问题：

1	cordova requirements

如果像像上面一样出现乱码，可以先执行chcp 437命令再执行cordova requirements

chcp 437

可以看出4个配置项：Java JDK、Android SDK、Android target、Gradle。

但其实没有在本机上配置好环境变量的话，会报对应项的错误，有android开发经历的会省不少事，博主在这之前也接触过Android的原生app开发，故并没有那么多问题。

配置环境变量

安装jdk

1.系统变量→新建 JAVA_HOME 变量。

变量值填写jdk的安装目录（这里是 D:\Program Files\Android\jdk)要根据自己安装的

2.系统变量→新建 CLASSPATH变量

输入.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

3.系统变量→编辑PATH的变量

输入：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

安装sdk

1.用户变量→新建ANDROID_HOME变量

输入：变量值填写jdk的安装目录（本人是D:\sdk)

2.用户变量→编辑PATH的变量

输入：%ANDROID_HOME%\platform-tools

SDK配置安装及更新

如果环境变量都配置好了之后，再执行cordova requirements试试：出现乱码，可以先执行chcp 437命令再执行cordova requirements

有时候可能Android target配置项可能会出现问题，而且会很友好的告诉你是去怎么解决，博主现在一时找不到错误的图，就是告诉你通过android.bat解决，然后列出几项更新及安装问题（一般是3项）

这种情况就是去找到你SDK目录下的tool>android.bat文件，

你的可能跟我的不一样，是因为SDK版本问题，不必担心，能打开android.bat就行

双击点开，等待一会儿，会出现一个程序窗口

在这里根据之前的几项更新及安装问题去更新或安装相应项。

直到通过命令行cordova requirements能够得到成功的配置（无报错）

第三步打包也可能出问题

注：这里会出错的人可能很少

终于得到成功的配置（无报错）后

满心欢喜开始创建Android应用

1	cordova build android

看似没出什么问题，但 项目\platforms\android\app目录下根本找不到apk文件，

打包信息一大堆在控制台，我也找不到图，就这样想象吧，哈哈

你细心看一下打包信息就能会发现可能说一些sdk配置不是低于最低版本，这时候依然是根据上面的SDK配置安装及更新来更新sdk配置。

举例

有时候你把项目移动了复制到别的路径下了（即跟最初创建项目的路径不一致时），打包会出错，

记得生成项目后别乱移动项目就是

结语

问题不多不少，还有上面没总结到的。

如果有其他平台开发经历的话，用起来是非常方便的，而且很实用，能让你前端的web应用这么快的打包成一个手机应用，是前端开发者的一大庆事，毕竟Flutter学习成本那么大不是，无奈。

温馨提示：既然是要打包成手机应用，那你的web应用至少要做成移动窗口下也能排版正常才好哦。

混合型应用之Cordova