网页打包安卓APP流程 - 无梦灬_H5之家 - 中国HTML5教程资源分享第一站

搭建环境过程：

1. 安装JDK。

参见。

注：实质上到该网址上下载好JDK安装包，安装后添加一个环境变量：

JAVA_HOME,其值为：C:\Program Files\Java\jdk1.8.0_73（由于安装路径不同，从路径下复制即可），然后在PATH变量中添加一个：

%JAVA_HOME%\bin;

一定要记得在Path中添加的所有路径都要以;隔开，不然可能会影响系统运行。

2. 安装Android SDK

直接下载地址：

页面：

下载完成后解压，放置到一个非中文路径下。

然后开始建环境变量:

ANDROID_HOME=E:\selfuse\geapp\androidsdk

在path中添加：

%ANDROID_HOME%\tools; %ANDROID_HOME%\platform-tools;

添加完成后并没有结束，下面才是比较关键的：

打开SDK Manager.exe，如果连接google失败，下载的目录中只有几个，需要在工具栏中的tools下的options，添加国内的镜像下载点：

mirrors.neusoft.edu.cn，端口80。打勾的选项参见下图。点击close后就会刷新出我们需要下载的内容。

主要需要下载的内容包括：tools选项下的所有项（实际上只下载API19以上的任意一个即可，但考虑到要和安卓6.0兼容，我们可以下载版本比较新一些的。建议全部下载下来）、安卓6.0下所有文件（其他版本可下可不下）、extra下的所有文件（建议全下，实际上只需要图示中三个，其他haxm之类的是用于电脑端模拟安卓的）。

3. 使用nodejs和npm包。

https://nodejs.org/en/download/下载下面两个中的一个即可，放于一个路径下，并在path中添加一个路径如：E:\selfuse\nodejs，然后去下载个npm包（解压后路径如下），这两个包比较小，我直接就放一起了。

测试是否是全局，打开 cmd，输入 node –v，测试Npm则用 npm –v。

4. 安装npm的包cordova

Cmd命令中运行npm install -g cordova

此时，我们就有全局的命令。后续命令操作全部在cmd中进行

5. 创建应用

Cmd中使用 cd e:\test\

然后 e:

这样我们就进入了一新用于创建应用的路径下。在该路径下运行

cordova create hello com.example.hello HelloWorld

create后面的三个是可以随便写的，其中第一个是创建的文件夹名称，不能为中文，第二个是应用的一个链接，也不能为中文，第三个是我们要安装后显示的应用名称，可以为中文。

执行该命令成功后，我们用cd命令进行创建的应用

Cd hello

进入了 e:\test\hello

下面所有的命令均在该路径下执行。

添加一个安卓应用 :

cordova platform add android

添加我们需要的插件：

cordova plugin add phonegap-plugin-barcodescanner

后面示例中使用了

cordova plugin add cordova-plugin-camera

cordova plugin add cordova-plugin-geolocation

cordova plugin add cordova-plugin-dialogs

cordova plugin add cordova-plugin-splashscreen

cordova plugin add cordova-plugin-device

这个后面插件具体可到官网上查看，也可从附件中text中复制

添加完成插件后，我们可以看到一个路径：

其中platforms保存了android应用，里面内容可后续在其他软件编辑。

www中用于存放我们构建的网页，使用build命令后会在andriod中自动复制相关文件，不要直接修改platforms\android\assets\www下的网页，在使用build命令后会把android下的文件覆盖掉，修改也无效。

将网页所有的文件放在www文件夹下，然后修改config.xml文件。

其文件代码如下：

<?xml version='1.0' encoding='utf-8'?>

<name>摄像头示例</name>

只在Play商店中使用

</description>

作者信息

</author>

<allow-intent href="http://*/*" />

<allow-intent href="https://*/*" />

<allow-intent href="tel:*" />

<allow-intent href="sms:*" />

<allow-intent href="mailto:*" />

<allow-intent href="geo:*" />

<allow-intent href="market:*" />

</platform>

<allow-intent href="itms:*" />

<allow-intent href="itms-apps:*" />

</platform>

</widget>