cordova開發Hybird APP——開發環境安裝

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畫面

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章