標籤：new eval 效果 事件 block ssl cal 處理 nec
著作權聲明：本文為博主原創文章，未經博主允許不得轉載
上一章我們介紹了如何建立一個cordova android項目，這章我們介紹一下建立的那個helloworld項目的代碼，分析其運行。
MainActivity.java
我們已經將MainActivity匯入到了eclipse中。開啟scr下com.example.hello下的MainActivity.java。
//MainActivity繼承了CordovaActivitypublic class MainActivity extends CordovaActivity{ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Set by <content src="index.html" /> in config.xml loadUrl(launchUrl); }}
學過安卓的都知道，Activity在啟動的時候會首先調用onCreate方法。
loadUrl(launchUrl);會在當前的WebView中去載入首頁，當然這個首頁是我們自己配置的，在res/xml/config.xml中。<content src="index.html" />。這個路徑都是指的assets/www下的路徑。
這樣這個app啟動的時候會首先調用這個MainActivity(當然這是在AndroidManifest.xml中配置的)，然後Activity啟動的時候會將index.html載入在其WebView中，然後我們就看到了Cordova的頁面。
index.html
我們再來看看index.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, maximum-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>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
在顯示這個index頁面的時候，會載入兩個js檔案。cordova.js就是cordova的api，調用原生內容用的，相當於jar包。
index.js
再看這個index.js。
var app = { // 初始化方法，會調用綁定事件的方法 initialize: function() { this.bindEvents(); }, // 綁定事件的方法,事件可以是這些: // ‘load‘, ‘deviceready‘, ‘offline‘, and ‘online‘. //該事件是在 cordova 載入完成後發生的事件，它表示cordova 載入完成並準備訪問，yourCallbackFunction，相當於程式的入口功能 bindEvents: function() { document.addEventListener(‘deviceready‘, this.onDeviceReady, false); }, // deviceready 後事件處理 onDeviceReady: function() { app.receivedEvent(‘deviceready‘); },
// 事件處理，更新DOM，改變兩個元素的css 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();
載入index.js之後，程式會首先調用初始化方法，初始化的時候會去綁定事件監聽：document.addEventListener(‘deviceready‘, this.onDeviceReady, false);
deviceready事件，該事件是在 cordova 載入完成後發生的事件，它表示cordova 載入完成並準備訪問，你傳進去的回呼函數，相當於程式的入口函數。
當cordova準備好的時候，會去首先執行你傳進去的回呼函數，這裡是onDeviceReady()。這個方法會改變DOM元素的css樣式。
最終效果就是，當cordova沒有載入完的時候，頁面上Apache Cordova下面那裡顯示的是：Connecting to Device（背景是灰色）。載入完之後，cordova準備好之後，原來顯示的消失，現在顯示的是：Device is Ready（背景是綠色）
Cordova入門系列（二）分析第一個helloworld項目
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
