2. 程式人生 > >cordova 一個將web應用程式封裝成app的框架

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

阿新 • • 發佈：2019-01-07

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

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

相關推薦

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

我接下來主要將如何搭建。 1.首先你需要下載幾樣東西 1.jdk. 2.android_SDK. 2.安裝這兩個，並配置環境變數 這裡jdk的環境變數配置我就不細說了。 android_SDK的環境變數配置 C:\Development\android-sdk\platf

使用Visual Studio 2017 建立第一個Python web應用程式

一：建立一個Web Project 開啟 Open Visual Studio 2017 軟體 , 如下圖 在主介面選擇File->New->Project 在“新建專案”對話方塊中，選擇Installed下面的Python下的Web，

開發一個漸進式Web應用程式（PWA）前都需要了解什麼？

轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。 原文出處：https://dzone.com/articles/how-to-build-a-progressive-web-app-pwa-with-javasc   自蘋果推出了iPhone應用商

用HBuilder把web應用套殼成app

首先下載HBuilder 下載全版本的！！ 然後建立個新專案  這種的可以讓我們編寫js+html 簡單的ajax就可以變成app，上手完全沒難度 他會有一個例項，你可以直接打包，然後測試下功能，看看怎麼實現的 https://download.csdn.net/do

Spring boot 官網學習筆記 - 開發第一個Spring boot web應用程式

Creating the POM <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:

將一個簡單的python程式打包成加密的docker映象並對外提供介面

環境：python2.7   docker:一、一個簡單的python程式既然是一個簡單的python程式，那我們就實現一個簡單的加法功能即可。#coding=utf-8 import random def add(aStr,bStr):     map={}     t

一個簡單的用ASP.NET/C#開發的元件化Web應用程式（附原始碼）

==============================================================================1）建立一個類來處理使用者登入，將該類編譯成一個裝配件（assembly），併發布到站點的bin目錄下。========

Python中的一個糟糕的Web應用程式

一、不安全的Web程式示例。 下面展示一個不安全的Web應用程式。 這個程式碼採用了Flask框架，但是不安全的原因不是因為使用了Flask。   上面的程式碼很危險，無法抵禦現在Web上諸多向量的重要攻擊。 先引入上述程式碼中出現的四個模板。 更

c# 將winform窗體應用程式編譯成dll

1. 建立一個新工程。 2. 編輯你需要的窗體。 3. 執行，除錯。保證你的窗體功能正常了。 4. 在你的“解決方案”面板上（如果沒有，就點Ctrl-Alt-L），找到你的工程（預設是第二行）。點選滑鼠右鍵。 5. 點選“屬性”選單項。 6. 如果是2003，會出來一個

ASP.NET Core 中文文件 第二章 指南（3）用 Visual Studio 釋出一個 Azure 雲 Web 應用程式

設定開發環境 注意 如果你的機器之前任何依賴都沒有安裝過，SDK 的安裝時間將會超過30分鐘。 建立一個 Web 應用程式 在 Visual Studio 的 Start 頁面，點選 New Project。 另外，你也可以通過選單新建專案。點選 File > New > Proje

將宣告性安全用於 Web 應用程式

下列主題描述了在 web.xml 和 weblogic.xml 檔案中用於定義 Web 應用程式的安全要求的部署描述符元素： web.xml 部署描述符 WebLogic Server 支援以下與 web.xml 安全相關的部署描述符元素： auth-const

Net Core 學習入門（三）---------第一個web應用程式

 使用vs2017，新增一個新專案-asp.net core web應用程式。          結構如圖，        wwwroot放了網站的靜態資源如css、js、image檔案；        appsetting.json是應用程式的配置檔案。        bu

將開發完成的java web應用程式部署到tomcat伺服器上的方法

方法一：通過複製web應用到tomcat中實現 通過複製web應用到tomcat中實現時，首先需要將web應用資料夾複製到tomcat安裝目錄下的webapps資料夾中，然後啟動tomcat伺服器，再開啟IE瀏覽器，最後在IE瀏覽器的位址列中輸入“http://伺服器IP：

一鍵將Web應用發布到雲-Azure Web App

功能 解決 行業 service ima 跨平臺 平臺 java版本 node 我們現在越來越多的傳統應用，逐步向雲端遷移，原先私有雲的部署模式，逐步向雲端PaaS IaaS轉變。例如： 我們在雲端Azure中申請VM虛擬機，將我們的Web應用部署到VM的IIS中，同時做

將web項目打包成手機app的方法

cordova mage cor build builder -1 文件 名稱 -a 之前使用ionic開發的時候使用cordova打包，現在項目使用的是vue，記錄一下打包的過程: 1、下載HBuilder編輯器http://www.dcloud.io/，成功之後註冊賬號

XWAF——Web應用程式框架

XWAF框架簡介 版本：V1.0.0.0 XWAF是一個基於java反射和Servlet 技術的Web應用程式框架。其英文全稱為“eXtensible Web Applica

理解Web應用程式的程式碼結構和執行原理（3）

1、理解Web應用程式的執行原理和機制        Web應用程式是基於瀏覽器/伺服器模式（也稱B/S架構）的應用程式，它開發完成後，需要部署到Web伺服器上才能正常執行，與使用者互動的客戶端是網頁瀏覽器。 瀏覽器負責顯示來自伺服器的資料和接受使用者的輸入資料，也

PWA 漸進式Web應用程式 - 解釋

想象一下，如果一個網站上所有的功能都能夠作為一個移動應用程式為使用者所用——任何裝置上都可以使用、可接收所有的通知、離線模式可用，為了實現這個願景，2015年，谷歌創造了漸進式Web應用程式(PWA)。什麼是PWA?使用PWA對企業有哪些好處? 　　什麼是PWA? 　　PWA是指可以在任何瀏覽器

獨立部署asp.net core 2.1 Web應用程式

1.建立asp.net core 2.0  Web應用程式 新增引用： Microsoft.EntityFrameworkCore.Sqlite Microsoft.EntityFrameworkCore.Sqlite.Design 2.配置Sqlite資料庫 修改Startup.cs檔案

Java嵌入式資料庫H2學習總結(二)——在Web應用程式中使用H2資料庫

一、搭建測試環境和專案 1.1、搭建JavaWeb測試專案 　　建立一個【H2DBTest】JavaWeb專案，找到H2資料庫的jar檔案，如下圖所示： 　　 　　H2資料庫就一個jar檔案，這個Jar檔案裡面包含了使用JDBC方式連線H2資料庫時使用的驅動類，將"h2-1.4.183.jar"加入到