小白心得：将编好的网页封装成APP

如何将写好的HTML页面封装成APP以及如何在虚拟模拟器上打开。

由于博主也是一个徘徊在APP开发门外的一名路人，这篇博客仅供小白参考（文章太过粗糙，仅仅是参考）。

要知道，目前市场上有很多APP是采用H5编写的界面，或许是因为原生开发对于前端的灵活性并不是那么符合目前市场上的需求，因此在这里介绍如何使用Apache Cordova和Ant将网页封装成Android APP。在使用Cordova之前，我们需要安装一下四项工具：

NodeJS
JAVA的JDK
Android的SDK
Apache Ant

JDK和SDK的安装这里不再赘述，不知道的同学自行百度。

安装Apache Ant：http://ant.apache.org/bindownload.cgi

进入网页后，点击zip的链接进行下载，版本选择最新的即可。

Ant不需要安装，下载解压即可。

设置用户变量

JDK、SDK、Ant都准备好之后，必须在系统环境变量中指定工具路径。右键计算机----属性----高级系统设置----环境变量

在系统变量区单击“新建”按钮。

在“变量名”输入JAVA_HOME（变量名可自己定义），在“变量值”中输入你电脑上的JDK的存放路径。博主的路径如下：

确定之后，再次点击新建，设置SDK的变量。在“变量名”输入ANDROID_SDK（变量名可自己定义），在“变量值”中输入你电脑上的SDK的存放路径。博主的路径如下：

接下来是设置Apache Ant的用户变量。

三个变量新建完成之后，还要设置Path变量的变量值。

在Path中的变量值输入如下4个路径，每个路径变量之间以英文分号 ; 隔开。（新变量与原来的变量直接同样要以分号隔开）

%JAVA_HOME%\bin\
%ANT_HOME%\bin\
%ANDROID_SDK%\tools\
%ANDROID_SDK%\platform-tools\

三个必要工具安装完成以后，打开命令提示符窗口（cmd），检查工具是否安装成功。测试命令分别是：

java -version
ant -version
adb version (此处没有间隔符-)

如果三个工具安装成功，会分别显示版本信息，如果某一项没有安装成功，命令行会显示“不是内部或外部命令，也不是可运行的程序或批处理文件”。如果是找不到命令，大多数是因为你的变量设置路径的时候不正确。查看一下是否路径写错或者遗漏。

通过npm安装Cordova

在此之前我们还要先安装NodeJS，下载地址：http://nodejs.org 打开官网之后单击install，下载并安装NodeJS。安装完成之后，就可以使用npm命令去安装Cordova。打开CMD窗口（避免安装出现错误，建议以管理员身份打开CMD，右键cmd----以管理员身份运行）。输入下列语法安装Cordova

npm install -g cordova

NodeJS安装完成时会自动增加环境变量，如果上述命令无法执行，检查一下你的Path变量中有没有自动添加进去。

Cordova安装完成之后，打开AVD Manager新建安卓模拟器

AVD Manger应用程序一般在SDK目录下可以找到，找不到的同学（比如博主的SDK目录就是没有AVD Manager），可以从AndroidStudio里面直接点击打开。如下图红圈所示：

打开之后新建模拟器，新建完成之后可以点击右边的启动按钮即可启动模拟器了。但是我们现在还不需要启动，因为我们接下来要将自己写的网页包装成apk

将网页转换成Android App

Android的软件安装文件必须是apk文件，只要将apk文件导入模拟器，就可在模拟器上安装你的app。那么我们先要得到apk文件。

（a）创建项目。打开cmd，输入 cordova create hello com.example.hello HelloWorld
输入这个创建命令之前，需要进入某个盘符如D盘，再输入上面的命令，那么将会在D盘自动生成一个HelloWorld项目。create后面的三个参数，分别对应的是文件夹名称（hello）、App id（com.example.hello）、app名称（HelloWorld）。创建完以后，打开D盘的hello文件夹，会有如下几个子目录，其中www就是放置你自己网页的文件夹。如图：