Cordova 開發環境搭建及建立第一個app

標籤：dex   更新   .com   host   下載安裝   沒有   conf   管理程式   uid   

整理記錄使用cordova建立app應用程式並將其部署至Android系統行動裝置上詳細過程，具體如下：

一、前期安裝環境

1. 安裝JDK（java開發套件）

2. 安裝gradle

3. 安裝Android SDK

4. 添加SDK包

5. 設定環境變數

 

二、Cordova的安裝及使用

1. 安裝Cordova

2. 使用Cordova建立應用、運行及編譯

3. 在模擬器和裝置中運行

 

 一、前期安裝環境

1. 安裝JDK（java開發套件）

安裝Java開發套件（JDK）8 或更高版本（http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html）

安裝時記住首先要查看自己的windows電腦是32位的還是64位的，這裡想下載相應的位元的jdk，否則後面會出錯的。

在Windows雙擊安裝完成後，還需要根據您的JDK安裝路徑設定環境變數；在mac上無需設定環境變數；

具體設定方法：電腦——屬性——進階系統設定——環境變數 或者 直接在 開始——程式——搜尋 “ 環境變數 ”

 

以下操作都在“系統變數”下進行：

(1)建立->變數名"  JAVA_HOME  "，變數值" C:\Program Files\Java\jdk1.8.0_13 1"（即JDK的安裝路徑） 
(2)編輯->變數名"  Path  "，在原變數值的最後面加上“  ;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin ” （切記不要掉了 前面的 ; ）
(3)建立->變數名“  CLASSPATH  ”,變數值“ .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar ”（注意最前面有一點）

 

如：JAVA_HOME環境變數的操作如下：

 

環境變數配置完成後，在控制台分別輸入java，javac，java -version 命令，可正常顯示JDK的編譯器資訊，包括修改命令的文法和參數選項等資訊，說明環境配置正確。

 

2. 安裝gradle

gradle官網：https://gradle.org/

下載gradle：https://gradle.org/releases/ 

可選擇較新版本下載，下載下來是個zip包，解壓放至 D:\Program Files\ 下，

1. 建立系統變數 GRADLE_HOME， 變數值為gradle的路徑：D:\Program Files\gradle-4.1-bin\gradle-4.1

2. 修改環境變數 Path，即追加 %GRADLE_HOME%\BIN;

 

配置完成後，在dos命令視窗 在彈出的視窗輸入命令列： gradle -v；

 

3. 安裝Android SDK

安裝Android Studio（如無法開啟請自備FQ梯），下載直接安裝

 

4. 添加SDK包

安裝Android SDK後，您還必須安裝您希望定位的API層級（如無法開啟請自備FQ梯）的軟體包。建議您安裝您的cordova-android版本支援的最高SDK版本。具體安裝方法如下：

安裝完成後雙擊“SDK Manager.exe”，開啟SDK管理程式，確保以下內容已經安裝：

1. （必備！）符合你目標Android版本的Android Platform SDK。Android SDK 平台工具包含Android平台所需的工具

2. （必備！）Android SDK build-tools version 19.1.0 或者高於此版本。Android SDK 構建工具主要用來構建Android應用

3. （推薦）Android支援存放庫，在 “ Extras ” 下找到。包含支援庫的本地 Maven 存放庫，該存放庫提供了一組豐富的 API，這些 API 相容大多數版本的 Android。該工具是 Android Wear、Android TV 和 Google Cast 等產品的必備工具。

大家可以在這一步可以可以先只裝框選的幾個，其餘的全部取消勾選，因為下載安裝速度實在太慢了，如果下多了，估計一天都下不完，後續如果有需要再來安裝也可以

 

 

5. 設定環境變數

 Cordova的CLI工具需要設定一些環境變數才能正常工作。CLI將嘗試為您設定這些變數，但在某些情況下，您可能需要手動設定。應更新以下變數：

（1）將JAVA_HOME環境變數設定為JDK安裝的位置（此操作在安裝jdk時已設定）

（2）將ANDROID_HOME環境變數設定為Android SDK安裝的位置（因為我們電腦上已安裝Android Studio，這裡直接填寫Android Studio的安裝路徑，我的安裝路徑為  E:\AndroidStudio）



（3）此外，還建議你添加了Android SDK的tools，tools/bin和platform-tools目錄到您的PATH

 

 二、Cordova的安裝及使用

