Cordova 框架中第一個應(yīng)該掌握的就是這個 deviceready 事件。采用 Cordova 開發(fā)的應(yīng)用在運行的時候，Cordova 提供的通過 HTML5調(diào)用 Native 功能并不是立即就能使用的，Cordova 框架在讀入 HTML5代碼之后，要進行 HTML5和 Native 建立橋接，在未能完成這個橋接的初始的情況下，是不能調(diào)用 Native 功能的。在 Cordova 框架中，當這個橋接的初始化完成后，會調(diào)用他自身特有的事件，即 deviceready 事件。

所以首先應(yīng)該在 HTML 中注冊 deviceready 的事件監(jiān)聽，在它的 CallBack 函數(shù)中再去使用 Cordova 的功能。

Js 代碼

document.addEventListener('deviceready', function () {
  console.log('Device is Ready!');
  // ....your code
}, false);

需要注意的是，deviceready 事件是在每回讀入 HTML 的時候都會被調(diào)用，而不只是應(yīng)用啟動時調(diào)用。

除了 deviceready 事件以外，Cordova 應(yīng)用在內(nèi)部讀取 HTML 代碼的時候還會調(diào)用一些其他的事件。但這些并不是 Cordova 框架提供的事件，而是嵌入的 Webview 的瀏覽器 Render 引擎提供的。

DOMContentLoaded 事件

頁面的 DOM 內(nèi)容加載完成后即觸發(fā),而無需等待其他資源（CSS、JS）的加載。

load 事件

在 DOMContentLoaded 事件之后，其他資源加載完成后觸發(fā)。

所以，其實調(diào)用的順序是：DOMContentLoaded -> load -> deviceready deviceready 事件一定是在 load 事件之后，所以 load 事件的執(zhí)行速度會影響到 deviceready 事件的調(diào)用。把一些不必要的資源可以在 deviceready 事件之后調(diào)用從而提高執(zhí)行速度。

Js 代碼

document.addEventListener('DOMContentLoaded', function () {
  console.log('DOMContentLoaded OK!');
}, false);

window.addEventListener('load', function () {
  console.log('load OK!');
}, false);

document.addEventListener('deviceready', function () {
  console.log('deviceready OK!');
}, false);

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/4.1.png" alt="picture4.1" />

需要注意的是，在 Cordova 的 app 中如果 js 執(zhí)行失敗，前臺不會有任何提示（后臺會出 log），所以很多時候點擊都沒有任何反應(yīng)，那說明 JS 執(zhí)行出錯了，把以下代碼加到 index.html 中，當應(yīng)用發(fā)生 JS 錯誤的時候，會調(diào)用 window 的 onerror 方法從而顯示錯誤信息，從而捕獲 JavaScript 的 Error 提示用戶。

Js 代碼

window.onerror = function(msg, url, line) {
   var idx = url.lastIndexOf("/");
   if(idx > -1) {
    url = url.substring(idx+1);
   }
   alert("ERROR in " + url + " (line #" + line + "): " + msg);
   return false;
};

http://wiki.jikexueyuan.com/project/cordova-3.x-primer-foundation/images/4.2.png" alt="picture4.2" />

上一篇：使用 Hooks 自定義 build 過程