0

我知道关于堆栈溢出的这个主题有类似的问题；但是，我还没有弄清楚我的问题。

我对应用程序开发非常陌生，现在正在尝试使用 phonegap 和 jquery mobile 为 iphone 创建一个应用程序。不幸的是，我显然无法正确加载引用的文件。

编辑：

这是对我有用的新结构：

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; 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" />

    <script src="jquery_mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery_mobile/jquery.mobile-1.2.0.min.css" />
    <script src="jquery_mobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
    <script src="http://debug.phonegap.com/target/target-script-min.js#anonymous"></script>
    <script type="text/javascript">
        var deviceReadyDeferred = $.Deferred();
        var jqmReadyDeferred = $.Deferred();

        document.addEventListener("deviceReady", deviceReady, false);

        function deviceReady() {
            deviceReadyDeferred.resolve();
        }

        $(document).one("mobileinit", function () {
                        jqmReadyDeferred.resolve();
                        });

        $.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);

        function doWhenBothFrameworksLoaded() {
            // TBD
        }
</script>
</head>
<body>
    <div class="app">
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>

    <!-- Homepage -->
    <div data-role="page" id="home">
        <div data-role="header">
            <h1>Some Title</h1>
        </div><!-- /header -->
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="e">
                <li><a href="#about-us">About US</a></li>
                <li><a href="#">Audi</a></li>
            </ul>
        </div><!-- /content -->
        <div data-role="footer">
            <h4>Pgae Footer</h4>
        </div>
    </div><!-- /page -->

    <!-- About Us -->
    <div data-role="page" id="about-us" data-title="About Us">
        <div data-role="header">
            <h1>Some Other Title</h1>
        </div><!-- /header -->
        <div data-role="content">
            <p>About Us</p>
        </div><!-- /content -->
        <div data-role="footer">
            <h4>Pgae Footer</h4>
        </div>
    </div><!-- /page -->
</body>
</html>
4

2 回答 2

1

它在浏览器中加载时是否有效？deviceready 在这种情况下当然不会触发，但它应该让您更好地查看正在运行的脚本，以便您可以修复其他错误。

一些更明显的事情需要研究：

  • 应用程序在哪里定义？
  • 为什么页面正文中有phonegap脚本？
  • 您的脚本路径没有一致的结构。网址都正确吗？
于 2012-11-27T00:21:13.343 回答
1

Phonegap 要求您将代码放入 assets/www 项目目录（至少在 android 平台上），无论代码必须在 www 目录中的什么位置。让我们继续这个假设。

如果你有这个目录结构：

  • 索引.html
  • js/index.js
  • css/index.css

那么你不能有这个href：

<link rel="stylesheet" type="text/css" href="/css/index.css" />

而不是它使用这个：

<link rel="stylesheet" type="text/css" href="css/index.css" />

因此，从所有可用的 href-s 中删除每个第一个斜杠（“/”）。也来自像这样的 scr 属性：

<script type="text/javascript" src="/js/index.js"></script>

也将其更改为（以及以 / 开头的所有其他 src ）：

<script type="text/javascript" src="js/index.js"></script>
于 2012-11-27T16:20:34.100 回答