如何web应用程序打包成app

下载安装MyEclipse2014，Android SDK，eclipse(需配置Android开发环境)

Java和Android环境安装与配置，将另写经验分享，读者也可百度参考其他相关资料，自行安装

打开MyEclipse2014，新建一个HTML5 Mobile Application Project，命名，例如：hello

html5程序在工程www目录下编辑；

编辑好我们的html5程序，下面就要开始学习打包了

这里介绍两种打包方式：1、PhoneGap Build Service 打包

PhoneGap官网有相关教程可参考，不具体介绍

2、android SDK +eclispe 打包

android SDK +eclispe 打包(前提已配置好，android开发环境)：

Step1、启动eclipse，新建Android Application Project，即Android工程，命名，例如：hello

Step2、将前面Myeclipse2014中编辑好的HTML5程序(www整个目录）拷至刚刚在eclipse新建hello工程对应assets目录下面

Step3、下面要做的就是如何将我们的HTML5程序在Android应用中启动，这里我们要使用Android系统自带的WebView控件（具体信息参考Adroid开发文档）---在工程下找到res->layout->activity_main.xml并打开，向里面插入WebView控件，编辑好自己想要的样式

Step4、在主程序入口，用刚刚编辑好的WebView控件将HTML5程序引入，此时，主体功能已实现，编译工程即可得到apk

首页得准备好需要的东西，如eclipse，一个完整可以浏览的手机网站，而且确保电脑配置好jdk，环境变量，还要安装好cordova，这些环境等配置这里不表，可以自行百度。在这里我就自己随意写了个网站做测试，从下图可以看出来，这是一个可以在网页中浏览的手机网站

有了网站之后，第一步新建一个项目，打开你要保存的项目地址，比如D盘的yun文件夹，按住键盘的shift键+鼠标右键，选择“在此处打开命令窗口”，就会d出一个终端命令窗口，打开之后在终端里面输入cordova

create hello，hello为你的项目名称，如cordova create

qianqian，qianqian就是我的项目名称，注意，不要手动去创建文件夹，因为我们在终端里面建的项目里面有很多的配置文件，终端命令窗口不要关

在终端命令窗口中输入cd

qianqian，进入qianqian文件夹，然后再输入cordova platform add

android，回车，等待下载完成，记住在下载之前一定要确保已经安装git，要不然会下载失败，本人亲自试验，下载可以要1分钟左右，下载完成后终端命令窗口不要关，等下要用

下载完成后将准备好的网站放到www文件夹里面，原来的文件可以删掉，再打开eclipse软件，点击菜单栏file--import，d出一个窗口，选择下面图片中的选项，再点next，之后点击Browse，选择qianqian文件夹项目的路径，选取，记住，复选框一定要全部选上，不懂的看下面的图片，然后确定就可以了

确定之后就会看到下面图片一样左边会出现两个项目，为了确保项目一次性完成，我们可以在终端窗口里面输入cordova prepare，输入前确保是在当前qianqian文件夹，这个命令是在修改过项目的情况下运行的，等待他运行完，下面第二张图片是运行完成的图片

ok，之后就可以打包webapp了，回到eclipse，我们发现项目文件有个红叉，或者也会出现一个感叹号之类的，出现这个情况的话可以点击菜单栏project--clean，在d出的窗口中选择第二个单选项，下面的复选框全部选上，不懂看图，确认之后就可以看到红叉没了

然后在项目栏里选择第二个项目右键选择run as--android application，之后等待半分钟左右，主要是看电脑运行速度好不好了，好的话就快

最后如果你手机连接着电脑或者你电脑开着安卓虚拟机的话，在d出的窗口就会出现你手机或者虚拟机的信息，选择他再点ok，系统会自动跳到虚拟机里，如果是真机的话，就直接看你的手机就行，手机会自动安装app应用的

如果两者都没有的话可以将d出的窗口都关闭，然后在软件项目栏的第二个项目里面有个bin文件夹，打开，里面有个apk，将他复制出来安装到自己手机或其他机器里就行了，下图就是webapp做出来的最终效果，一开始忘记上传图片，只上传了代码，所以app里面没有图片，不过效果总算是出来了

1、首先我们需要先新建一个WebApp项目，目录结构为：

index.html 项目首页html入口文件

--html 项目文件夹

--html/css 用于存放用到的css文件

--html/js 用于存放用到的js文件

2、index.html我们可以用Dreamweaver CC来新建， *** 作如下：点击文件菜单，再点新建，在d出的窗口中点流体网格布局，再点创建。

3、创建好html文件后，点击文件-另存为，将文件名改为：index.html，保存到我们新建的WebApp项目根目录下。如下图：

4、这时会d出一个对话框，提示内容如下：

这时，我们将用到的boilerplate.css文件和Untitled-2.css文件，复制到WebApp项目html/css目录下，将用到的respond.min.js文件复制到WebApp项目html/js目录下。

这里解释下，boilerplate.css是定义跨浏览器兼容性的样式文件，Untitled-2.css是定义自适应媒体查询的样式文件，respond.min.js扩展IE8以下浏览器支持css3的js文件，如果不需要考虑支持IE8以下浏览器，可以删除掉。这里由于我们是打包生成手机端的APP，不需要用到respond.min.js，我们把它删除掉，然后再修改下CSS的引用路径，如下：

<link href="html/css/boilerplate.css" rel="stylesheet" type="text/css">

<link href="html/css/Untitled-1.css" rel="stylesheet" type="text/css">

5、这样一个简单的WebApp项目就新建好了。优化下html代码，如下图：

6、接着我们来使用KM盒子将这个WebApp项目打包生成手机APP应用。

打开KM盒子软件，点击安卓设备按钮，在d出的菜单中选择 自定义打包。

接着，在d出的对话框，设置 APK名称，安装包ID，文件路径选择我们刚才的WeApp文件夹目录，然后点击编译文件。

接着，在d出的对话框中，双击三个图片，分别设置APK的竖向启动画面、横向启动画面和桌面图标文件，图片格式为PNG图片文件。

最后，在d出的对话框，点击生成APK安装包，这样一个WebApp项目打包生成手机APP就完成了。

我们来看下安装到手机上的效果：

最后，我们学习下Dreamweaver CC生成的流体网格布局CSS文件，具体看源文件，我加了中文注释：

@charset "utf-8"

/** HTML5 ✰ Boilerplate color:rgb(144 255 173)">v3.0.2

/*

* HTML5 ✰ 样板

*

---