创建你的第一个Cordova App

Posted 2020-12-28 林春杰

本教程教你如何使用Cordova命令行工具创建一个Cordova App，并将它打包到各个手机平台。关于CLI命令更详细的内容请参考:Cordova CLI详情。

安装Cordova CLI

Codorva CLI以npm包的形式发布，通过以下几个步骤来安装。

1. 安装node.js，下载地址：https://nodejs.org/dist/，安装完成后记得将安装路径加入到path系统环境变量中，我的安装路径是C:Program Files odejs。安装成功后可以使用node和npm命令。

      2.(可选)下载并安装git客户端，这样在命令行中就可以调用git的命令了。有的插件只能通过指向git库的url下载，这个时候git客户端就是必须的了。大部分情况下，这个不是必须的。

      3.通过nmp安装cordova模块。

• 在 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文件中。

 

 

1.  
   $ cd hello
2.  
   $ cordova platform add ios --save
3.  
   $ cordova platform add android --save

 

可以通过下面的命令查看添加了哪些平台：

$ cordova platform ls

添加SDK

为了生成和运行app，必须添加各个平台的SDK。例如要生成android平台下的app，就必须安装JDK，Android SDK，Gradle。如果你使用浏览器作为平台，那么可以添加browser平台，它不需要SDK。不过这种就是纯Web项目了。要列出各个平台所需的SDK，使用下面的命令：

1.  
   $ cordova requirements
2.  
   Requirements check results for android:
3.  
   Java JDK: installed .
4.  
   Android SDK: installed
5.  
   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
6.  
   Gradle: installed
7.  
    
8.  
   Requirements check results for ios:
9.  
   Apple OS X: not installed
10.  
    Cordova tooling for iOS requires Apple OS X
11.  
    Error: Some of requirements check failed

关于各个平台所需的配置详细信息，请参考：android平台所需配置，IOS平台所需配置。

生成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 [email protected]

运行 cordova -v 查看当前版本。要找到最新版本使用下面的命令：

$ npm info cordova version