使用durandal创建一个Android应用程序

时间:2013-10-29 04:37:52

标签: cordova durandal android mimosa

我昨天刚开始与durandal一起试用Android应用程序开发。这是我在app开发中的第一次尝试。

我使用含羞草进行docs,并没有像预期的那样进行锻炼。

涵盖的步骤

  • 从durandal下载入门套件。
  • 执行mimosa build -mo并获得 main-built.js
  • 将所有文件从资产复制到phonegap示例项目。
  • 包含在phonegap项目的index.html中的main-built.js的路径。

我必须在index.html中进行所有更改

目前看起来像是

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>PhoneGap</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>
        </div>
        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/main-built.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

我需要做些什么来使durandal的入门套件成为Android应用程序?

2 个答案:

答案 0 :(得分:1)

我已经使用Durandal / Phonegap为android和ios做了一些应用程序,我自己走了同样的道路,这并不好笑,但我离题了。 index.html中的第一个app.initialize()是NO-NO。绝对不是去这里的方式。你要做的是保持你的索引看起来durandal喜欢它 - 空的所有javascript!。例外是phonegap.js,您需要直接在index.html中引用它。我还没有成功地想出异步加载和初始化cordova,但那里有一些资源。

所有的魔法都像你在main.js中所期望的那样发生,你显然会在用含羞草或者weyland建造之前这样做。见下文

define(['durandal/system', 'durandal/app', 'durandal/viewLocator'],

function (system, app, viewLocator) {

    document.addEventListener('deviceready', function(){ setTimeout(onDeviceReady, 500); }, false);

    function onDeviceReady(){
    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();

        app.setRoot('viewmodels/shell', 'entrance');
    });
   };
});

我setTimeout持续1/2秒等待cordova在调用函数之前完成它的业务,否则我有一些不一致的问题。 将main.js重写为AMD模块并将其注入shell。然后,您可以从shell.js中的activate或compositionComplete调用app.initialize。

GOTCHA#1

在Android平台上工作时,你可能会无意中遇到另一个问题,这让我几乎把头发撕成了几天。当您在视图中进行链接时,您可能会想要<a href="#somewhere">Go Somewhere</a> Android不喜欢这样,它只会在logcat中发出大量的乱码。你最好这样做<a data-bind="click:goSomewhere">Go Somewhere</a>,然后在模型上定义一个使用router.navigate的函数。

我希望这可以帮助你。

答案 1 :(得分:0)

刚刚解决了TTS问题:

app.speakText = function (textToSpeak) {
    if (window.cordova) {
        var deferred = $.Deferred();
        window.TTS.speak({
            text: textToSpeak,
            locale: 'en-US',
            rate: 0.75
        }, function () {
            deferred.resolve(true);
        }, function (reason) {
        });
        return deferred.promise();
    }
};