为Mobile PhoneGap App构建Dojo 1.7答案

【问题标题】：Building Dojo 1.7 for Mobile PhoneGap App为Mobile PhoneGap App构建Dojo 1.7
【发布时间】：2011-11-29 22:14:43
【问题描述】：

我正在尝试构建 dojo 1.7 以在我的 phonegap 应用程序中使用。我目前正在使用dojo 1.6.1。我通过转到build.dojotoolkit.org 并选择 dojox.mobile 下的所有内容以及 dojo.store.JsonRest 模块来构建我当前的 dojo.js 文件。效果很好。

我的问题是尝试创建一个配置文件来创建一个类似于我从 dojo 构建网站获得的构建。

我下载了dojo 1.7 stable release src。我从命令行进入 buildScripts 文件夹并尝试使用以下命令运行构建：

>build profile=path/myMobileProfile.js action=release releaseName=test

我使用了配置文件文件夹中的示例配置文件：

dependencies = {
    stripConsole: "normal",
    
    layers: [
        {
            name: "dojo.js",
            customBase: true,
            dependencies: [
                "dojox.mobile.parser",
                "dojox.mobile",
                "dojox.mobile.compat"
            ]
        },
        {
            name: "../dojox/mobile/_compat.js",
            layerDependencies: [
                "dojo.js"
            ],
            dependencies: [
                "dojox.mobile._compat"
            ]
        }
    ],

    prefixes: [
        [ "dijit", "../dijit" ],
        [ "dojox", "../dojox" ]
    ]
}

它没有错误地构建。然后将构建生成的 dojo.js 放入我的 phonegap 应用程序中。我将我的索引文件更改为以下只是为了测试：

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/android/android.css" type="text/css" media="screen" title="no title">
<script type="text/javascript" src="libs/dojo/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
</head>
<body style="background-color:white">
Phonegap
</body>
</html>

每次我运行应用程序时，我都会得到一个白页。当我用我的工作副本替换 dojo.js 文件时，我看到了 Phonegap 输出。

我希望能够使用 dojo 1.7 mobile 和一些新功能，例如 SpinWheel。

有人可以帮我构建吗？

谢谢

【问题讨论】：

我猜这是因为customBase 遗漏了一些重要的东西。从您的个人资料中删除 dojo 层，看看会发生什么（现在）。另外，您的白页上是否收到任何错误消息？
感谢您的回复。我删除了 custombase 属性并再次尝试。我收到以下错误：TypeError: Result of expression '_1fe' [undefined] is not an object at dojo.js:15

标签： javascript mobile dojo cordova

【解决方案1】：

我遇到了同样类型的问题。我认为这与新的 AMD 加载程序有关。

似乎解析器没有解析声明性小部件，而是等待按需执行，或者它永远不会被调用。

我确实找到了一些文档，提到我们应该使用 dojo/ready，但无法让它与它和 phoneGap 一起使用。相同的代码在没有 phoneGap 的桌面上运行良好，这很奇怪。

查看实时文档：http://livedocs.dojotoolkit.org/dojo/ready

还有：http://livedocs.dojotoolkit.org/loader/amd

"要将加载器置于 AMD 模式，请将 async 配置变量设置为truthy：

<script data-dojo-config="async:1" src="path/to/dojo/dojo.js"></script>
<script>
  // ATTENTION: nothing but the AMD API is available here
</script>

请注意，您只能在加载 dojo.js 之前设置 async 标志，并且在 AMD 模式下，Dojo 和任何其他库都不会自动加载 - 完全由应用程序决定哪些模块/要加载的库。"

【讨论】：

【解决方案2】：

对我来说，此配置文件适用于 dojo 1.7 和 PhoneGap：

    dependencies = {
    selectorEngine: "acme",
    layers: [
             {
// This is a specially named layer, literally 'dojo.js'
// adding dependencies to this layer will include the modules    
// in addition to the standard dojo.js base APIs.    
             name: "dojo.js",    
             dependencies: [    
                 "dijit._Widget",    
                 "dijit._Templated",    
                 "dojo.fx",    
                 "dojo.NodeList-fx",    
//this wasn't included in the standard build but necessary 
                 "dojo._firebug.firebug",    
 //my used dojo requirements
                 "dojox.mobile.parser",    
                 "dojox.mobile",     
                 "dojox.mobile.Button",    
                 "dojox.mobile.SwapView",    
                 "dojox.mobile.ScrollableView",    
                 "dojox.mobile.TabBar",     
                 "dojox.mobile.SpinWheelTimePicker",     
                 "dojox.mobile.compat"    
            ]     
       }    
], 

prefixes: [   
       ["dijit", "../dijit" ],    
       ["dojox", "../dojox" ]    
]    
}

但是这个配置文件不包含 CSS 文件，因此您必须复制所有 CSS 文件夹结构。我的 HTML 文件如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN" "http://www.w3.org/TR/html5/strict.dtd">
            <html>
                <head>
                    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"></meta>
                    <meta name="apple-mobile-web-app-capable" content="yes"></meta>
                    <title>dojox.mobile Demo</title>
                    <link href="css/themes/iphone/iphone.css" rel="stylesheet" type="text/css" />
                    <script type="text/javascript" src="phonegap.js" charset="utf-8"></script>
                    <script type="text/javascript" src="dojo.js" djConfig="isDebug:true, parseOnLoad:true"></script>
                    <script type="text/javascript">
                        require([
                                        "dojox/mobile/parser",      // (Optional) This mobile app uses declarative programming with fast mobile parser
                                        "dojox/mobile",             // (Required) This is a mobile app.
                                        "dojox/mobile/Button",
                            //Some other dojo Widgets
                                "dojox/mobile/compat"       // (Optional) This mobile app supports running on desktop browsers
                                 ],
                                function(parser, mobile, compat){
                                //Optional module aliases that can then be referenced inside callback block
                                }
                                // Do something with mobile api's.  At this point Dojo Mobile api's are ready for use.
                                );
        //to make sure dojo and PhoneGap was loaded use this
        document.addEventListener("deviceready", init(), false);
        function init(){
           dojo.ready(function(){
              //do something
           });
        }
        </script>
    </head>
    <body>
    </body>

HTH

【讨论】：

【解决方案3】：

Dojo 1.7.2 解决了这个问题

【讨论】：

【解决方案4】：

还发现了这个：http://livedocs.dojotoolkit.org/dojo/parser 并尝试强制解析整个 dom 或仅解析特定元素，但仍然没有。

【讨论】：

【解决方案5】：

我确实发现以下内容可能会更清楚地说明这个问题：“Dojo 和 PhoneGap? 都有自己的事件来确认页面何时准备就绪。我们发现 dojo.ready 对于像这样的事情来说还为时过早deviceDetection API 在 PhoneGap? 容器中运行时，最好在 PG deviceReady 方法中完成。..."

完整的帖子可以在这里找到：http://bugs.dojotoolkit.org/ticket/14062

它正在讨论 dojo 1.6.1，但听起来 dojo 1.7 中的某些更改可能会受到更严重的反应。有一个建议的解决方法，但我不确定它是否能解决 1.7 的问题。

【讨论】：