cordova的詳細介紹請參考這個連結：http://www.zhoujingen.cn/blog/7034.html

我接下來主要將如何搭建。

1.首先你需要下載幾樣東西

1.jdk.

2.android_SDK.

2.安裝這兩個，並配置環境變數

這裡jdk的環境變數配置我就不細說了。

android_SDK的環境變數配置

C:\Development\android-sdk\platform-tools
C:\Development\android-sdk\tools

將這兩個目錄新增到系統path中，注意，這裡一定是你的android-sdk目錄，不要直接用我的奧！

3，下載cordova並安裝平臺等操作

下載cordova是用node本身自帶的npm，所以在這之前你還需要安裝node(這裡預設你已經安裝好了node)

首先你可以在某個盤裡面新建一個資料夾，名字隨意命名（webApp）。然後在命令列中進入到那個目錄下面，在執行下面的操作。

1

安裝Cordova

Cordova的命令列執行在Node.js 上面並且可以通過NPM安裝。 根據 平臺具體指導 安裝相應平臺的依賴。開啟命令提示符或終端，然後鍵入npm install -g cordova.

例如：$ npm install -g cordova

2

建立一個專案

使用命令列建立一個空的Cordova專案。導航到你希望建立專案的目錄，然後鍵入 cordova create <path>

要知道這個命令完整的選項，鍵入cordova help create。

例如cordova create myApp

3.

新增一個平臺

在建立完一個Cordova專案後，導航到專案目錄。在專案目錄中，你需要新增你想構建app的平臺

為了新增平臺， 鍵入 cordova platform add <platform name>。

為了知道你可以新增的平臺，你可以執行cordova platform。

例如 1.cd myApp//首選要進入到那個檔案中

       2.cordova platform add android//新增平臺

4.

執行App

在命令中,鍵入cordova run <platform name>

注意這裡的平臺名可以是browser ，android， iOS，等很多。

例如：cordova run android

安裝好了，我們來看一下你的檔案中的目錄

我們來分析一下文件借結構

hook資料夾是我們的鉤子資料夾，這倆主要用來放鉤子的

platforms資料夾放的都是一些平臺資訊，你新增一個平臺的話，都會在這個資料夾中生成相應的檔案。

plugins檔案主要存放外掛的。

www檔案下主要

這裡我暫時不說，等我說config.xml檔案的時候來說。

config.xml檔案

我來細說一下config.xml檔案。這個檔案是全域性配置檔案。

這裡的name ,description,author顯然可以知道他意思的.分別是專案的名字，描述，以及作者。

<content src='index.html'/>這個標籤標示的是開啟cordova應用程式最先呈現的頁面就是index.html頁面

<plugin>標籤標示的是已經安裝的外掛。

等詳細資訊可以參考官網

好，重點來了，我來說說如何將將遠端web應用程式引入到cordova中，，具體操有一下幾點

第一步：

<allow-navigation href="https://cordovahostedweb-starter.azurewebsites.net" />

將上面這句話新增到config.xml檔案中放在name標籤上面。

這裡href中的地址就是你的遠端首頁面的地址。

第二步

