上一章我們介紹了如何創(chuàng)建一個(gè)cordova android項(xiàng)目童社，這章我們介紹一下創(chuàng)建的那個(gè)helloworld項(xiàng)目的代碼忱详，分析其運(yùn)行棉安。
MainActivity.java
我們已經(jīng)將MainActivity導(dǎo)入到了eclipse中。打開(kāi)scr下com.example.hello下的MainActivity.java聊浅。
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">//MainActivity繼承了CordovaActivity
public class MainActivity extends CordovaActivity
{
@Override public void onCreate(Bundle savedInstanceState)
{ super.onCreate(savedInstanceState); // Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
}
}</pre>
學(xué)過(guò)安卓的都知道暑椰，Activity在啟動(dòng)的時(shí)候會(huì)首先調(diào)用onCreate方法霍转。
loadUrl(launchUrl);會(huì)在當(dāng)前的WebView中去加載首頁(yè)，當(dāng)然這個(gè)首頁(yè)是我們自己配置的一汽，在res/xml/config.xml中避消。<contentsrc="index.html"/>。這個(gè)路徑都是指的assets/www下的路徑召夹。
這樣這個(gè)app啟動(dòng)的時(shí)候會(huì)首先調(diào)用這個(gè)MainActivity(當(dāng)然這是在AndroidManifest.xml中配置的)岩喷，然后Activity啟動(dòng)的時(shí)候會(huì)將index.html加載在其WebView中，然后我們就看到了Cordova的頁(yè)面监憎。
index.html
我們?cè)賮?lái)看看index.html中都有什么內(nèi)容纱意。
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><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> </pre>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
在顯示這個(gè)index頁(yè)面的時(shí)候，會(huì)加載兩個(gè)js文件鲸阔。cordova.js就是cordova的api偷霉，調(diào)用原生內(nèi)容用的，相當(dāng)于jar包隶债。
index.js
再看這個(gè)index.js腾它。
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">var app = { // 初始化方法跑筝，會(huì)調(diào)用綁定事件的方法
initialize: function() { this.bindEvents();
}, // 綁定事件的方法,事件可以是這些:
// 'load', 'deviceready', 'offline', and 'online'.
//該事件是在 cordova 載入完成后發(fā)生的事件死讹，它表示cordova 加載完成并準(zhǔn)備訪問(wèn)，yourCallbackFunction曲梗，相當(dāng)于程序的入口功能
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
}, // deviceready 后事件處理
onDeviceReady: function() {
app.receivedEvent('deviceready');
}, // 事件處理赞警，更新DOM妓忍，改變兩個(gè)元素的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);
}
}; //調(diào)用初始化方法
app.initialize();</pre>
加載index.js之后，程序會(huì)首先調(diào)用初始化方法愧旦，初始化的時(shí)候會(huì)去綁定事件監(jiān)聽(tīng)：document.addEventListener('deviceready', this.onDeviceReady, false);
deviceready事件世剖，該事件是在 cordova 載入完成后發(fā)生的事件，它表示cordova 加載完成并準(zhǔn)備訪問(wèn)笤虫，你傳進(jìn)去的回調(diào)函數(shù)旁瘫，相當(dāng)于程序的入口函數(shù)。
當(dāng)cordova準(zhǔn)備好的時(shí)候琼蚯，會(huì)去首先執(zhí)行你傳進(jìn)去的回調(diào)函數(shù)酬凳，這里是onDeviceReady()。這個(gè)方法會(huì)改變DOM元素的css樣式遭庶。
最終效果就是宁仔，當(dāng)cordova沒(méi)有加載完的時(shí)候，頁(yè)面上Apache Cordova下面那里顯示的是：Connecting to Device（背景是灰色）峦睡。加載完之后翎苫，cordova準(zhǔn)備好之后，原來(lái)顯示的消失榨了，現(xiàn)在顯示的是：Device is Ready（背景是綠色）