1. 安裝Cordova

Cordova命令列工具以npm軟體包的形式發布。要安裝cordova命令列工具，請按照下列步驟操作：

1.下載並安裝Node.js

2.（可選）如果您還沒有git用戶端，請下載並安裝。安裝後，您應該可以git 在命令列中調用。

3. 通過國內鏡像安裝 Cordova

因為國內防火牆緣故可能無法從http://www.npmjs.org/下載Cordova，於是推薦我們在實際操作中使用國內鏡像來進行cordova的安裝，不然在後續會出現無法繼續的現象。具體方法如下：

（方法1） 通過config命令：（臨時指定鏡像源）

$ npm config set registry https://registry.npm.taobao.org $ npm install -g cordova

　　

（方法2）命令列指定：（臨時指定鏡像源）

$ npm --registry https://registry.npm.taobao.org info underscore

　　

（方法3）編輯 npmrc 檔案，並加入如下內容：（推薦此種方法，永久指定資料來源）

registry = https://registry.npm.taobao.org

下載Cordova後，通過以下命令可查看當前的Cordova版本：

$ cordova -v

 

2. 使用Cordova建立應用、運行及編譯

轉到你想建立app的目錄，建立一個cordova項目：

$ cordova create hello com.example.hello HelloWorld

（備忘：如果想查看安裝APP的進度，可以添加命令列選項 -d 。）

cordova create命令的參數如下：

• 第一個參數是Cordova APP項目的檔案目錄，不可選；
• 第二個參數是APP項目的網域名稱標識，可選；
• 第三個參數是APP應用的標題，可選。這個標題也可以後期在config.xml中進行修改。預設值是HelloCordova。

 

為APP添加運行平台

所有後續命令需要在項目的目錄或任何子目錄中運行：

 

比如我建立的項目在  E:\cordova\hello，那麼先使用 cd 命令，切換到hello 目錄下

$ e:$ cd cordova$ cd hello

添加您要定位到應用程式的平台，這裡暫時說明添加“android”平台，後續有需要補充添加“IOS”平台，在添加文應用程式平後需確保他們得到儲存config.xml和package.json。

$ cordova platform add browser

$ cordova platform add android

檢查您當前的平台集：

$ cordova platform ls

在Mac中，可添加的平台有：

$ cordova platform add ios$ cordova platform add amazon-fireos$ cordova platform add android$ cordova platform add blackberry10$ cordova platform add firefoxos

　　

在Windows中，可添加的平台有：

$ cordova platform add wp8$ cordova platform add windows$ cordova platform add amazon-fireos$ cordova platform add android$ cordova platform add blackberry10$ cordova platform add firefoxos

　

列出當前的cordova運行平台：

$ cordova platforms ls

 

刪除當前的運行平台：

$ cordova platform remove blackberry10$ cordova platform rm android

　　

　

4. 在特定平台上運行APP

一定要執行過cordova platform add的特定平台，才能指定cordova run操作，在該運行平台上瀏覽效果。

例如，在瀏覽器中運行MyApp程式：

$ cordova run browser

　　

此時，瀏覽器自動訪問http://localhost:8000/，即可查看到如下介面，說明建立的預設APP項目已經可以跑起來了：

 

 編譯Cordova APP

在編輯APP前可檢查您是否滿足構建平台的要求：

資訊全部顯示 installed為正常，如果飄紅或提示某些報錯，則按照提示自行百度繼續安裝

$ cordova requirementsRequirements check results for android:Java JDK: installed .Android SDK: installedAndroid target: installed android-19,android-21,android-22,android-23,Google Inc.:Google APIs:19,Google Inc.:Google APIs (x86 System Image):19,Google Inc.:Google APIs:23Gradle: installedRequirements check results for ios:Apple OS X: not installedCordova tooling for iOS requires Apple OS XError: Some of requirements check failed

　　

$ cordova build

　　

還可以選擇編譯特定的運行平台代碼：

$ cordova build ios

cordova build ios命令相當於一下兩條命令的簡寫：

$ cordova prepare ios$ cordova compile ios

build命令成功執行後，在對應檔案會產生應用安裝檔案

E:/cordova/hello/platforms/android/build/outputs/apk/android-debug.apk

 

Cordova 開發環境搭建及建立第一個app