Cordova CLI源碼分析（一）——簡介

本系列文章分析基於node.js的命令行工具Cordova CLI，因此若是對node.js基礎不是很瞭解，建議參考http://nodejs.gamesys.net/node-js提供的基礎教程

 

文中提到的包和模塊是同一律念

 

一、簡介

Cordova CLI是一個基於node.js的命令行工具，用於編譯、部署和管理跨平臺的Cordova 混合應用程序。

Apache Cordova 使開發者運用Html， CSS，javascript就可以構建原生移動應用

 

支持平臺

l Android

l BlackBerry 10

l iOS

l Windows Phone 7 & 8

 

運行環境

Node.js

各平臺SDK

安裝

 

npm install -g cordova

 

 

默認安裝路徑

C:\Documents and Settings\xxx\Application Data\npm\node_modules\cordova\src

 

二、命令參數

 

全局命令

create <directory> [<id> [<name>]] 建立一個新的 cordova項目，三個參數分別是 保存路徑，項目id，項目名稱（反域名格式com.xxx.xxxx） 

 

項目命令

platform [ls | list] list all platforms the project will build to

platform add <platform> [<platform> ...] add one (or more) platforms as a build target for the project

platform [rm | remove] <platform> [<platform> ...] removes one (or more) platforms as a build target for the project

plugin [ls | list] list all plugins added to the project

plugin add <path-to-plugin> [<path-to-plugin> ...] add one (or more) plugins to the project

plugin [rm | remove] <plugin-name> [<plugin-name> ...] remove one (or more) added plugins

prepare [platform...] copies files into the specified platforms, or all platforms. it is then ready for building by Eclipse/Xcode/etc.

compile [platform...] compiles the app into a binary for each added platform. With no parameters, builds for all platforms, otherwise builds for the specified platforms.

build [<platform> [<platform> [...]]] an alias for cordova prepare followed by cordova compile

emulate [<platform> [<platform> [...]]] launch emulators and deploy app to them. With no parameters emulates for all platforms added to the project, otherwise emulates for the specified platforms

serve <platform> [port] launch a local web server for that platform's www directory on the given port (default 8000).

 

可選參數

-d或--verbose 添加調式信息輸出

-v 或--version 輸出cordova-cli版本信息

三、目錄結構

 

運行cordova create hello hellotest com.xxx.hellotest

 

hello/

|--.cordova/

| | -- hooks/

| | -- config.json

|-- merges/

| | -- android/

| | -- blackberry10/

| | -- ios/

|-- www/

| `-- config.xml

|-- platforms/

| |-- android/

| |-- blackberry10/

| `-- ios/

`-- plugins/

剛建立完的merges，platforms，plugins都是空目錄，而.cordova/config.json包含create建立時指定的參數{"id":"hellotest","name":"com.xxx.hellotest"}

 

（1）.cordova目錄是辨別是不是cordova項目的重要標誌，存儲一些配置文件和信息；

（2）www目錄下存放的是各個平臺上一致的web文件，即每一個平臺使用相同代碼，當調用prepare命令時，拷貝此目錄下內容到platforms下原生目錄；

     config.xml是符合W3C's Packaged Web Apps (Widgets) 標準的配置文件，經過修改config.xml中參數值，cordova-cli完成應用參數的修改

示例：

<?xml version='1.0' encoding='utf-8'?>

<widget id="hellotest" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

    <name>com.jinkai.hellotest</name>

    <description>

        A sample Apache Cordova application that responds to the deviceready event.

    </description>

    <author email="dev@callback.apache.org" href="http://cordova.io">

        Apache Cordova Team

    </author>

    <content src="index.html" />

    <access origin="*" />

    <preference name="fullscreen" value="true" />

<preference name="webviewbounce" value="true" />

<plugins>

     <plugin name="MyPlugin" value="MyPluginClass" />

</plugins>

<content src="index.html" />

</widget>

 

其中主要有如下幾個參數：

<name> 展現給用戶的應該程序名稱

<widget> 中id屬性指定包名（bundle identifier 或application id）

<widget> 中version屬性版本

<access> 中 origin 屬性，指定網絡訪問白名單

<preference>  用於存儲一些鍵值對參數

<plugin> 定義原生插件，當運行時Cordova framework確保應用能夠調用設備的API接口

<content> 定義web起始頁，默認值是index.html

 

（3）merges目錄下存放的是有平臺差別的web文件，當調用prepare命令時，拷貝此目錄下內容到platforms下原生目錄，若是有同名www目錄下文件存在，merges目錄下文件將覆蓋www下文件；

例如存在如下目錄結構

merges/

|-- ios/

| `-- app.js

|-- android/

| `-- android.js

www/

`-- app.js

最終編譯時，platforms目錄下，android目錄包含android.js和app.js,iOS目錄包含app.js,這個文件與merges目錄下ios/app.js一致，即merges目錄下文件覆蓋www目下文件

 

（4）platforms 各平臺原生應用程序目錄結構

（5）plugins 全部插件將會解壓後放在此目錄

（6）hooks 定義一系列回調函數

包含兩類:項目指定和模塊指定函數

 

 

四、Cordova CLI使用流程

（1）建立應用 cordova create （建立應用程序骨架）

cordova create hello hellotest com.jinkai.hellotest

（2）添加平臺 cordova platform add 

cd hello

Mac支持平臺

$ cordova platform add ios

$ cordova platform add android

$ cordova platform add blackberry10

Windows支持平臺

$ cordova platform add wp7

$ cordova platform add wp8

$ cordova platform add android

$ cordova platform add blackberry10

 

查看支持平臺

cordova platform ls

 

刪除

$ cordova platform remove blackberry10

$ cordova platform rm android

 

（3）編譯cordova build（在platforms目錄下生成平臺代碼）

$ cordova build ios

 

等價於順序執行如下兩個步驟

 

 $ cordova prepare ios
 $ cordova compile ios

 

 

（4）測試

$ cordova emulate android

 

（5）添加插件

 

安裝插件cordova plugin add

 

Basic device information (Device API):

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

 

Network Connection and Battery Events:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git

 

Accelerometer, Compass, and Geolocation:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

 

Camera, Media playback and Capture:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git    

 

Access files on device or network (File API):

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git

 

Notification via dialog box or vibration:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git

 

Contacts:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git

 

Globalization:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git

 

Splashscreen:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git

 

Open new browser windows (InAppBrowser):

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

 

Debug console:

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

 

查看已安裝插件plugin ls 或plugin list 或plugin

$ cordova plugin ls    # or 'plugin list'
[ 'org.apache.cordova.core.console' ]

刪除插件

 

$ cordova plugin rm org.apache.cordova.core.console        
$ cordova plugin remove org.apache.cordova.core.console    # same