cordova 一個將web應(yīng)用程序封裝成app的框架

cordova的詳細(xì)介紹請參考這個鏈接：http://www.zhoujingen.cn/blog/7034.html

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

1.首先你需要下載幾樣?xùn)|西

1.jdk.

2.android_SDK.

2.安裝這兩個，并配置環(huán)境變量

這里jdk的環(huán)境變量配置我就不細(xì)說了。

android_SDK的環(huán)境變量配置

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

將這兩個目錄添加到系統(tǒng)path中，注意，這里一定是你的android-sdk目錄，不要直接用我的奧！

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

下載cordova是用node本身自帶的npm，所以在這之前你還需要安裝node(這里默認(rèn)你已經(jīng)安裝好了node)

首先你可以在某個盤里面新建一個文件夾，名字隨意命名（webApp）。然后在命令行中進入到那個目錄下面，在執(zhí)行下面的操作。

1

安裝Cordova

Cordova的命令行運行在Node.js?上面并且可以通過NPM安裝。 根據(jù)?平臺具體指導(dǎo)?安裝相應(yīng)平臺的依賴。打開命令提示符或終端，然后鍵入npm install -g cordova.

例如：$ npm install -g cordova

2

創(chuàng)建一個項目

使用命令行創(chuàng)建一個空的Cordova項目。導(dǎo)航到你希望創(chuàng)建項目的目錄，然后鍵入?cordova create <path>。

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

例如cordova create myApp

3.

添加一個平臺

在創(chuàng)建完一個Cordova項目后，導(dǎo)航到項目目錄。在項目目錄中，你需要添加你想構(gòu)建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

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

?

我們來分析一下文檔借結(jié)構(gòu)

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

platforms文件夾放的都是一些平臺信息，你添加一個平臺的話，都會在這個文件夾中生成相應(yīng)的文件。

plugins文件主要存放插件的。

www文件下主要

這里我暫時不說，等我說config.xml文件的時候來說。

config.xml文件

我來細(xì)說一下config.xml文件。這個文件是全局配置文件。

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

<content src='index.html'/>這個標(biāo)簽標(biāo)示的是打開cordova應(yīng)用程序最先呈現(xiàn)的頁面就是index.html頁面

<plugin>標(biāo)簽標(biāo)示的是已經(jīng)安裝的插件。

等詳細(xì)信息可以參考官網(wǎng)

好，重點來了，我來說說如何將將遠(yuǎn)端web應(yīng)用程序引入到cordova中，，具體操有一下幾點

?

第一步：

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

將上面這句話添加到config.xml文件中放在name標(biāo)簽上面。

這里href中的地址就是你的遠(yuǎn)端首頁面的地址。

第二步

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文件復(fù)制成這個其中targetURL也是你的遠(yuǎn)端程序的首頁面。

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文件內(nèi)容改為上面的。

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:....;后面還是你遠(yuǎn)端首頁面的地址。

主要原理是點開cordova程序，他會導(dǎo)航到index.html文件，然后加載index.html文件，所以最先顯示的是index.html文件，然后加載index.js文件，然后在js文件中又重定向到你的遠(yuǎn)端頁面，主要實現(xiàn)就是這個

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

?

?

四：如何打包apk

參考文章

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

介紹：

TL;DR

Android app 的打包分為 debug 和 release 兩種，后者是用來發(fā)布到應(yīng)用商店的版本。這篇文章會告訴你 Cordova 如何打包 Android release 版本，也會讓你了解 Android app 的打包流程。

創(chuàng)建一個 demo app

為了演示，首先我們需要創(chuàng)建一個 Cordova 項目的基本步驟。如果你已經(jīng)對此很熟悉，可以跳過這一步。

先全局安裝 Cordova CLI ：

npm install -g cordova

在?cordova-demo?目錄創(chuàng)建一個項目，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

現(xiàn)在一個 Cordova 項目就已經(jīng)準(zhǔn)備好了。你可以嘗試構(gòu)建一個版本。一切順利的話，你會在?platforms/android/build/outputs/apk?目錄下看到 APK 文件。這個目錄后面會經(jīng)常用到，為了方便我們建立一個符號鏈接?android-apk?。

# 構(gòu)建 apk cordova build android# 建立符號鏈接 android-apk ln -s platforms/android/build/outputs/apk android-apk# 查看一下這個目錄，你應(yīng)該會看到 android-debug-unsigned.apk ls android-apk

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

Android APK 手動打包流程

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

build是構(gòu)建 APK 的過程，分為 debug 和 release 兩種。release 是發(fā)布到應(yīng)用商店的版本。

sign是為 APK 簽名。不管是哪一種 APK 都必須經(jīng)過數(shù)字簽名后才能安裝到設(shè)備上，簽名需要對應(yīng)的證書（keystore），大部分情況下 APK 都采用的自簽名證書，就是自己生成證書然后給應(yīng)用簽名。

align是壓縮和優(yōu)化的步驟，優(yōu)化后會減少 app 運行時的內(nèi)存開銷。

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

Build

首先，我們生成一個 release APK 。這點在?cordova build?命令后加一個?--release?參數(shù)局可以。如果成功，你可以在?android-apk?目錄下看到一個?android-release-unsigned.apk?文件。

cordova build android --release

Sign

我們需要先生成一個數(shù)字簽名文件（keystore）。這個文件只需要生成一次。以后每次 sign 都用它。

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

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

過程中會要求設(shè)置 keystore 的密碼和 key 的密碼。我們分別設(shè)置為?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將他復(fù)制到根目錄下，然后地址改為./android-release-unsigned.apk或者你直接寫你apk的位置。

這個命令中需要傳入證書名?release-key.keystore?，要簽名的 APK?android-release-unsigned.apk，和別名?cordova-demo?。簽名過程中需要先后輸入 keystore 和 key 的密碼。命令運行完后，這個 APK 就已經(jīng)改變了。注意這個過程沒有生成新文件。

Align

最后我們要用?zipalign?壓縮和優(yōu)化 APK ：

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

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

這一步不操作也可以。

自動打包

一旦有了 keystore 文件，下次打包就可以很快了。你可以在?cordova build?中指定所有參數(shù)來快速打包。這會直接生成一個?android-release.apk?給你。

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

但每次輸入命令行參數(shù)是很重復(fù)的，Cordova 允許我們建立一個?build.json?配置文件來簡化操作。文件內(nèi)容如下：

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

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

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

用 Gradle 配置自動打包

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

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

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

?

4.cordova app 圖標(biāo)更改

如何更改app圖標(biāo)

1.首先下載插件

cordova plugin add cordova-plugin-splashscreen

2.在config.xml文件中添加下面的內(nèi)容

<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" />//這個值表示這個圖標(biāo)顯示10000毫秒后消失。

上面圖片的路徑，你需要在你的根目錄下面重新建一個文件夾res，然后在這個文件夾下面在建一個screen，再在不同的平臺下面建立不同平臺文件夾，然后在這個文件夾下面添加圖片。

?

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

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

設(shè)置為true的話，那么圖片會適應(yīng)手機分辨率，不會出現(xiàn)拉伸情況。

?

?

6.會遇到的bug

安裝后手機app中無法打開應(yīng)用程序中的外網(wǎng)鏈接

解決方案：

在config中白名單中添加

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

總結(jié)

以上是生活随笔為你收集整理的cordova 一个将web应用程序封装成app的框架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。