Cordova - Windows系统下安装配置Cordova

时间:2024-03-16 14:49:58

 

 

使用 Cordova 可以很方便地进行跨平台应用的开发。在之前的文章:Cordova - 使用Cordova开发iOS应用实战1(配置、开发第一个应用)。介绍了如何在 Mac OS 系统下安装使用 Cordova。本文介绍如何在 Windows 系统下搭建 Cordova 环境。并使用 Cordova 编译发布一个安卓(Android)应用。

 

一,Cordova环境搭建

1,安装Node.js

主要是用来下载和安装 Cordova

下载地址:https://nodejs.org

将下载下来的 msi 文件运行安装即可。

Cordova - Windows系统下安装配置Cordova


在命令提示符(cmd)中运行 npm -v,如果出现版本号则说明 Node.js 安装成功

Cordova - Windows系统下安装配置Cordova


2,安装Cordova CLI
运行如下命令安装:

1

npm install -g cordova

以后如果要更新 Cordova,运行如下命令:

1

npm update cordova -g

cordova 更新完成后,还需要更新项目(比如更新 ios 项目):

1

cordova platform update ios


3,测试下Cordova是否安装成功
运行如下命令:

1

cordova -v

显示版本号则证明安装成功。

Cordova - Windows系统下安装配置Cordova




二,Android环境搭建

要使用 Cordova 开发 Android 应用,首先还是要在本机搭建个安卓环境。

具体可以参考我前面写的这篇文章:Android - Windows下开发环境的搭建(附:编写运行一个简单样例)

 

 

三,创建一个简单的Cordova项目
1,在终端中运行cd命令,进入想要创建项目的目录位置 

比如我们想把工程创建在 H 盘中 Code 目录下,首先在命令控制台中进入到这个文件夹。

Cordova - Windows系统下安装配置Cordova

 2,运行如下命令创建工程项目

1

cordova create hello com.example.hello HelloWorld

参数说明:
第一个参数 hello 为工程的文件夹名;
第二个参数(可选)com.example.hello 为应用程序的id名,可以在 config.xml 中修改,如果不指定的话默认为 io.cordova.hellocordova;
第三个参数(可选)HelloWorld 为App显示的名称,也可在 config.xml 中修改。

 

3,创建成功后工程目录如下:

Cordova - Windows系统下安装配置Cordova

 

目录文件说明:
conig.xml :cordova的配置文件
hooks/ :存放自定义cordova命令的脚本文件。
platforms/ :各个平台原生工程代码,会在build时被覆盖勿修改
plugins/ :插件目录(主要是提供各个平台的原生API)
www/ :用H5编写的源代码目录,build时会被放入各个平台的assets\www目录。
www/index.html :App入口html文件


4,添加Android平台支持
(1)进入工程目录

1

cd hello

(2)添加 Android 平台文件

1

cordova platform add android

(3)执行完毕后可以看到在 platforms 文件夹下已经创建了个 Android 工程

Cordova - Windows系统下安装配置Cordova


注意:在 platforms 文件夹里的每个平台工程文件下,也都会有各自的 www 目录(比如 Android 平台便是 platforms\android\assets\www),但我们不应该直接操作这个文件夹中的内容。
而是编辑最外面的 www 文件夹里的页面,然后运行 build 命令编译工程,这些页面就会自动覆盖到各个平台下对应目录下。

 

5,工程的编译

(1)每次当我们编辑完 www 文件夹里的页面后,然后运行如下命令会重新 build 工程。

1

cordova build

(2)如果我们添加了多个平台项目(比如 iOS、Android)。那么上面命令会编译所有平台工程。我们可以指定编译某个平台的,比如 Andorid。

1

cordova build android

 

6,工程的运行(使用浏览器)

(1)运行命令:cordova serve android

Cordova - Windows系统下安装配置Cordova

 

(2)在浏览器中打开相关地址 http://localhost:8000 (不管是桌面浏览器还是移动浏览器都行,下面是使用Firefox)

Cordova - Windows系统下安装配置Cordova

 

7,工程的运行(使用模拟器)

(1)首先我们要创建一个模拟器。运行 Android SDK Manager,点击菜单“Tools”-〉“Manage AVDs...”。点击弹出窗口的“Create”按钮。

Cordova - Windows系统下安装配置Cordova

 

(2)运行命令:cordova emulate android 这时便会启动模拟器,并且自动将程序部署到模拟器上运行。

Cordova - Windows系统下安装配置Cordova

 

8,工程的运行(使用真机调试)

(1)手机先装好设备驱动(这个很重要)

(2)将手机接上电脑,并设置为调试模式。

1

设置/设定 -> 开发者选项 -> USB调试。将其打勾,允许USB线调试。

(3)运行命令:cordova run android -list 显示当前连接的 android 设备。 

Cordova - Windows系统下安装配置Cordova

 

(4)运行命令:cordova run android -target="32309910caf57f11" 即可自动将工程编译安装到设备上,并启动真机进行调试。(target 里便是上面查到的设备编码)

如果你电脑只接了一台设备那么直接运行:cordova run android 就好了。

Cordova - Windows系统下安装配置Cordova


原文出自:www.hangge.com  转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1285.html