cordova開發環境安裝
1. cordova簡介
Apache Cordova是Apache基金會支持的一套開源移動APP的開發工具,其前身是phonegap。phonegap被收購後,開發者將其核心代碼部分捐給Apache,並取名Cordova。它允許移動APP開發者使用HTML+CSS+JavaScript來訪問本地設備的功能,“one code base"完成多終端平臺的移動應用開發。它可以與流行的UI框架,例如:Ionic、jQuery Mobile等相結合使用。
2. cordova開發環境搭建
以android爲例,完成開發環境搭建。需要依次下載安裝:
- android SDK Tools
- Gradle
- Node.js
- 設置環境變量
- npm安裝Cordova
在進行下述安裝前,請確保已安裝好JDK。
2.1安裝android SDK
下載網址: http://www.androiddevtools.cn/
下載後,運行exe文件。
Next,檢測到JAVA:
如果沒有在系統找到JDK,會提示訪問:java.oracle.com,點擊後會自動訪問網址,因此,預先安裝好JDK會更好。
Next
Next
選擇安裝路徑。建議在D:\Android\android-sdk,然後Next
完成後出現SDK Manager界面,後續可用其完成擴展更新。
Fetching完成後,彈出:
選擇要安裝的sdk,建議安裝:
(1)Android SDK相關
(2)Android SDK Platform
此外,再安裝一個android 9或者android 8.1.0的SDK Platform(在前面的check框打V),根據要開發的功能需要安裝,不同版本支持的功能有些許差異,不建議安裝最新版本。
(3)extras
安裝extras下的Android support Repository
點”install XX packages”
選擇“accept license”,
等待安裝完成。
出現:
以後需要時可再安裝其他所需內容。
2.2安裝gradle
Android SDK6以後安裝gradle替代了Apache Ant,gradle用於自動編譯。
下載gradle地址:https://services.gradle.org/distributions/
下載gradle-x.x-bin.zip文件(gradle-x.x-all.zip多了源碼src和docs、samples目錄),完成後拷貝到目標目錄解壓。例如:安裝到D:\Android\gradle-6.3目錄。
修改環境變量:在系統path變量增加D:\Android\gradle-6.3\bin;
2.3 安裝Git
Git是源代碼控制管理工具,不僅可以管理代碼,還是下載各種包的工具。
下載地址:www.git-scm.com/downloads
選擇windows,會自動下載符合你操作系統的安裝文件。例如64位windows版本。
下載後運行。安裝路徑也改到D:\android:
此後全部用默認值,下一步,結束安裝。
2.4 安裝Node.js
需要用其npm工具完成後續cordova軟件安裝。
下載地址:http://nodejs.org
選擇最新版本下載。運行:同樣修改安裝路徑:D:\android\nodejs
2.5 設置環境變量
安裝完成上述軟件後,設置環境變量如下:
計算機-屬性-高級系統設置-環境變量-系統變量-Path
編輯該系統變量。
確保有以下內容(若是多個變量之間用;分隔),注意是要自己安裝的對應路徑!
保存path設置。
cmd打開命令窗口,按以下方法依次執行,驗證安裝是否正確:
adb //驗證android
gradle -v //驗證編譯
javac //驗證java
git //驗證git
npm //驗證npm
出現任何問題,都解決後再繼續後續步驟!
2.6 安裝Cordova
在命令窗口中鍵入:
npm install -g cordova
其中:-g
表示安裝爲全局命令方式,完成後驗證:
cordova -v
出現:
則安裝正確!
若出現”“不是內部或外部命令,也不是可執行文件…"的錯誤提示,需要將安裝路徑添加到path環境變量,方法如下:
檢查cordova的安裝路徑和環境變量,在系統變量Path末尾增加該路徑。
一般在以下目錄:C:\Users\xxx\AppData\Roaming\npm;
關閉後,重新打開命令窗口cmd,再次驗證cordova -v
注意:該path路徑必須根據本機實際安裝路徑修改
至此,完成cordova環境安裝。
後期需要更新cordova,可以用如下命令:
npm update -g cordova
3. 建立第一個cordova工程
第一步 創建工程
cmd進入命令行方式(以下每一步都在cmd中完成),鍵入如下命令:
進入要建立工程的程序目錄(根據自己的安裝路徑):
d:
cd \xampp\tomcat\webapps
建立工程:
cordova create myfirst
建立後,目錄結構如下:
第二步 增加android平臺支持
平臺支持在每個工程文件建立後,進入該工程文件目錄,安裝需要支持的平臺,即要開發android 還是ios平臺下的應用,對應每個工程都需要建立自己的平臺支持!
方法是:
在cmd命令窗繼續執行以下命令:
進入工程文件目錄:
cd myfirst
增加android平臺支持:
cordova platforms add android
驗證是否安裝成功:
cordova platforms
會出現如下窗口:
第三步 編譯
在cmd命令窗繼續執行以下命令:
編譯:
cordova compile
生成執行文件:
cordova build
執行build時會首先compile,因此可以用build命令替代編譯。
編譯成功,顯示類似下圖:
第四步 運行程序
用USB連接手機和計算機,打開“開發者模式”-“USB調試”,
cmd窗口運行
cordova run
手機屏幕出現第一個cordova工程的demo畫面