整理記錄使用cordova創建app應用程序並將其部署至Android系統移動設備上操作過程,具體如下:
一、前期安裝環境
二、Cordova的安裝及使用
一、前期安裝環境
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(如無法打開請自備翻牆梯),下載直接安裝
4. 添加SDK包
安裝Android SDK后,您還必須安裝您希望定位的API級別(如無法打開請自備翻牆梯)的軟件包。建議您安裝您的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工具需要設置一些環境變量才能正常工作。應更新以下變量:
(1)將ANDROID_HOME
環境變量設置為Android SDK安裝的位置(因為我們電腦上已安裝Android Studio,這里直接填寫Android Studio的安裝路徑,我的安裝路徑為 E:\AndroidStudio)
(2)此外,還建議你添加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創建應用、運行及編譯
(1)創建應用
轉到你想創建app的目錄,創建一個cordova項目:
$ cordova create hello com.example.hello HelloWorld
(備注:如果想查看安裝APP的進度,可以添加命令行選項 -d 。)
cordova create命令的參數如下:
- 第一個參數是Cordova APP項目的文件目錄,不可選;
- 第二個參數是APP項目的域名標識,可選;
- 第三個參數是APP應用的標題,可選。這個標題也可以后期在config.xml中進行修改。默認值是HelloCordova。
(2)為APP添加運行平台
所有后續命令需要在項目的目錄或項目任何子目錄中運行:
比如我創建的項目在 E:\cordova\hello,那么先使用 cd 命令,切換到hello 目錄下
$ e:
$ cd cordova
$ cd hello
添加您要定位到應用程序的平台,此次項目暫時只添加“ android ”平台,我們在添加文應用程序平后需確保他們得到保存config.xml
和package.json。
$ cordova platform add browser //添加瀏覽器平台
$ cordova platform add android //添加android平台
在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
(3) 在特定平台上運行APP
一定要執行過cordova platform add命令,添加了特定平台,才能指定cordova run操作,在該運行平台上瀏覽效果。
例如,在瀏覽器中運行MyApp程序:
$ cordova run browser
此時,瀏覽器自動訪問http://localhost:8000/,即可查看到如下界面,說明新建的默認APP項目已經可以跑起來了:
(4)編譯Cordova APP
在編輯APP前可以嘗試檢查您是否滿足構建平台的要求:
信息全部顯示 installed為正常,如果飄紅或提示某些報錯,則按照提示自行百度繼續安裝
$ cordova requirements
Requirements check results for android:
Java JDK: installed .
Android SDK: installed
Android 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:23
Gradle: installed
Requirements check results for ios:
Apple OS X: not installed
Cordova tooling for iOS requires Apple OS X
Error: 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
3. 在模擬器和設備中運行
我是用的安卓模擬器 Bluestacks藍疊、海馬玩模擬器,直接打開本地編輯好的 apk 文件,安裝即可在模擬器中運行
記錄到這里,希望能給正在配置開發環境的你,提供一些幫助,文中有寫的不明白或者安裝中遇到問題,可留言,大家一起成長進步。