淺談Cordova優缺點與環境部署(轉載)

淺談Cordova優缺點與環境部署

做者：蘇華傑

簡介

Cordova是一個用基於HTML、CSS和JavaScript的，用於建立跨平臺移動應用程序的快速開發平臺。它使開發者可以利用iPhone、Android、Palm、Symbian、WP七、Bada和Blackberry等智能手機的核心功能——包括地理定位、加速器、聯繫人、聲音和振動等，此外Cordova擁有豐富的插件，能夠調用。

優缺點

時下流行的移動Web應用可分爲三種：原生應用、Web應用和混合型應用。

• 原生應用：經過各類應用市場安裝，採用平臺特定語言開發。
• Web應用：經過瀏覽器訪問，採用Web技術開發。
• 混合型應用：經過各類應用市場安裝，但採用Web技術開發。它雖然看上去是一個原生應用，但裏面訪問的其實是一個Web應用。

原生應用的優點：

1. 提供最佳的用戶體驗、最優質的用戶界面和最華麗的交互；
2. 針對不一樣平臺提供不一樣體驗；
3. 可節省帶寬成本；
4. 可訪問本地資源；
5. 盈利模式明朗。

原生應用的劣勢：

1. 移植到不一樣平臺上比較麻煩；
2. 維護多個版本的成本比較高；
3. 須要經過store或market確認；
4. 盈利須要與第三方分紅。

Web應用的優點以下：

1. 開發成本低；
2. 適配多種移動設備的成本低；
3. 跨平臺和終端；
4. 迭代更新容易；
5. 無需安裝成本。

Web應用的劣勢以下：

1. 瀏覽體驗短時間內還沒法超越原生應用；
2. 不支持離線模式（HTML5將會解決這個問題）；
3. 消息推送不夠及時；
4. 調用本地文件系統的能力弱。

混合型應用能夠說是爲了彌補上面兩種應用開發模式的缺陷而生，它是二者混合的產物，而且儘量繼承了雙方的優點：

首先，它可讓衆多Web開發人員幾乎零成本地轉型成移動應用開發者。

其次，相同的代碼只需針對不一樣平臺進行編譯就能實如今多平臺的分發，大大提升了多平臺開發的效率。而相較於Web應用，開發者能夠經過包裝好的接口調用大部分經常使用的系統API。

做爲本文所講的Cordova，Cordova正是混合型框架中的佼佼者，它基於標準的Web技術——HTML、JavaScript和CSS，用JavaScript包裝平臺的API供開發者調用，具有強大的編譯工具來爲不一樣平臺生成應用，同時擁有豐富的第三方資源和產業鏈。

PhoneGap在Web應用和設備之間搭建了一個通訊的橋樑，封裝了移動設備的平臺差別，統一使用JavaScript接口訪問設備本地API，以此提供了一個優秀的跨平臺解決方案。

相信你們都對移動應用開發的框架使用已經有大概瞭解。接下來就講述Cordova的環境部署。

用命令行的方式來部署Cordova：

1.安裝 nodejs

下載：http://nodejs.org/download/.安裝完畢後須要重啓。

2.安裝 cordova

打開cmd命令行，執行：npm install -g cordova

安裝約10分鐘。

3.安裝 ant

下載ant包，解壓到一個文件夾，如：D:\program files\apache-ant-1.9.4

配置該路徑到環境變量中，此時若android sdk未配置環境變量的，一併配置。以防後面報錯。

4.建立一個 cordova 工程

cordova create hello com.shj.helloworld helloapp

其中，第一個 hello 是文件夾的名稱；om.shj.helloworld 是app id，第二個 helloapp是工程的名稱，也是應用的名稱。

提示下載庫，請等待。

下載完成。

5.進入工程文件夾

cd hello

6.添加平臺支持

有多種平臺可選.命令以下：

$ cordova platform add ios $ cordova platform add amazon-fireos $ cordova platform add android $ cordova platform add blackberry10 $ cordova platform add firefoxos $ cordova platform add wp7 $ cordova platform add wp8 $ cordova platform add windows8

此處選擇cordova platform add android

在工程文件夾下輸入該命令：

項目建立完畢。

7.添加插件支持

主要爲系統硬件訪問的插件，常見如照相機、媒體訪問、設備訪問、加速設備、定位設備等。能夠動態的按需求去添加，譬如按如下方式添加,，更多插件請去cordova 官網查看。

基本設備資訊 （設備 API）：

$ cordova plugin add org.apache.cordova.device

網路鏈接和電池事件：

$ cordova plugin add org.apache.cordova.network-information $ cordova plugin add org.apache.cordova.battery-status

相機、 媒體重播和捕獲：

$ cordova plugin add org.apache.cordova.camera $ cordova plugin add org.apache.cordova.media-capture $ cordova plugin add org.apache.cordova.media

訪問設備或網路 （檔 API） 上的檔：

$ cordova plugin add org.apache.cordova.file $ cordova plugin add org.apache.cordova.file-transfer

8.構建應用

cordova build

若上圖出現此命令需更新ant版本

上圖出現該提示，BUILD成功。即將 hello/www 下的內容，構建到添加的各平臺內。如 android 平臺，會構建到此目錄：hello\platforms\android\assets\www。

9.測試應用

A)在模擬器上安裝測試應用

如android平臺，應先將 android 模擬器啓動並打開。

cordova emulate android

B)使用真機測試（推薦）

可以使用以下命令：

cordova run android

C)在瀏覽器中運行

cordova serve android

D)使用 Ripple Emulator 調試

npm install -g ripple-emulator ripple emulate

打包爲發佈的應用

打包android應用：藉助 eclipse 來完成。

打開安裝配置好 adt 插件的 eclipse ，使用嚮導導入一個 android 項目的方式，選擇當前工程文件夾，此時會顯示導入兩個項目，導入便可。

項目成功導進來了。

接下來就能夠把網頁直接放到項目裏面了。

先看PC直接打開網頁的效果。

這是未修改配置的啓動界面。也就是剛剛PC端打開的網頁。網頁就存在android項目asset目錄下面。引用路徑如上圖所示file:///android_asset/www/index.html

經過360手機助手查看手機界面，能夠看到剛剛的界面已經成功引導進去了。

在此Cordova的環境部署已經大功告成了。Web開發人員能夠很輕易的開發移動應用了。更多詳細的插件請查看官網，在此不一一細說了。

原文地址：http://express.ruanko.com/ruanko-express_74/technologyexchange6.html