如何开始使用带有 Durandal SPA 应用程序的 Phonegap Build？答案

【问题标题】：How to get started using Phonegap Build with a Durandal SPA App?如何开始使用带有 Durandal SPA 应用程序的 Phonegap Build？
【发布时间】：2013-10-21 23:39:15
【问题描述】：

我使用 Durandal 构建了一个 SPA，它在浏览器中运行良好。我现在要做的是用Phonegap（最好使用Phonegap Build）将其包装起来，并将其部署为Android应用程序。

有关该主题的 Durandal 文档 (http://durandaljs.com/documentation/Native-Apps-With-PhoneGap-Cordova/) 非常少。优化应用程序以生成 main-built.js 文件的关键点已完成，就像将 js/css 资产收集到一个地方一样。

但是，它没有提到 Phonegap/Cordova 有 device ready 事件而不是 document ready 事件。我已经按照说明打包了应用程序。它可以在我的 Android 设备上安装，但卡在启动画面上。其他问题被问到卡在启动屏幕上，但那里发布的解决方案无济于事。我不禁认为这里缺少一些基本的东西？！？

我需要在 index.html 中有 Phonegap 特定的代码吗？在任何javascript中？

注意：我使用的是 Durandal 1.2，但同样的问题也适用于 v2.0。

【问题讨论】：

标签： javascript cordova durandal phonegap-build

【解决方案1】：

您可以挂钩到 main.js 中的 Phonegap 设备就绪事件，然后您可以确保设备在 shell 或任何视图激活事件被触发之前已经就绪。此示例检查代理，因此它仍会在浏览器中启动。这是来自我的示例 Durandal 2 / Phonegap Build 项目。

https://github.com/BenSinnott/LandmarkTracker


define(['durandal/app', 'durandal/viewLocator', 'durandal/system'], boot);

function boot(app, viewLocator, system) {
    var useragent = navigator.userAgent.toLowerCase();
    if (useragent.match(/android/) || useragent.match(/iphone/) || useragent.match(/ipad/) || useragent.match('ios') || useragent.match('Windows Phone') || useragent.match('iemobile')) {
        document.addEventListener('deviceready', onDeviceReady, false);
    }
    else {
        onDeviceReady();
    }

    function onDeviceReady() {
        app.title = 'Landmark Tracker';

        app.configurePlugins({
            router: true
        });

        app.start().then(function () {
            viewLocator.useConvention();
            app.setRoot('viewmodels/shell', 'entrance');
        });
    }
}

【讨论】：

谢谢！这正是我正在寻找的那种东西。我对你所做的事情的适应仍然失败，但我还没有机会正确调试，所以看看情况如何。

【解决方案2】：

但是，它没有提到 Phonegap/Cordova 具有设备就绪事件而不是文档就绪事件。

jQuery 可以通过$(document).ready 监听文档就绪，但 HTML/javascript 本身没有文档就绪事件。最接近的纯 javascript 等效项是侦听 DOMContentLoaded 事件。 Phonegap/Cordova 提供设备就绪事件，如记录的here。请务必在您的<head></head> 标签中包含<script type="text/javascript" charset="utf-8" src="cordova.js"></script>。

它在我的 Android 设备上安装正常，但卡在启动屏幕上。

查看您的 config.xml。你有<preference name="splash-screen-duration" value="xxxx"/> xxxx 设置为某个疯狂的高数字吗？

您始终可以在设备就绪触发后调用navigator.splashscreen.hide()，但您需要构建设备就绪侦听器。使用我上面提供的文档很容易做到。如果这不能解决问题，那么我们将需要查看您的一些代码以深入了解发生了什么。

【讨论】：

【解决方案3】：

首先尝试一个未缩小的版本。意味着将所有文件夹复制到您的资产文件夹中。然后看logcat。很可能你有一个js错误。如果可行，请尝试缩小版本并检查该版本是否通过 logcat 引发错误

编辑：请注意，这当然仅适用于 android 中的手动构建，不适用于在线服务。对于 IOS，据我所知，您会在输出窗口中收到错误。

【讨论】：