天天看點

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

引言

簡單介紹一下Cordova的來曆,Cordova的前身 叫PhoneGap,自被Adobe收購後交由Apache管理,并将其核心功能開源改名為Cordova。它能讓你使用HTML5輕松調用本地API接 口和釋出應用到商店的應用開發平台。有低成本,低開發周期,輕量化等優點。它統一封裝了 Andriod,IOS,WindowsPhone,Symbian等幾大移動開發平台的API,采用HTML5+JavaScript的混合開發的模式 來開發智能移動的APP,解決系統相容等問題。使用Cordova把APP從一個平台移植到另外一個平台隻需要把HTML代碼跟JS打包一下就可以了,減 少了大量的開發成本與開發時間,是以受到廣大企業與開發人員的青睐。現在不少的大型網站(例如京東,淘寶等)手機APP都是使用此種混搭模式進行開發。

目錄

<a href="http://www.cnblogs.com/#p1" target="_blank">一、軟體下載下傳</a>

<a href="http://www.cnblogs.com/#p2" target="_blank">二、JDK安裝部署</a>

<a href="http://www.cnblogs.com/#p3" target="_blank">三、Android SDK 安裝部署</a>

<a href="http://www.cnblogs.com/#p4" target="_blank">四、Cordova/PhoneGap 安裝部署</a>

<a href="http://www.cnblogs.com/#p5" target="_blank">五、建立Cordova 測試項目</a>

<a></a>

一、軟體包下載下傳

運作環境:Windows 7

<a href="http://www.cnblogs.com/#p0" target="_blank">回到目錄</a>

二、JDK安裝部署

JDK (Java Development Kit) 是 Sun 針對Java開發員的産品,是現今使用最廣泛的Java SDK。JDK 是整個Java的核心,包括了Java運作環境和基礎類庫等。常用版本包括 JDK 6、JDK 7、JDK 8。

成功安裝 JDK 7 後,必須設定環境變量,讓系統感覺并能調用 JDK 7。

打開 “控制台 --&gt; 系統安全 --&gt; 系統 --&gt; 進階系統設定 --&gt; 環境變量”,增加以下配置 :

變量

說明

java_home

C:\ jdk7.win32.x86_64_1.7.0.u45

寫入JDK安裝的路徑

Path

;%java_home%\bin

在Path原有值上加入此值

classpath

;%java_home%\lib\dt.jar;%java_home%\lib\tools.jar

在classpath的原有值上加入此值

三、Android SDK 安裝部署

如果通過Eclipse來開發Andorid應用程式,配置好了JDK變量環境之後可以安裝Eclipse,然後下載下傳Android SDK(Software Development Kit)并在Eclipse中安裝ADT插件,這個插件能讓Eclipse和Android SDK關聯起來。

3.1 ADT安裝

ADT 全名 Android Development Tools, 使用Eclipse開發Android,在Eclipse編譯IDE環境中安裝ADT,可以為Android開發提供開發工具的更新或者變更,友善 Android SDK等版本的管理。當然,如果使用Android Studio等開發工具,ADT可無需安裝。

最新版Cordova 5.3.1(PhoneGap)搭建開發環境
最新版Cordova 5.3.1(PhoneGap)搭建開發環境

直接選擇已下載下傳的ADT-23.0.6.zip包

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

安裝完成後,你可以看到建立項目時出現Android選項

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

3.2 部署環境變量

把下載下傳的Android SDK解壓後,建立系統變量,操作類似于JDK1.7系統變量設定。選 擇“系統變量”中變量名為“Path”的環境變量,變量後追加 “;D:\MyEclipse Professional 2014\android-sdk-windows\tools;D:\MyEclipse Professional 2014\android-sdk-windows\tools\platform-tools;”

3.3 安裝Android SDK

官網上下載下傳Android SDK後,直接打開SDK Manager

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

由于中國的特殊情況,防護牆把google官網給封了,是以下載下傳前須打開菜單Tools-Options設定代理,否則會出現 “Fetching https://dl-ssl.google.com/android/repository/addons_list-2.xml” 等錯誤

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

HTTP Proxy Server設定為:android-mirror.bugly.qq.com  

HTTP Proxy Port設定為:8080

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

選擇所需要的Android版本進行下載下傳,如果下載下傳版本多所占用的空間可能比較大,用的時間也比較長。個人下載下傳了Android 5.1、Android 4.4、Android4.1.2等幾個版本,需要大約20G左右。

3.4 綁定Android SDK

打開菜單 windows-preferences ,選擇Android項目,把SDK Location綁定到 Android SDK 所在的檔案夾,可看到剛剛所下載下傳的各個Android SDK 版本

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

四、Cordova/PhoneGap 安裝部署

在官網下載下傳最新版 Node-v4.1,完成安裝後,在環境變量中把path增加配置 “ ;C:\Program Files\nodejs\;” 

為了友善管理,建議為Eclipse加入Ant插件。在Ant 官網下載下傳 Ant-1.9.6,完成安裝後在環境變量中把path增加配置 “;D:\MyEclipse Professional 2014\apache-ant-1.9.6\bin” 。

此時,在指令提示符視窗執行以下指令 npm install -g cordova 

等待三五分鐘,完成cordova安裝後,系統就會出現以下提示:

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

注意:Cordova 對 Android SDK 的版本是有要求的,如果需要控制所安裝的版本,可使用指令

npm install -g cordova@****  (版本号)

五、建立Cordova 測試項目

5.1 建立Android工程基礎檔案

輸入指令 “cordova create AndroidFiles com.sun.androidapp AndroidTest” ,建立工程檔案。

其中AndroidFiles是檔案夾名稱,com.sun.androidapp是包名稱,AndroidTest是工程名稱

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

5.2建立工程執行個體

進入剛建立的檔案AndroidFiles, 輸入指令 cordova platform add android 建立工程執行個體

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

除此以外,還可以用以類似指令建立 iOS、WP、BlackBerrry 等平台的執行個體

同時,也可使用以下指令控制所生成執行個體的 Android SDK 運作環境

cordova platform add android@****  (版本号)

此時,再輸入指令 cordova build ,當出現BUILD SUCCESSFUL等字樣後,代表項目已成功生成

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

 此時可以用幾種簡單的方式對項目進行測試

浏覽器測試

輸入指令cordova serve android, 在浏覽器中打開相關位址 http://localhost:8000

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

手機測試

連接配接手機,選擇調試選項,輸入指令cordova run android

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

 模拟器測試

輸入指令cordova emulate android

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

5.4項目編輯配置

打 開Eclipse,導入剛建立的工程,工程中包含兩個項目,一個是CordovaLib,一個是MainActivity。MainActivity為測 試項目,CordovaLib 為Cordova 的源代碼項目。 首先選擇項目屬性,設定Android所運作的基礎平台。

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

注意:Cordova 5.3.1 中 CordovaLib 要求運作在 Android SDK 5.1.1, API Level 22或以上,否則某些API将報錯,MainActivity 運作的平台版本則可以按需要而設。

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

另外,JDK 1.7要求Android SDK 版本為API Level 17或以上,若選擇運作16或者以下運作環境,系統将會出現以下錯誤。此時可設定項目屬性,把運作環境設計為JDK 1.6 以解決問題。

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

一般在Eclipse使用Android Virtual Device (AVD) 虛拟器進行項目測試,在運作測試前,先配置運作環境。選擇Target-&gt;Manager

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

按下Create鍵,配置一台Android虛拟器,使用者可根據實際情況配置多台Android虛拟機。

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

完成配置後,選擇Start,啟動Android虛拟器

最新版Cordova 5.3.1(PhoneGap)搭建開發環境

啟動調試後,選擇你所配置的虛拟機即可運作,在此Cordova的環境部署已經大功告成了,你可以在Eclipse中使用HTML5+Javascript方式完成Android開發了。

本章小結

使 用Cordova/PhoneGap,應用程式的建構可以無需本地代碼,直接使用的是Web技術即可。由于這些API在多個裝置平台上是一緻的,都是基于 HTML5 Web标準建立,是以應用程式的移植很友善。Cordova支援iOS、Android、Blackberry、Windows Phone、Palm WebOS、Bada和Symbian等多個平台,隻需要使用平台SDK打包成應用程式,可以從每種裝置的應用程式商店下載下傳安裝。是以,Cordova将 成為未來手機混合開發的新趨勢。

參考文章

<a href="http://www.cnblogs.com/leslies2/p/cordovaPlugin.html" target="_blank">Cordova(PhoneGap)通過CordovaPlugin插件調用 Activity 執行個體</a>

<a href="http://www.cnblogs.com/leslies2/archive/2012/07/23/2603617.html" target="_blank">Apache2.2+Tomcat7.0整合配置詳解</a>

<a href="http://www.cnblogs.com/leslies2/archive/2012/11/15/WindowsServer2008R2_NLB.html" target="_blank">Windows Server 2008 R2 負載平衡入門篇</a>

<a href="http://www.cnblogs.com/leslies2/p/4819008.html%20" target="_blank">最新版Cordova 5.1.1(PhoneGap)搭建開發環境</a>

作者:風塵浪子

<a href="http://www.cnblogs.com/leslies2/p/4819008.html" target="_blank">http://www.cnblogs.com/leslies2/p/4819008.html</a>

原創作品,轉載時請注明作者及出處

本文轉自 leslies2  51CTO部落格,原文連結:http://blog.51cto.com/79100812/1761666

繼續閱讀