PhoneGap 应用下载后无法正确显示答案

【问题标题】：PhoneGap app not displaying correctly after downloadPhoneGap 应用下载后无法正确显示
【发布时间】：2017-10-23 19:18:36
【问题描述】：

我已经使用 JQuery mobile 构建了一个应用程序。当我在网络浏览器中测试它时它工作正常。但是，一旦我使用 PhoneGap 将它下载到我的手机，所有页面样式和布局都不起作用。它只是一页文本。该应用程序有两个页面和一些简单的功能。我使用 Theme Roller 进行样式设置，但下载时没有显示。

<!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>

【问题讨论】：

为您的 HTML 页面提供整个代码，包括标题部分。我们需要看看您是如何链接样式的。
谢谢我已经添加了完整的代码。
还将jQuery和JQM设置为本地文件

标签： jquery jquery-mobile phonegap

【解决方案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 文件。

【讨论】：

谢谢我现在明白了，我不能像平常一样在网页中引用这些库。

【解决方案2】：

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

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

如果您的应用需要访问某些网站，例如 API（大多数应用都需要），那么您必须告诉 webview 允许访问这些特定网站。你比在你的 config.xml 中使用 <access origin="..." /> 标记。但是，我们不会为库执行此操作，我们只需下载它们并将它们与我们的 PhoneGap 应用程序捆绑在一起。

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

【讨论】：

谢谢你对我的问题的解释很清楚，我会试试的。