如何开始使用带有Durandal SPA App的Phonegap Build?

时间:2013-10-21 23:39:15

标签: javascript cordova durandal phonegap-build

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

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

但是,它没有提及任何关于Phonegap / Cordova有device ready事件而不是document ready事件的事情。我按照说明打包了应用程序。它安装在我的Android设备上,但卡在启动画面上。其他问题已经被问到被困在启动画面上,但那里发布的解决方案没有帮助。我不禁想到这里缺少一些基本的东西?!?

我是否需要在index.html中使用Phonegap特定代码?在任何JavaScript?

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

3 个答案:

答案 0 :(得分:7)

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

答案 1 :(得分:2)

  

但是,它没有提及有关Phonegap / Cordova有设备就绪事件而不是文件准备事件的任何内容。

jQuery可以通过$(document).ready监听文档,但HTML / javascript本身没有文档就绪事件。最接近的纯javascript等价物是监听DOMContentLoaded事件。 Phonegap / Cordova提供了设备就绪事件,记录为here。请务必在<script type="text/javascript" charset="utf-8" src="cordova.js"></script>代码中加入<head></head>

  

它安装在我的Android设备上,但卡在启动画面上。

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

您可以在设备准备好之后始终呼叫navigator.splashscreen.hide(),但您需要内置设备准备列表。使用我上面提供的文档很容易做到。如果没有解决它,那么我们需要看看你的一些代码来深入了解发生的事情。

答案 2 :(得分:1)

首先尝试一个未经宣传的版本。表示将所有文件夹复制到资产文件夹中。然后看看logcat。很可能你有一个js错误。如果可行则尝试缩小版本并检查是否通过logcat

抛出错误

编辑:sry这当然仅适用于android中的手动构建而不适用于在线服务。对于IOS,我记得你会在输出窗口中抛出错误。