使用 Cordova 可以很方便地进行跨平台应用的开发。在之前的文章:Cordova - 使用Cordova开发iOS应用实战1(配置、开发第一个应用)。介绍了如何在 Mac OS 系统下安装使用 Cordova。本文介绍如何在 Windows 系统下搭建 Cordova 环境。并使用 Cordova 编译发布一个安卓(Android)应用。
一,Cordova环境搭建
1,安装Node.js
主要是用来下载和安装 Cordova
下载地址:https://nodejs.org
将下载下来的 msi 文件运行安装即可。
在命令提示符(cmd)中运行 npm -v,如果出现版本号则说明 Node.js 安装成功
2,安装Cordova CLI
运行如下命令安装:
1 |
|
以后如果要更新 Cordova,运行如下命令:
1 |
|
cordova 更新完成后,还需要更新项目(比如更新 ios 项目):
1 |
|
3,测试下Cordova是否安装成功
运行如下命令:
1 |
|
显示版本号则证明安装成功。
二,Android环境搭建
要使用 Cordova 开发 Android 应用,首先还是要在本机搭建个安卓环境。
具体可以参考我前面写的这篇文章:Android - Windows下开发环境的搭建(附:编写运行一个简单样例)
三,创建一个简单的Cordova项目
1,在终端中运行cd命令,进入想要创建项目的目录位置
比如我们想把工程创建在 H 盘中 Code 目录下,首先在命令控制台中进入到这个文件夹。
2,运行如下命令创建工程项目
1 |
|
参数说明:
第一个参数 hello 为工程的文件夹名;
第二个参数(可选)com.example.hello 为应用程序的id名,可以在 config.xml 中修改,如果不指定的话默认为 io.cordova.hellocordova;
第三个参数(可选)HelloWorld 为App显示的名称,也可在 config.xml 中修改。
3,创建成功后工程目录如下:
目录文件说明:
conig.xml :cordova的配置文件
hooks/ :存放自定义cordova命令的脚本文件。
platforms/ :各个平台原生工程代码,会在build时被覆盖勿修改
plugins/ :插件目录(主要是提供各个平台的原生API)
www/ :用H5编写的源代码目录,build时会被放入各个平台的assets\www目录。
www/index.html :App入口html文件
4,添加Android平台支持
(1)进入工程目录
1 |
|
(2)添加 Android 平台文件
1 |
|
(3)执行完毕后可以看到在 platforms 文件夹下已经创建了个 Android 工程
注意:在 platforms 文件夹里的每个平台工程文件下,也都会有各自的 www 目录(比如 Android 平台便是 platforms\android\assets\www),但我们不应该直接操作这个文件夹中的内容。
而是编辑最外面的 www 文件夹里的页面,然后运行 build 命令编译工程,这些页面就会自动覆盖到各个平台下对应目录下。
5,工程的编译
(1)每次当我们编辑完 www 文件夹里的页面后,然后运行如下命令会重新 build 工程。
1 |
|
(2)如果我们添加了多个平台项目(比如 iOS、Android)。那么上面命令会编译所有平台工程。我们可以指定编译某个平台的,比如 Andorid。
1 |
|
6,工程的运行(使用浏览器)
(1)运行命令:cordova serve android
(2)在浏览器中打开相关地址 http://localhost:8000 (不管是桌面浏览器还是移动浏览器都行,下面是使用Firefox)
7,工程的运行(使用模拟器)
(1)首先我们要创建一个模拟器。运行 Android SDK Manager,点击菜单“Tools”-〉“Manage AVDs...”。点击弹出窗口的“Create”按钮。
(2)运行命令:cordova emulate android 这时便会启动模拟器,并且自动将程序部署到模拟器上运行。
8,工程的运行(使用真机调试)
(1)手机先装好设备驱动(这个很重要)
(2)将手机接上电脑,并设置为调试模式。
1 |
|
(3)运行命令:cordova run android -list 显示当前连接的 android 设备。
(4)运行命令:cordova run android -target="32309910caf57f11" 即可自动将工程编译安装到设备上,并启动真机进行调试。(target 里便是上面查到的设备编码)
如果你电脑只接了一台设备那么直接运行:cordova run android 就好了。
原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1285.html