Cordova應用解析

時間  2019-11-16
標籤 cordova 應用 解析 欄目 Cordova 简体版
原文   原文鏈接

本文承接上篇《使用Cordova命令行界面(CLI)》。javascript

到此咱們徹底作好開發前的準備工做，Cordova應用使用常見的HTML、CSS和JavaScript開發，所以Cordova應用基本等同於Web應用。先看一些Hello World的例子，以便對Cordova應用開發的過程作一些瞭解。最後再看一下官方提供的Hello World示例。css

Hello World

Cordova應用的Hello World能夠只寫一個簡單的Web頁面實現：html

<!DOCTYPE HTML>
<html>
<head>
    <titile>HelloWorld1</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>This is a sample Cordova application</p>
</body>
</html>

若是想在模擬器或物理設備上看到執行效果。回憶以前的內容，按下面步驟作：java

  • 首先新建一個Cordova項目叫好比叫TestCordova。用到咱們以前講的CLI建立項目命令cordova create TestCordova。
  • 在項目文件夾的根目錄下的www文件夾中新建一個html頁面，寫入以上代碼，保存成HelloWorld.html。
  • 修改項目文件夾根目錄下config.xml，找到content配置節，把src屬性改成HelloWorld.html，意思是修改程序啓動頁面。
  • 在模擬器或物理設備上運行程序。使用cordova run命令。

執行效果圖以下：
圖片描述jquery

以上只是對運行過程作的一個簡單的說明。若是不用Cordova run，使用IDE的調試或運行功能固然也是能夠的。關於這方面內容以後作介紹。git

示例實質上生成一個呈現web內容的原生應用，可是沒有使用Cordova框架的API，沒有體現Cordova的優點。實際上全部的web應用均可以打包到Cordova項目中，若是你有一個web應用，想以原生應用的方式在手機上運行，這也是一種實現方式。web

Cordova應用的初始化

把上個例子的HelloWorld.html另存爲HelloWorld2.html並放到同一目錄下。向其中添加一些代碼，做用是在Cordova完成初始化時彈出一個提示窗口告知Cordova已經準備好了。完整代碼以下：apache

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
    <script src="cordova.js" type="text/javascript" charset="uft-8"></script>
    <script type="text/javascript" charset="utf-8">
        function onBodyLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        function onDeviceReady() {
            navigator.notification.alert("Cordova is ready");
        }
    </script>
    <title>HelloWorld1</title>
</head>
<body onload="onBodyLoad()">
    <h1>Hello World</h1>
    <p>This a sample Cordova application</p>
</body>
</html>

截圖以下：
![HelloWorld2](img/07.png)瀏覽器

<head>部分新增了兩處：meta標籤描述了內容類型和viewport(視口)。內容類型是標準的HTML。而viewport告訴瀏覽器內容佔用屏幕多大面積及怎樣縮放內容。app

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />

上面代碼說明html頁面佔用所有屏幕並以其100%大小呈現，而且不容許用戶以任何形式縮放頁面。

viewport和相關屬性不是必需的，若是不設置瀏覽器將使用它的默認設置。

還加載了Cordova JavaScript庫：

<script src="cordova.js" type="text/javascript" charset="uft-8"></script>

這樣就加載了核心的Cordova API庫，應用就可使用核心Cordova功能。由於3.0之後核心API遷移到了插件中，cordova.js文件只保留了一些基本功能。

Cordova應用只有在web應用加載完成纔去訪問Cordova API。原生的Cordova容器在使用JavaScript代碼調用API以前必須完成初始化。基於上述緣由開發者必須讓容器在API初始化完成後告知web應用。須要API的應用邏輯只有才接收到API可用的通知後才能執行。

在這個例子中，通知是經過添加body部分的onload事件定義完成的。

<body onload="onBodyLoad()">

在onBodyLoad函數中註冊了事件監聽器，它告訴應用在Cordova容器在完成初始化任務並觸發deviceready事件後調用onDeviceReady函數。

document.addEventListener("deviceready", onDeviceReady, false);

onDeviceReady函數簡單的顯示了Cordova警告對話框(它和JavaScript對話框不同)告知用戶：

navigator.notification.alert("Cordova is ready");

注意大部分Cordova API遷移到了插件中。要使用Cordova alert方法，必須安裝對話框架插件。使用以前提到的安裝插件命令：

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git

許多Cordova API都由Navigator對象實例化。但不老是這樣，調用API以前要查看API文檔確認。

使用Cordova API

API可用後，用下面的例子說明API的使用，一樣建立一個HelloWorld3.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <meta name="viewport" content="user-scale=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width;">
    <script src="cordova.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        function onBodyLoad(){
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        function onDeviceReady() {
            br = "<br />";

            var element = document.getElementById("appInfo");

            element.innerHTML = 'Cordova Version: ' + device.cordova + br + 'Platform: ' + device.platform + br + 'Model: ' + device.model + br + 'OS Version: ' + device.version;
        }
    </script>
</head>
<body onload="onBodyLoad()">
    <h1>HelloWorld3</h1>
    <p>This is a cordova application that makes calls to Cordova APIs.</p>
    <p id="appInfo">Waiting for Cordova Initialization to complete</p>