var app = {
    // Application Constructor
    initialize: function() {
    this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');

        // Here, we redirect to the web site.
        var targetUrl = "https://cordovahostedweb-starter.azurewebsites.net/";
        var bkpLink = document.getElementById("bkpLink");
        bkpLink.setAttribute("href", targetUrl);
        bkpLink.text = targetUrl;
        window.location.replace(targetUrl);
},
    // Note: This code is taken from the Cordova CLI template.
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

將你的www檔案下的index.js檔案複製成這個其中targetURL也是你的遠端程式的首頁面。

3

Verifying connectivity..
<a id="bkpLink" href="https://cordovahostedweb-starter.azurewebsites.net">cordovahostedweb.azurewebsites.net</a>

<div class="app">
    <h1>Apache Cordova</h1>
    <div id="deviceready" class="blink">
        <p class="event listening">Connecting to Device</p>
        <p class="event received">Device is Ready</p>
    </div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>

將www資料夾下的index.html檔案內容改為上面的。

5

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://cordovahostedweb-starter.azurewebsites.net https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

將index.html檔案中的meta中變成這樣，其實也就是加上gap:....;後面還是你遠端首頁面的地址。

主要原理是點開cordova程式，他會導航到index.html檔案，然後載入index.html檔案，所以最先顯示的是index.html檔案，然後載入index.js檔案，然後在js檔案中又重定向到你的遠端頁面，主要實現就是這個

這裡附加上參考地址：https://taco.visualstudio.com/en-us/docs/create-a-hosted-app/#

四：如何打包apk

參考文章

http://www.tuicool.com/articles/673mE3m

介紹：

TL;DR

Android app 的打包分為 debug 和 release 兩種，後者是用來發布到應用商店的版本。這篇文章會告訴你 Cordova 如何打包 Android release 版本，也會讓你瞭解 Android app 的打包流程。

建立一個 demo app

為了演示，首先我們需要建立一個 Cordova 專案的基本步驟。如果你已經對此很熟悉，可以跳過這一步。

先全域性安裝 Cordova CLI ：

npm install -g cordova

在 cordova-demo 目錄建立一個專案，ID 為 com.example.cordovaDemo ，專案名為 cordovaDemo 。

cordova create cordova-demo com.example.cordovaDemo cordovaDemo

加上 Android 平臺，這會下載一個 Android 專案的框架，並把版本資訊儲存到 config.xml 。你可以去 platforms/android 目錄下檢視它。

cordova platform add android --save

你可以檢查下平臺需求是否滿足。基本上 Cordova 需要你把 Java SDK， Android SDK 和 Gradle 都配置好。

cordova requirements android

現在一個 Cordova 專案就已經準備好了。你可以嘗試構建一個版本。一切順利的話，你會在 platforms/android/build/outputs/apk 目錄下看到 APK 檔案。這個目錄後面會經常用到，為了方便我們建立一個符號連結 android-apk 。

# 構建 apk
cordova build android

# 建立符號連結 android-apk
ln -s platforms/android/build/outputs/apk android-apk

# 檢視一下這個目錄，你應該會看到 android-debug-unsigned.apk
ls android-apk

搞定！但這個構建的 APK 是 debug 版本的。要構建 release 版本，我們需要先了解一下 Android 手動打包的流程。

Android APK 手動打包流程

Android app 的打包流程大致分為 build , sign , align 三部分。

build是構建 APK 的過程，分為 debug 和 release 兩種。release 是釋出到應用商店的版本。

sign是為 APK 簽名。不管是哪一種 APK 都必須經過數字簽名後才能安裝到裝置上，簽名需要對應的證書（keystore），大部分情況下 APK 都採用的自簽名證書，就是自己生成證書然後給應用簽名。

align是壓縮和優化的步驟，優化後會減少 app 執行時的記憶體開銷。

debug 版本的的打包過程一般由開發工具（比如 Android Studio）自動完成的。開發工具在構建時會自動生成證書然後簽名，不需要我們操心。而 release 版本則需要開發者自己生成證書檔案。Cordova 作為 hybrid app 的框架不像純 Android 開發那麼自動化，所以第一次打 release 包我們需要了解一下手動打包的過程。

Build

首先，我們生成一個 release APK 。這點在 cordova build 命令後加一個 --release 引數局可以。如果成功，你可以在 android-apk 目錄下看到一個 android-release-unsigned.apk 檔案。

cordova build android --release

Sign

我們需要先生成一個數字簽名檔案（keystore）。這個檔案只需要生成一次。以後每次 sign 都用它。

keytool -genkey -v -keystore release-key.keystore -alias cordova-demo -keyalg RSA -keysize 2048 -validity 10000

上面的命令意思是，生成一個 release-key.keystore 的檔案，別名（alias）為 cordova-demo 。

過程中會要求設定 keystore 的密碼和 key 的密碼。我們分別設定為 testing 和 testing2 。這四個屬性要記牢，下一步有用。

然後我們就可以用下面的命令對 APK 簽名了：

jarsigner -verbose -sigalg SHA1 withRSA -digestalg SHA1 -keystore release-key.keystore android-apk/android-release-unsigned.apk cordova-demo
這裡執行有可能會出錯原因是android/android-release-unsigned.apk這裡寫的不對，原因是因為你的apk的位置寫的不對，你可以找到apk將他複製到根目錄下，然後地址改為./android-release-unsigned.apk或者你直接寫你apk的位置。

這個命令中需要傳入證書名 release-key.keystore ，要簽名的 APK android-release-unsigned.apk ，和別名 cordova-demo 。簽名過程中需要先後輸入 keystore 和 key 的密碼。命令執行完後，這個 APK 就已經改變了。注意這個過程沒有生成新檔案。

Align

最後我們要用 zipalign 壓縮和優化 APK ：

zipalign -v 4 android-apk/android-release-unsigned.apk android-apk/cordova-demo.apk

這一步會生成最終的 APK，我們把它命名為 cordova-demo.apk 。它就是可以直接上傳到應用商店的版本。

這一步不操作也可以。

自動打包

一旦有了 keystore 檔案，下次打包就可以很快了。你可以在 cordova build 中指定所有引數來快速打包。這會直接生成一個 android-release.apk 給你。

cordova build android --release -- --keystore="release-key.keystore" --alias=cordova-demo --storePassword=testing --password=testing2

但每次輸入命令列引數是很重複的，Cordova 允許我們建立一個 build.json 配置檔案來簡化操作。檔案內容如下：

{
  "android": {
    "release": {
      "keystore": "release-key.keystore",
      "alias": "cordova-demo",
      "storePassword": "testing",
      "password": "testing2"
    }
  }
}

下次就可以直接用 cordova build --release 了。

為了安全性考慮，建議不要把密碼放在在配置檔案或者命令列中，而是手動輸入。你可以把密碼相關的配置去掉，下次 build 過程中會彈出一個 Java 小視窗，提示你輸入密碼。

用 Gradle 配置自動打包

另一種配置方法是使用 Gradle ，一個 Android 的自動化構建工具。 cordova build android 的過程其實就是使用它。你要在 platforms/android 目錄下建立 release-signing.properties 檔案，內容類似下面這樣：

storeFile=relative/path/to/keystore
storePassword=SECRET1
keyAlias=ALIAS_NAME
keyPassword=SECRET2

這個檔案的名稱和位置也是可以通過 Gradle 的配置 cdvReleaseSigningPropertiesFile 修改的。我覺得一般情況使用 build.json 就足夠了。有興趣的可以看這個 Cordova 官方教程

4.cordova app 圖示更改

如何更改app圖示

1.首先下載外掛

cordova plugin add cordova-plugin-splashscreen

2.在config.xml檔案中新增下面的內容

<platform name="android">
    <!-- you can use any density that exists in the Android project -->
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>   注意這裡的density分別指的是不同手機的解析度，不同解析度的手機採用的而logo大小是不一樣的
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
 
    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
 
<platform name="ios">
    <!-- images are determined by width and height. The following are supported -->
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/[email protected]~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/[email protected]~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/[email protected]~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/[email protected]~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
</platform>
 
<platform name="windows">
    <!-- images are determined by width and height. The following are supported -->
    <splash src="res/screen/windows/splashscreen.png" width="620" height="300"/>
    <splash src="res/screen/windows/splashscreenphone.png" width="1152" height="1920"/>
</platform>
 
<platform name="blackberry10">
    <!-- Add a rim:splash element for each resolution and locale you wish -->
    <!-- http://developer.blackberry.com/html5/documentation/rim_splash_element.html -->
    <rim:splash src="res/screen/blackberry/splashscreen.png"/>
</platform>
 
<preference name="SplashScreenDelay" value="10000" />//這個值表示這個圖示顯示10000毫秒後消失。

上面圖片的路徑，你需要在你的根目錄下面重新建一個資料夾res，然後在這個資料夾下面在建一個screen，再在不同的平臺下面建立不同平臺資料夾，然後在這個資料夾下面新增圖片。

下面還有幾句話：(書寫在config.xml)中的。

<preference name="SplashMaintainAspectRatio" value="true" />

設定為true的話，那麼圖片會適應手機解析度，不會出現拉伸情況。

6.會遇到的bug

安裝後手機app中無法開啟應用程式中的外網連結

解決方案：

在config中白名單中新增

<allow-intent href="http://*/*" />
具體詳情可以參考cordova中的白名單介紹