Cordova跨平臺Web App開發指南（安卓篇）

打包ios包必須用蘋果系統，沒錢買IOS設備，這里只介紹Android平臺打包

一、Cordova簡介’

在進行Cordova開發之前, 先花點時間了解一下的Cordova的原理和Cordova的框架結構.

Cordova是開發跨平臺web App的工具, 使用前端技術來開發App, 可以節省成本和快速發布.
Cordova的底層邏輯是:HTML+CSS搭建頁面, 使用JS和原生平臺互動來展示原生平臺的功能.
Cordova所有功能是建立在各種插件上的, 所以插件開發是Cordova開發的重點.

1.1 純Cordova開發

這種開發模式不需要各原生平臺開發人員參與, 只需要前端猿將開發好的web App放入到Cordova工程中, 然后使用Cordova-CLI(Cordova命令列界面)將web App和各種插件配種好后, 就可以build, run進行各平臺的構建和除錯了. 以下是純Cordova開發的步驟:

Cordova的安裝
使用Cordova-CLI創建Cordova專案----創建Cordova專案后, 前端猿就可以在www/進行開發, 今后的大部分作業都集中在這個檔案下.
1. 添加平臺
2. 添加插件
3. 構建Cordova專案
4. 在各原生平臺上運行Cordova App
Cordova專案更新

二、Cordova的安裝

CLI工具需要使用npm來安裝, 因為它被發布到了npm，按照下面步驟來按照CLI:

下載和安裝Node.js.
安裝cordova 模塊使用Nodejs的npm工具，cordova模塊會被npm工具自動下載，在window中：

-g標志告訴npm全域安裝cordova. 否則, 它將安裝在當前作業目錄的node_modules子目錄中，

三、創建Cordova工程

3.1 創建App
跳轉到你維護源代碼的目錄中，并創建你的cordova專案：
cordova create myCordovaProject com.mycompany.myapp MyCordovaProject

這將會為你的cordova應用創造必須的目錄，默認情況下，cordova create命令生成基于web的應用程式的骨骼，專案的主頁是 www/index.html 檔案，

上面create命令的解釋：

保存專案的路徑，比如上面的“myCordovaProject ”，該路徑是預設的，
專案的id，默認值是io.cordova.hellocordova；安卓中的Java包名，IOS的bundleID都需要用到這個，所以最好不要預設，好好命個名，該值以后可以修改，
專案的name，默認是HelloCordova，該值也可以修改，安卓平臺可能會使用該值作為類名，
上面的id 和 name 都會配到config.xml中

注意：可能遇到的問題：如果出現：'cordova' 不是內部或外部命令，也不是可運行的程式，解決方法：使用node.js command prompt 命令列視窗執行即可

3.2 添加平臺
所有后續命令都需要在專案目錄或者專案目錄的任何子目錄運行:
進入myCordovaProject專案目錄：

給你的App添加目標平臺，我們將會添加'ios'和'android'平臺，并確保他們保存在了config.xml中：
cordova platform add ios --save
cordova platform add android --save

檢查你當前平臺設定狀況:
cordova platform ls

運行add或者remove平臺的命令將會影響專案 platforms的內容，在這個目錄中每個指定平臺都有一個子目錄，

注意:在你使用CLI創建應用的時候，不要修改/platforms/目錄中的任何檔案，當準備構建應用或者重新安裝插件時這個目錄通常會被重寫，

3.3 安裝構建先決條件

要構建和運行App，你需要安裝每個你需要平臺的SDK，另外，當你使用瀏覽器開發你可以添加 browser平臺，它不需要任何平臺SDK，

檢測你是否滿足構建平臺的要求:

cordova requirements

Java JDK: not installed
Failed to run "javac -version", make sure that you have a JDK version 8 installed.
You can get it from the following location:
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
Android SDK: not installed
Failed to find 'ANDROID_SDK_ROOT' environment variable. Try setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.
Android target: not installed
Command failed with ENOENT: android list target
spawn android ENOENT
'android'      ?    ?   ??   ?    е?   
         ?   
Gradle: not installed
Could not find gradle wrapper within Android SDK. Could not find Android SDK directory.
Might need to install Android SDK or set up 'ANDROID_SDK_ROOT' env variable.

Requirements check results for browser:

Requirements check results for ios:
Apple macOS: not installed
Error: Cordova tooling for iOS requires Apple macOS

Requirements check results for windows:
Windows OS: installed Windows 10
MSBuild Tools: not installed
MSBuild tools v.14.0 not found. Please install Visual Studio 2015 Community or higher from https://www.visualstudio.com/downloads/download-visual-studio-vs
Visual Studio: not installed
Required version of Visual Studio not found. Please install Visual Studio 2015 Community or higher from https://www.visualstudio.com/downloads/download-visual-studio-vs
Windows SDK: not installed
Windows SDK not found. Ensure that you have installed Windows 10.0 SDK along with Visual Studio or install Windows 10.0 SDK separately from https://dev.windows.com/en-us/downloads
Windows Phone SDK: not installed
Windows Phone SDK not found. Ensure that you have installed Windows Phone 10.0 SDK along with Visual Studio or install Windows Phone 10.0 SDK separately from https://dev.windows.com/develop/download-phone-sdk
Some of requirements check failed

可以看到，我的電腦環境并不滿足android和ios平臺的要求，

首先我們來滿足下android平臺的環境要求，

3.3.1 JDK

通過java -version 命令檢查一下