将Durandaljs / Phonegap应用程序部署到android

时间:2013-10-27 14:09:10

标签: javascript android cordova requirejs durandal

我需要帮助,我的灵魂就在这里。 我用durandaljs开发了一个应用程序,我一直在浏览器上进行测试,到目前为止,它就像一个梦想!然后我尝试将应用程序部署到Android设备上,所有地狱都破裂了!

我按照herehere的指示,使用Node优化了我与Weyland的构建。我在app文件夹中得到一个main-built.js文件,一个build文件夹里面包含app和lib文件夹中的所有内容(eek !!!)。所以第一个问题,我怎么复制到我的phonegap android www文件夹;构建的内容或我初始申请的内容?

指南说构建包含Almond的自定义版本所以我不需要在我的应用程序中加载requirejs(耶!)我只需要将requirejs脚本标记更改为指向main-built(哪一个) ./build/app/中的一个或./app ??中的一个。)

所以我在我的初始应用程序中使用了一个,现在我的index.html中只有两个脚本引用

<script type="text/javascript"  src="phonegap.js"></script>
<script src="./app/main-built.js"></script>

在我的main.js中回溯一下;我一直在想如何确保应用程序没有启动,直到deviceready被触发并且dom已经加载。我看到了这个youtube video,我从这些人的代码中得到了一个提示,所以现在我的main.js在优化之前看起来像这样

requirejs.config({
paths: {
    'text': '../lib/require/text',
    'async': '../lib/require/async',
    'domReady': '../lib/require/domReady',
    'durandal': '../lib/durandal/js',
    'plugins': '../lib/durandal/js/plugins',
    'transitions': '../lib/durandal/js/transitions',
    'knockout': '../lib/knockout/knockout-2.3.0',
    'bootstrap': '../lib/bootstrap/js/bootstrap',
    'jquery': '../lib/jquery/jquery-1.9.1',
    'jpanelmenu': '../lib/jpanelMenu/jquery.jpanelmenu.min'
},
shim: {
    'bootstrap': {
        deps: ['jquery'],
        exports: 'jQuery'
    }        
}
});


define(['domReady', 'durandal/system', 'durandal/app', 'durandal/viewLocator', 'scripts/dealtag'], function (domReady, system, app, viewLocator, dealtag) {

domReady(function () {
    var useragent = navigator.userAgent.toLowerCase();

    if (useragent.match(/android/) || useragent.match(/iphone/) || useragent.match(/ipad/) || useragent.match('ios')) {
        document.addEventListener('deviceready', onDeviceReady, false);
    }
    else {
        onDeviceReady('desktop');
    }
});

function onDeviceReady(desktop) {
    if (desktop !== 'desktop')
        cordova.exec(null, null, 'SplashScreen', 'hide', []);

    app.title = 'My App';
    app.configurePlugins({
        router: true,
        dialog: true,
        widget: true
    });

    app.start().then(function () {
        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();
       ....my own initialization code

    });
}
});

所以回到优化后,我将build + my css文件夹的内容复制到www文件夹中,运行phonegap local build android;然后我将其部署到我的Android设备。应用程序的第一页(注册页面)加载正常,在logcat中我可以看到很多相同的东西,我可以在浏览器控制台中看到,包括我自己的console.log检查点。但是,当我点击链接转到任何其他页面时,我看到的只是我的设备上的白色屏幕以及以下内容中的永不停止的错误 logcat

有没有人知道我做错了什么人似乎正在使用durandaljs为Android开发。提前感谢您提供任何帮助。

1 个答案:

答案 0 :(得分:1)

我弄清楚“混乱”的原因是什么。如果您在迁移到durandaljs之前一直在与Sammyjs进行路由,那么您也可能会遇到这种混乱。使用sammyjs,在视图的href属性中有一个路径就像一个链接,并自动导航到相应的路径。像这样的东西

<a href="#mypage">My Page</a>

或使用ko绑定

<a data-bind="attr: {href: '#mypage/' + id}"></a>

这让durandaljs疯狂!在durandal中创建一个函数,你可以像这样查看模型

define(['plugins/router', 'knockout'], function (router, ko) {
var myviewmodel= function () {
    this.list= ko.observableArray();
}
....
myviewmodel.prototype.showItem = function (item) {
    router.navigate('mypage/' + item.id);
}

return myviewmodel;
});

然后在您的视图中,您可以

<a data-bind="click: $parent.showDeals"> <!-- if within a list context -->

<a data-bind="click: showDeals">

我希望这可以拯救某人不必要的悲痛,我必须经历数小时才能找出问题所在。