</body>
</html>

程序截圖以下：
![HelloWorld3](img/08.png)

ID爲"appInfo"的應用內容顯示了設備信息和Cordova版本。設備信息可經過API獲取(http://cordova.apache.org/docs/en/3.0.0/cordova_device_device.md.html#Device)，示例中使用了API方法的子集。爲了調用API須要安裝插件：

cordova plugin add https://git-wip-us.apache.org.org/repos/asf/cordova-plugin-device.git

提高Cordova應用的用戶界面體驗

Cordova框架提供了訪問設備和應用的功能，但應用界面主題仍是要由開發者使用HTML、CSS和JavaScript本身定義。開發者但願web應用的界面和感受更像原生應用，併產生了許多開源和商業JavaScript移動框架簡化這種工做，如jQuery Mobile、Dojo Mobile和Sencha Touch。

爲簡化建立美觀的Cordova應用工做，Adobe的開發者開發了一個小型、快速的叫Topcoat的CSS庫(http://topcoat.io)，它能夠用來開發簡單、乾淨的UI。Topcoat封裝了一些經常使用的帶有圖像和按鈕的web應用UI元素。它並非像Sencha Touch或jQuery Mobile同樣徹底是HTML5框架，但對於建立乾淨、簡單、快速的web應用UI頗有用。

上述框架在Cordova應用開發中常常用到，所以在這裏強調一下是必要的。下面舉例說明使用jQuery Mobile提高UI效果。jQuery和JQuery Mobile一塊兒使用提供一些有用的UI元素併爲web移動應用定製外觀。

用一樣的方法建立名爲HelloWorld4.html的頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="user-scale=no,initial-scale=1,maxmium-scale=1,minimum-scale=1,width=device-width;"/>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css" />
    <script type="text/javascript" charset="utf-8" src="js/jquery-2.0.2.js"></script>
    <script src="js/jquery.mobile-1.3.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="cordova.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        function onBodyLoad(){
            document.addEventListener("deviceready", onDeviceReady, false);
        }
        function onDeviceReady() {
            br = "<br/>";

            var element = document.getElementById("appInfo");
            element.innerHTML = 'Cordova Version: ' + device.cordova + br + 'Platform: ' + device.platform + br + 'Model: ' + device.model + br + 'OS version: ' + device.version;
        }
    </script>
</head>
<body onload="onBodyLoad()">
    <div data-role="page">
        <div data-role="header" data-position="fixed">
            <h1>Hello World 4</h1>
        </div>
        <div data-role="content">
            <p>This is a Cordova application that makes calls to the Cordova APIs and uses the jQuery Mobile framework.</p>

            <p id="appInfo">Waiting for Cordova Initialization to complete.</p>
        </div>  
        <div data-role="footer" data-position="fixed">
            <h1>Cordova Programming</h1>
        </div>
    </div>
</body>
</html>

程序截圖以下圖：
圖片描述

若是應用在不一樣程序上部署，它們看起來的效果都是同樣的。在複雜點的應用中，如向更深層導航，jQM框架會自動向應用添加移動應用平臺功能，如iOS的後退鍵和Android的退出鍵和菜單。

注意到頁面的頭部加入了一些資源：jQM提供的CSS文件、jQuery和jQuery Mobile的js庫文件。在生產環境中要替換爲相應的壓縮版本。

頁面body部分在一些div標籤中添加由jQM使用的data-role屬性，用來把頁面指定部分格式化爲它們指定的角色的樣式。像data-role爲header的部分被格式化爲漸變背景色並使用data-position="fixed"屬性固定在頁面頂端。一樣，data-role爲footer的部分爲漸變背景色並被固定在頁面底部。data-role=content的部分位於header和footer之間，能夠滾動瀏覽。例子只是簡單的涉及到jQM的一些內容，更多內容請參考jQM的在線文檔或相關書藉。

CLI生成的web應用頁面

由CLI建立項目時生成的項目的web內容位於項目根目錄的www文件夾中。不一樣的文件分開放置，像CSS文件放在css文件夾中，JavaScript文件在js文件夾中。index.html頁面跟前面示例相似，只是把cordova.js放在文件後面導入，這麼作的目的是爲了在加載js文件以前先加載HTML內容並在屏幕上顯示內容。頁面內容以下：

!<DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone-no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maxmium-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>>Hello World</title>
</head>
<body>
    <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="js/index.js"></script>
</body>
</html>

應用簡單顯示了Cordova的Logo和一些閃動的文本。操做頁面元素的js代碼位於index.js中，由文件底部的app.initialize()函數調用。

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');  
    },
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.queryElement('.listening');
        var receivedElement = parentElement('received');

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

app.initialize();

代碼首先註冊了devcieready的監聽器。deviceReady函數執行時向控制檯寫了一些信息，而後更新頁面內容說明Cordova容器已經準備好了。這個示例的js寫法明顯說明Cordova應用的構建過程，相比以前的例子，結構上更像現代的HTML5應用。

好了，如今咱們已經對Cordova開發有了一個初步的印象，下一篇咱們仔細研究一下Cordova開發過程。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程