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中的白名單介紹