jQuery Mobile无法在PhoneGap Windows Phone 8中运行

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery Mobile无法在PhoneGap Windows Phone 8中运行相关的知识，希望对你有一定的参考价值。

我正在使用PhoneGap和jQuery Mobile开发应用程序。

我已经完成了应用程序的android版本。我正在使用Adobe PhoneGap构建来构建我的应用程序。 Android版本运行完美。但现在我正在尝试测试该应用的Windows Phone 8版本。

我在Visual Studio 2012模拟器中测试了PhoneGap构建app.xap。似乎jQuery mobile不起作用。出于测试目的，我创建了一个示例应用程序。有两个jQuery mobile页面。那也没有用。

请帮帮我。任何有用的帮助将深表感谢。谢谢，=）请告诉我哪里出了问题。

粘贴我的示例代码：

<!DOCTYPE html>
<html>
<head>
    <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" />
    <!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->
    <link rel="stylesheet"  href="css/index.css" />
    <link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />

    <title>Hello World</title>
</head>
<body>
    <div data-role="page" id="page1">
<div data-theme="a" data-role="header">
    <h3>
        Header
    </h3>
</div>
<div data-role="content">
    <a data-role="button" href="#page2">
        Button
    </a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
    <h3>
        Footer
    </h3>
</div>
</div>

    <div data-role="page" id="page2">
<div data-role="content">
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false"
    width="288" height="200">
    <a data-role="button" href="#page1">
        Button
    </a>
    <div data-role="navbar" data-iconpos="top">
        <ul>
            <li>
                <a href="#page1" data-transition="fade" data-theme="" data-icon="">
                    Button
                </a>
            </li>
        </ul>
    </div>
</div>
</div>
    <script type="text/javascript" src="cordova-2.5.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
     <script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jquery.mobile/jquery.mobile-1.2.0.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>
</html>

这是我得到的输出：

这就是我需要的：

答案

jQuery Mobile官方不支持Windows Phone 8。请参阅支持的平台：http://jquerymobile.com/gbs/

另一答案

更改您的页面如下所示，并确保模拟器可以访问互联网

<!DOCTYPE html>
<html>
<head>
    <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" />
    <!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->
    <link rel="stylesheet"  href="css/index.css" />
    <link rel="stylesheet"  href="http://jquery.mobile/jquery.mobile-1.1.0.css" />
    <script type="text/javascript" src="http://jquery.mobile/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://jquery.mobile/jquery.mobile-1.2.0.js"></script>
    <script type="text/javascript" src="cordova-2.5.0.js"></script>

    <title>Hello World</title>
</head>
<body>
    <div data-role="page" id="page1">
<div data-theme="a" data-role="header">
    <h3>
        Header
    </h3>
</div>
<div data-role="content">
    <a data-role="button" href="#page2">
        Button
    </a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
    <h3>
        Footer
    </h3>
</div>
</div>

    <div data-role="page" id="page2">
<div data-role="content">
    <img src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&amp;zoom=14&amp;size=288x200&amp;markers=Madison, WI&amp;sensor=false"
    width="288" height="200">
    <a data-role="button" href="#page1">
        Button
    </a>
    <div data-role="navbar" data-iconpos="top">
        <ul>
            <li>
                <a href="#page1" data-transition="fade" data-theme="" data-icon="">
                    Button
                </a>
            </li>
        </ul>
    </div>
</div>
</div>

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

    <script type="text/javascript">
        app.initialize();
    </script>
</body>
</html>
另一答案

将Cordova文件放在HEAD中并确保它是页面中的第一个JS文件：

JQM在Windows Phone上运行良好...我遇到了与你类似的问题，并修复了它。

另一答案

实际上JQuery mobile与windows phone 8一起工作正常。

加载js文件的正确顺序是：

加载JQuery本身;仅加载JQuery Mobile css文件;加载自定义脚本和CSS;如果需要，加载phonegap（cordova）;加载JQuery Mobile作为最后一个。

这个命令对我来说在任何设备上工作都很好，包括windows phone 8（设备或VS2012模拟器）通常我在index.html的HEAD部分加载所有这些东西。如果您有任何疑问，可以使用Cordoz模板直接在VS2012中测试您的项目，如here所述

希望这有帮助。

另一答案

我在Windows 8的VS 2012中的WP8模拟器中看到了同样的问题。如果我制作jQuery文件的本地副本，它可以工作。如果我尝试从CDN加载它们，他们不会。

<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>

作品。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

不起作用，看起来没有风格。

我制作了所有Jquery和Jquery移动js和CSS文件的本地副本，我的JQM UI看起来与我期望的完全一样。

虽然，我仍然很好奇，如果模拟器的某些白名单功能无法正常工作。或者如果有超级v交换机管理器的配置无法正常使用。

另一答案

我跟着这个link并在VS 2013中安装了phonegap模板。然后我使用phonegap模板和下载的jquery文件创建了一个项目，并将它们包含在我的html文件中，它就像一个魅力:)由于某种原因，CDN对Jquery的引用不起作用用Windows手机模拟器。

以下是您可以参考Jquery的订单，

<head>
    <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" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />

    <link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" />
    <!--<script type="text/javascript" src="cordova.js"></script>-->
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/jquery.mobile-1.4.2.js"></script>
    <title>Hello World</title>
</head>

以上是关于jQuery Mobile无法在PhoneGap Windows Phone 8中运行的主要内容，如果未能解决你的问题，请参考以下文章

使用 PhoneGap 在 JQuery Mobile 的外部浏览器中无法打开链接

Jquery mobile 1.4.0 和 phonegap 3.3.0 无法正常工作

在 Phonegap 项目中使用普通 JQuery（使用 JQuery Mobile）

在 PhoneGap+jQuery Mobile 中使用 ajax 的 CORS 无法在设备上运行，但在浏览器上运行

防止放大Phonegap + JQuery Mobile

jquery mobile ui无法在移动设备上运行