Question

我使用JQuery mobile构建了一个应用程序。当我在Web浏览器中测试它时它工作正常。然而，一旦我使用PhoneGap将其下载到我的手机，所有页面样式和布局都不起作用。它只是一页文字。该应用程序有两个页面和一些简单的功能。我使用了主题滚轮作为样式，但下载时没有显示。

<!DOCTYPE html>
<html>
<head>
<title>Portfolio Page</title>

<link rel="stylesheet" href="themes/MyTheme.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

    <div data-role="page" id="page1" data-theme="d">

        <div data-role="header">
            <h1>My Portfolio</h1>
            <div data-role="navbar">
                <ul>
                    <li><a href="#page1" data-icon="grid">Home</a></li>
                    <li><a href="#page2" data-icon="grid">Contact Me</a></li>
                </ul>
            </div>
        </div>

        <div data-role="main" class="ui-content">
            <h1>Personal Info</h1>

            <div data-role="collapsible">

                <h1>Past Work</h1>
                <p>Look at my past work</h1>

            </div>

            <div data-role="collapsible">

                <h1>Education</h1>
                <p>Teaching myself to code</h1>

            </div>

        </div>

        <div data-role="footer">
            <h2>My portfolio</h2>

        </div>

    </div>

    <div data-role="page" id="page2" data-theme="d">

        <div data-role="header">
            <h1>My Portfolio</h1>
            <div data-role="navbar">
                <ul>
                    <li><a href="#page1" data-icon="grid">Home</a></li>
                    <li><a href="#page2" data-icon="grid">Contact Me</a></li>
                </ul>
            </div>
        </div>

        <div data-role="main" class="ui-content">
            <h1>Contact Me</h1>

            <form>

                <label for="essay">Tell me what you think</label>
                <textarea name="essay" id="essay" placeholder="Rate me"></textarea>
                <label for="range">Rate me out of 10</label>
                <input type="range" name="rate" id="rate" min="0" max="10" />
                <input type="submit" name="go" id="go" value="Rate My App" />

            </form>

        </div>

        <div data-role="footer">
            <h2>My Portfolio</h2>

        </div>

    </div>

</body>

</html>

Answer 1

在您的主题之后，您还应该添加对JQM结构CSS的引用：

    <!-- JQM theme shall be loaded before structure -->
    <link rel="stylesheet" href="css/my-theme.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />

之后，您不再需要完整的jquery.mobile-1.4.5.min.css。

...还包括jQuery和JQM作为本地PhoneGap文件。

Answer 2

您需要了解PhoneGap应用的工作原理。它们不是网站，因此当您在浏览器中运行它们时，它们的行为并不像。 PhoneGap应用程序在webview中运行沙盒，它与Web浏览器共享许多功能，但有重要的区别。一个重要的区别是安全性，这会导致您遇到的问题。

您正在直接从Web链接jQuery库。当您在浏览器中运行它将自动下载文件时，这将起作用。但是，当您在手机上运行应用程序时，webview将阻止这些文件，因为出于安全原因，它会阻止访问任何外部网站。这就是为什么你的应用没有风格或功能的原因。

如果您的应用需要访问某些网站（如大多数应用），那么您必须告诉网页视图允许访问这些特定网站。您可以使用<access origin="..." />标记在config.xml中进行操作。但是，我们不会为图书馆这样做，我们只需下载它们并将它们与我们的PhoneGap应用程序捆绑在一起。

您已将主题下载（我假设您的代码中）到PhoneGap项目的本地文件夹中。这很好！但是，您必须对接下来的3个库文件执行相同的操作。您必须将它们下载到本地文件夹并相应地更改链接。

PhoneGap应用程序下载后无法正确显示

2 个答案: