logo标签列表

jQuery Mobile在PhoneGap Windows Phone 8中无法工作

cordovajquery-mobilewindows-phone-8
8
我正在使用PhoneGap和jQuery Mobile开发一个应用程序。
我已经完成了该应用程序的Android版本。我正在使用Adobe PhoneGap build来构建我的应用程序。Android版本运行得很完美。但现在，我正在尝试测试该应用程序的Windows Phone 8版本。
我在Visual Studio 2012模拟器中测试了PhoneGap build的app.xap。它似乎无法正常工作。为了测试，我创建了一个具有两个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>

这是我的输出结果：

输入图像描述

这是我需要的内容：

输入图像描述


（注意：本文中的 HTML 标签已保留，不作进一步解释。）
6个回答
5
谢谢您的回复。您能告诉我一些类似于jQuery Mobile的框架，适用于iOS、Android、BB和Win吗？ - Rahmathullah M
有没有任何框架可以让我轻松地迁移我的应用程序？请帮忙。 - Rahmathullah M
尽管jQuery Mobile不支持Windows Phone 8，但进行少量调整后它应该可以工作。似乎有某些东西阻止jQM运行。您确定index.js中没有问题吗？ - Nishanth Nair
我之前使用版本1.0时遇到了一些问题，但是当我将jquery mobile替换为版本1.3.1后，现在它的运行非常顺畅。 - a.boussema
与此同时，它受到1.3的支持。 - Roman K
0

事实上，JQuery Mobile 在 Windows Phone 8 上运行良好。

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

先加载 JQuery 本身；仅加载 JQuery Mobile css 文件；加载您的自定义脚本和 css；如有需要，加载 phonegap（cordova）；最后再加载 JQuery Mobile。

这个顺序对我在任何设备上都有效，包括 Windows Phone 8（设备或 VS2012 模拟器）。通常我会在 index.html 的 HEAD 部分加载所有这些内容。如果您有任何疑问，可以使用 Cordova 模板直接在 VS2012 中测试您的项目，方法如 此处 所述。

希望这能帮到您。

0
将 Cordova 文件放在 HEAD 中，并确保它是页面中第一个 JS 文件：
JQM 在 Windows Phone 上运行良好...我遇到了类似于你的问题，这个方法解决了它。
0

我在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 mobile js和CSS文件，我的JQM UI看起来正如我所期望的那样。

尽管如此，我仍然好奇模拟器是否有一些白名单功能没有正常工作。或者超级V交换机管理器是否有一些配置不能直接使用。

0
我按照这个链接安装了在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>
0

请按照以下方式更改您的页面，并确保模拟器可以访问互联网

<!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库文件没有被导入。最好在真实设备上尝试以获得真实效果。 - Jay Mayu
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接