本教程教你如何使用Cordova命令行工具创建一个Cordova App,并将它打包到各个手机平台。关于CLI命令更详细的内容请参考:Cordova CLI详情。
安装Cordova CLI
Codorva CLI以npm包的形式发布,通过以下几个步骤来安装。
-
安装node.js,下载地址:https://nodejs.org/dist/,安装完成后记得将安装路径加入到path系统环境变量中,我的安装路径是C:\Program Files\nodejs\。安装成功后可以使用node和npm命令。
-
在 OS X 和 Linux系统下:
$ sudo npm install -g cordova
-
在 Windows系统下:
C:\>npm install -g cordova
-g参数指示cordova是全局安装,否则它只会安装到当前工作目录下的node_module子目录下。
安装成功后就可以使用cordova的命令了。
创建App
进入到你的工程目录,我这里是Working目录,记住目录不能带中文,然后创建cordova工程:
D:\Working>
cordova create hello com.example.hello HelloWorld
hello是工程目录名称,com.example.hello是包名,HelloWorld是app名称。这个命令会为你的cordova App创建必要的目录结构,如下图所示:
config.xml:配置文件,对工程的一些配置都会写在这里面,比如app名称,图标等等。
www:www目录是工程的web开发目录,包含html,css,js文件,其中index.html就是开始页面。大部分开发的都会在这个目录里进行,也就是所谓的资源包的开发(开发html,css和js代码)。在生成目标平台下的app时,www目录下的内容会直接复制到目标平台的www目录中去,例如:platforms/ios/www,platforms/android/assets/www。因此,不要改动目标平台下的www目录中的内容。如果使用了版本控制工具,应该将根目录下的www加入版本控制中去。
platforms:platforms包含目标平台下所有的源代码和生成脚本,目标平台可以通过cordova命令添加。当使用CLI工具时,请不要改动platforms下的任何东西(除非你知道原理)。当生成app时或者重新安装插件时,platforms里面的东西会才被改动。
plugins:添加的插件会被拷贝到这个目录中。
hooks:这个目录包含自定义的CLI命令脚本,该目录下的脚本会在命令匹配目录名称的前后执行。这对集成自己的生成系统或者版本控制系统很有帮助。(刚接触的人可以忽略)
添加平台
cd到工程目录,然后添加目标平台。--save参数保证平台会被保存到config.xml文件中。
-
$ cd hello
-
$ cordova platform add ios --save
-
$ cordova platform add android --save
为了生成和运行app,必须添加各个平台的SDK。例如要生成android平台下的app,就必须安装JDK,Android SDK,Gradle。如果你使用浏览器作为平台,那么可以添加browser平台,它不需要SDK。不过这种就是纯Web项目了。要列出各个平台所需的SDK,使用下面的命令:
-
$ cordova requirements
-
Requirements check results for android:
-
Java JDK: installed .
-
Android SDK: installed
-
Android target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23
-
Gradle: installed
-
-
Requirements check results for ios:
-
Apple OS X: not installed
-
Cordova tooling for iOS requires Apple OS X
-
Error: Some of requirements check failed
生成App
corodva create命令为我们生成了一个项目的大致框架,其中开始页面是www/index.html页面。所有的初始化代码都应该放在www/js/index.js下的deviceready事件处理里面,因为这个时候corodva才可用。当我们开发完成,使用下面的命令生成app。
生成所有平台下的app:
$ cordova build
生成特定平台下的app:
$ cordova build android
测试App
测试App需要模拟器,比如Android的AVD。然后通过下面的命令进行模拟:
$ cordova emulate android
当然,还可以直接通过下面的命令将app安装到手机上测试。
$ cordova run android
上面两种测试方式都比较慢,而且无法调试,可以将项目导入到eclipse(以android平台为例)中,然后进行测试。在导入时选择android项目和CordovaLib项目两个,具体方法请参考:在eclipse中测试cordova项目
升级Cordova
通过下面的命令升级cordova:
npm update -g cordova
通过下面的命令安装特定版本的Cordova:
npm install -g cordova@3.1.0-0.2.0
运行 cordova -v
查看当前版本。要找到最新版本使用下面的命令:
$ npm info cordova version