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

Question

我正在关注本教程：https://software.intel.com/en-us/xdk/articles/cordova-core-plugin-camera-short-code-example

它在运行 iOS 10 和 Cordova 6.5.0 的 iPhone 5s 上运行良好

但是，我不明白设备准备就绪时调用的函数中何时以及必须放置什么背后的逻辑。

如您所见，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 函数中，您可以绕过它。

Answer 1

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

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

例如

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 创建一个“别名”。

Answer 2

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

尝试捕获不同的事件并打印出一些控制台日志以查看何时触发了不同的事件（顺便说一句，这是一种很好的学习技巧）。

使用插件调用时，需要使用挂接插件函数的命名空间。有时这些函数可以从不同的对象访问，这就是为什么教程中有一些无关紧要的原因。为确保您将调用您想要的，您可以随时查看插件文档或插件 www 目录，您可以在其中找到 javascript 接口文件。