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

How to get started using Phonegap Build with a Durandal SPA App?

本文关键字：SPA Durandal 应用程序 Build Phonegap 何开始 开始      更新时间：2023-09-26

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

关于这个主题（http://durandaljs.com/documentation/Native-Apps-With-PhoneGap-Cordova/）的杜兰达尔文档非常稀少。优化应用程序以生成主构建文件的关键点.js就像将 js/css 资产收集到一个地方一样。

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

我是否需要在索引.html中包含特定于 Phonegap 的代码？在任何JavaScript中？

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

您可以在 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');
        });
    }
}

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

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

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

看看你的配置.xml。你有没有<preference name="splash-screen-duration" value="xxxx"/> xxxx设置为一些疯狂的高数字？

您始终可以在设备就绪触发后调用navigator.splashscreen.hide()，但您需要在设备就绪列表器中构建。使用我上面提供的文档很容易做到。如果这不能解决它，那么我们需要看看你的一些代码来深入研究正在发生的事情。

首先尝试一个未缩小的版本。表示将所有文件夹复制到您的资产文件夹中。然后看看日志猫。很可能你有一个js错误。如果有效，请尝试缩小版本并检查该版本是否通过logcat抛出错误

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

相关文章：