Question

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

我对App开发很新，现在正尝试使用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>

Answer 1

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

要考虑的一些更明显的事情：

应用定义在哪里？
为什么页面正文中有phonegap脚本？
您的脚本路径没有一致的结构。网址都是正确的吗？

Answer 2

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

如果你有这个目录结构：

的index.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 atributes就像这样：

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

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

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

无法让jQuery mobile与PhoneGap一起使用

2 个答案: