Cordova 3.x 基础(4) -- deviceready事件
程序员文章站
2022-05-16 09:10:01
...
Cordova框架中第一个应该掌握的就是这个deviceready事件。采用Cordova开发的应用在运行的时候,Cordova提供的通过HTML5调用Native功能并不是立即就能使用的,Cordova框架在读入HTML5代码之后,要进行HTML5和Native建立桥接,在未能完成这个桥接的初始的情况下,是不能调用Native功能的。在Cordova框架中,当这个桥接的初始化完成后,会调用他自身特有的事件,即deviceready事件。
所以首先应该在HTML中注册deviceready的事件监听,在它的CallBack函数中再去使用Cordova的功能。
需要注意的是,deviceready事件是在每回读入HTML的时候都会被调用,而不只是应用启动时调用。
除了deviceready事件以外,Cordova应用在内部读取HTML代码的时候还会调用一些其他的事件。但这些并不是Cordova框架提供的事件,而是嵌入的Webview的浏览器Render引擎提供的。
DOMContentLoaded事件
页面的DOM内容加载完成后即触发,而无需等待其他资源(CSS、JS)的加载。
load事件
在DOMContentLoaded事件之后,其他资源加载完成后触发。
所以,其实调用的顺序是:DOMContentLoaded -> load -> deviceready
deviceready事件一定是在load事件之后,所以load事件的执行速度会影响到deviceready事件的调用。把一些不必要的资源可以在deviceready事件之后调用从而提高执行速度。
需要注意的是,在Cordova的app中如果js执行失败,前台不会有任何提示(后台会出log),所以很多时候点击都没有任何反应,那说明JS执行出错了,把以下代码加到index.html中,当应用发生JS错误的时候,会调用window的onerror方法从而显示错误信息,从而捕获JavaScript的Error提示用户。
所以首先应该在HTML中注册deviceready的事件监听,在它的CallBack函数中再去使用Cordova的功能。
document.addEventListener('deviceready', function () { console.log('Device is Ready!'); // ....your code }, false);
需要注意的是,deviceready事件是在每回读入HTML的时候都会被调用,而不只是应用启动时调用。
除了deviceready事件以外,Cordova应用在内部读取HTML代码的时候还会调用一些其他的事件。但这些并不是Cordova框架提供的事件,而是嵌入的Webview的浏览器Render引擎提供的。
DOMContentLoaded事件
页面的DOM内容加载完成后即触发,而无需等待其他资源(CSS、JS)的加载。
load事件
在DOMContentLoaded事件之后,其他资源加载完成后触发。
所以,其实调用的顺序是:DOMContentLoaded -> load -> deviceready
deviceready事件一定是在load事件之后,所以load事件的执行速度会影响到deviceready事件的调用。把一些不必要的资源可以在deviceready事件之后调用从而提高执行速度。
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);
需要注意的是,在Cordova的app中如果js执行失败,前台不会有任何提示(后台会出log),所以很多时候点击都没有任何反应,那说明JS执行出错了,把以下代码加到index.html中,当应用发生JS错误的时候,会调用window的onerror方法从而显示错误信息,从而捕获JavaScript的Error提示用户。
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; };
推荐阅读
-
Vue vuecli4.x使用声明式渲染、条件与循环、事件绑定、双向绑定基础用法
-
Cordova 3.x 基础(9) -- UI框架jQuery Mobile
-
Cordova 3.x 基础(7) -- Native API的使用
-
Cordova 3.x 基础(8) -- 几个不可或缺的lib
-
Cordova 3.x 基础(10) -- UI框架Ionic Framework
-
Cordova 3.x 基础(2) -- 应用图标icon和启动页面SplashScreen
-
Cordova 3.x 基础(3) -- 调试工具Debug
-
Cordova 3.x 基础(1) -- 环境搭建(Windows / Android)
-
Cordova 3.x 基础(11) -- JS是如何调用本地API的?
-
Cordova 3.x 基础(4) -- deviceready事件