Cordova - onDeviceReady事件监听器背后的逻辑

时间:2017-01-25 15:21:04

标签: javascript cordova

我遵循本教程:https://software.intel.com/en-us/xdk/articles/cordova-core-plugin-camera-short-code-example

在使用Cordova 6.5.0运行iOS 10的iPhone 5上,它完全正常。

但是,我并不了解在设备准备就绪时调用的函数何时以及必须放置什么的逻辑。

如您所见,设备准备就绪时会调用onDeviceReady:

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

// device APIs are available
//
function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
}

但其他API调用,比如拍摄实际图片并不需要该步骤(一旦调用它的按钮可以调用就可以调用该函数):

// A button will call this function
//
function capturePhoto() {
  // Take picture using device camera and retrieve image as base64-encoded string
  navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
    destinationType: destinationType.DATA_URL });
}

将onDeviceReady函数的内容放在capturePhoto函数中并在页面加载完成后等待几秒钟就会破坏整个事情 - 为什么?

另外,为什么navigator.camera.DestinationType与要求您使用Camera.DestinationType的官方教程不同?

到目前为止我从回复中学到了什么

如果我出错了,请纠正我

每当DOM加载时调用javascript cordova函数,就会发生本机cordova代码尚未就绪的情况。但是通过将该代码放在onDocumentReady函数中,您可以绕过它。

2 个答案:

答案 0 :(得分:0)

加载/初始化Cordova API后会触发deviceready事件。如果您正在使用Cordova API中的函数,那么保证它已加载并因此可以使用的最佳方法是仅在库加载后启动应用程序逻辑。即使用deviceready来"初始化"你的申请。

这类似于在加载文档之前尝试访问HTMLElement(例如,绑定事件处理程序)。

E.g。

class App
{
    constructor() {
        console.log("Loaded!");

        this.bindEvents = this.bindEvents.bind(this);
        this.click = this.click.bind(this);
    }

    bindEvents() {
        document.getElementById('button').addEventListener('click', this.click);
    }

    click() {
        navigator.camera.getPicture(...);
    }
}

document.addEventListener('deviceready', () => {
    // Do all bindings here / start using API.
    let app = new App();
    app.bindEvents();
}, false);

你的"按钮"工作并正在启动相机,因为您在应用程序启动之前恰好等待了足够长的时间,然后再单击按钮。您可以尝试点击"按钮"一旦你的应用程序启动,尽快。您可以在设备准备好之前点击它(具体取决于需要多长时间)。

关于您的具体代码,您所做的只是创建一个"别名"用于Camera API。

答案 1 :(得分:0)

完全初始化cordova后,

onDeviceReady事件被触发一次。使用插件时,您需要做的就是确保在捕获onDeviceReady()事件后调用插件接口。每次需要使用插件时都不需要等待它。还有其他值得一提的事件,在这里您可以阅读有关cordova应用程序生命周期的内容:https://cordova.apache.org/docs/en/latest/cordova/events/events.html

尝试捕获不同的事件并打印出一些控制台日志,以查看何时触发不同的事件(良好的学习技术顺便说一下)。

使用插件调用时,需要使用连接插件functon的命名空间。有时这些函数可以从不同的对象访问,这就是为什么教程中存在一些后果。为了确保你会打电话给你想要的东西,你可以随时查看插件文档或插入www目录,在那里你可以找到javascript界面​​文件。