jQuery Mobile 在 PhoneGap Windows Phone 8 中不起作用答案

【问题标题】：jQuery Mobile not working in PhoneGap Windows Phone 8jQuery Mobile 在 PhoneGap Windows Phone 8 中不起作用
【发布时间】：2013-02-20 18:51:21
【问题描述】：

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

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

我在 Visual Studio 2012 模拟器中测试了 PhoneGap 构建 app.xap。似乎 jQuery 手机无法正常工作。出于测试目的，我创建了一个示例应用程序。有两个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>

这是我得到的输出：

这就是我需要的：

【问题讨论】：

标签： cordova jquery-mobile windows-phone-8

【解决方案1】：

我遵循了link 并在 VS 2013 中安装了 phonegap 模板。然后我使用 phonegap 模板创建了一个项目并下载了 jquery 文件并将它们包含在我的 html 文件中，它就像一个魅力 :) 出于某种原因 CDN 参考Jquery 不适用于 Windows Phone 模拟器。

这里是你可以引用 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>

【讨论】：

【解决方案2】：

我在 Windows8 上的 VS2012 中的 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 看起来完全符合我的预期。

尽管如此，我仍然很好奇模拟器的某些白名单功能是否无法正常工作。或者如果 hyper-v 交换机管理器的配置无法正常工作。

【讨论】：

【解决方案3】：

事实上，JQuery mobile 在 windows phone 8 上运行良好。

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

加载 JQuery 本身；仅加载 JQuery Mobile css 文件；加载您的自定义脚本和 css；如果需要，加载 phonegap (cordova)；将 JQuery Mobile 作为最后一个加载。

此订单适用于任何设备，包括 windows phone 8（设备或 VS2012 模拟器）通常我会在 index.html 的 HEAD 部分加载所有这些内容。如果您有任何疑问，您可以使用 Cordova 模板直接在 VS2012 中测试您的项目，如 here 所述

希望对您有所帮助。

【讨论】：

【解决方案4】：

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

JQM 在 Windows Phone 上运行良好...我遇到了与您类似的问题，这解决了它。

【讨论】：

【解决方案5】：

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

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

【讨论】：

在我看来好像没有应用样式。这意味着由于某种原因没有导入 jQuery Mobile 库文件。你最好在真机上试一试，看看真假

【解决方案6】：

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

【讨论】：

感谢您的回复。你能告诉我一些其他类似 jQuery Mobile 的框架吗，它与 IOS,Android,BB & Win 兼容
是否有任何框架可以让我轻松迁移我的应用程序？请帮忙
即使 jQuery Mobile 不支持 Windows Phone 8，它应该可以通过一些小的调整来工作。似乎有什么东西阻止了 jQM 的运行。你确定 index.js 没有问题吗？
我在 1.0 版中遇到了一些问题，但是当用 1.3.1 版替换 jquery mobile 时，它现在就像一个魅力。
同时1.3支持