Jquery 下载后PhoneGap应用程序未正确显示_Jquery_Jquery Mobile_Phonegap

Jquery 下载后PhoneGap应用程序未正确显示

jquery jquery-mobile

Jquery 下载后PhoneGap应用程序未正确显示,jquery,jquery-mobile,phonegap,Jquery,Jquery Mobile,Phonegap,我已经使用JQuery mobile构建了一个应用程序。当我在web浏览器中测试它时，它工作得很好。但是，一旦我使用PhoneGap将其下载到手机上，所有页面的样式和布局都不起作用。这只是一页文字。该应用程序有两个页面和一些简单的功能。我使用了主题辊的样式，但没有显示时下载 <!DOCTYPE html> <html> <head> <title>Portfolio Page</title> <link rel="stylesh

我已经使用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>


公文包页面
我的投资组合




个人信息
过去的工作
看看我过去的工作
教育类
自学代码
我的投资组合
我的投资组合




联系我
告诉我你的想法
给我打10分
我的投资组合

在主题之后，还应添加对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文件。

在主题之后，还应该添加对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文件。

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

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

如果你的应用程序需要访问某些网站，如API（大多数应用程序都需要），那么你必须告诉webview允许访问这些特定网站。您可以使用

标记在config.xml中执行以上操作。但是，我们不会对库执行此操作，我们只是下载它们并将它们与我们的PhoneGap应用程序捆绑在一起

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

如果你的应用程序需要访问某些网站，如API（大多数应用程序都需要），那么你必须告诉webview允许访问这些特定网站。您可以使用

标记在config.xml中执行以上操作。但是，我们不会对库执行此操作，我们只是下载它们并将它们与我们的PhoneGap应用程序捆绑在一起

提供HTML页面的完整代码，包括页眉部分。我们需要看看你是如何链接这些样式的。谢谢，我已经添加了完整的代码。还可以将jQuery和JQM设置为本地文件为你的HTML页面提供完整的代码，包括标题部分。我们需要看看你是如何链接这些样式的。谢谢，我已经添加了完整的代码。还将jQuery和JQM设置为本地文件。谢谢，这是对我的问题的非常清楚的解释，我会尝试一下。谢谢，这是对我的问题的非常清楚的解释，我会试试的。谢谢，我现在明白了，我不能像正常的那样在网页中引用库。谢谢，我现在明白了，我不能像正常的那样在网页中引用库。