cordova 一個將web應用程序封裝成app的框架

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/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~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中的白名單介紹