Cordova CLI源碼分析

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

文中提到的包和模塊有區別,但是對於使用者來說是同一個概念。

一個node.js文件就是一個模塊,可能是JavaScript代碼,JSON或者編譯後的C/C++擴展;包是模塊基礎上的擴展,是一個目錄,至少包含一個package.json說明文件。

1、簡介

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

Apache Cordova 使開發者運用Html, CSSjavascript就能夠構建原生移動應用

支持平臺

l Android

l BlackBerry 10

l iOS

l Windows Phone 7 & 8

運行環境

Node.js

各平臺SDK

安裝

[javascript] view plaincopy
  1. npm install -g cordova  

默認安裝路徑

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

2、命令參數

全局命令

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版本信息

3、目錄結構

運行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="[email protected]" 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.jsapp.js,iOS目錄包含app.js,這個文件與merges目錄下ios/app.js一致,即merges目錄下文件覆蓋www目下文件

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

5plugins 所有插件將會解壓後放在此目錄

6hooks 定義一系列回調函數

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


4、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目錄下生成平臺代碼)

[javascript] view plaincopy
  1. $ cordova build ios  

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

[javascript] view plaincopy
  1. $ cordova prepare ios  
  2. $ cordova compile ios  

(4)測試

[javascript] view plaincopy
  1. $ 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

[javascript] view plaincopy
  1. $ cordova plugin ls    # or 'plugin list'  
  2. 'org.apache.cordova.core.console' ]  

刪除插件

[javascript] view plaincopy
  1. $ cordova plugin rm org.apache.cordova.core.console          
  2. $ cordova plugin remove org.apache.cordova.core.console    # same  

發佈了5 篇原創文章 · 獲贊 5 · 訪問量 25萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章