IBM Worklight 6.0 - jQuery Mobile 页面链接在 Android 模拟器中不起作用答案

【问题标题】：IBM Worklight 6.0 - jQuery Mobile page linking not working in the Android emulatorIBM Worklight 6.0 - jQuery Mobile 页面链接在 Android 模拟器中不起作用
【发布时间】：2013-09-11 06:11:09
【问题描述】：

使用 Worklight 6.0，我创建了一个带有 Android 环境的应用程序，并且正在使用 jQuery Mobile。

当通过 Worklight Console 预览应用程序的公共环境时，页面链接非常有效。但它不适用于 Android 模拟器。每当我单击提交按钮时，都会刷新同一页面。

这是我的代码：

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>SaskenV1</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
            <link rel="shortcut icon" href="images/favicon.png">
            <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
            <link href="jqueryMobile/jquery.mobile-1.1.2.css" rel="stylesheet">
            <link rel="stylesheet" href="css/SaskenV1.css">
            <script>window.$ = window.jQuery = WLJQ;</script>
            <script src="js/jquery.js"></script>
            <script src="jqueryMobile/jquery.mobile-1.1.2.js"></script>
<link
    href="jqueryMobile/jquery.mobile-1.1.2.css"
    rel="stylesheet">


</head>
        <body id="content" style="display: none;">
            <div data-role="page" id="page1">
                <div data-role="content" style="padding: 15px">

            <div data-role="fieldcontain" id="fieldcontain">
                <label for="text">Username:</label><input type="text" name="text" id="name">
            </div>

            <div data-role="fieldcontain" id="fieldcontain0">
                <label for="text0">Password:</label><input type="text"
                    name="text0" id="pass">

            </div>

            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <a href="#" data-role="button" id="cancel">Cancel</a>
</div>
                <div class="ui-block-b">

                    <a href="#page2" data-role="button" id="submit">Submit</a>

                </div>

            </div>

        </div>
            </div>

            <div data-role="page" id="page2">
    <div data-role="header">
        <a href="SaskenV3.html" data-icon="home">Home</a>
        <h6>2nd Page</h6>
        <a data-rel="back" data-icon="back">Go back</a>
    </div>
    <div data-role="content">
        <a href="#page1">Return to Page 1</a>
    </div>
    <div data-role="footer">
        <h2>Footer Content</h2>
    </div>
</div>

            <script src="js/initOptions.js"></script>

            <script src="js/SaskenV1.js"></script>
            <script src="js/messages.js"></script>
        </body>
</html>

每当用户点击提交按钮时，我都想转到#page2。不知道为什么它不起作用...

更新：

现在，我发现我在 html 文件中所做的任何更改都不会影响 Android 项目。即使我也建造了它。

【问题讨论】：

请描述您已采取的完整步骤 - 您是否将 Android 环境添加到您的应用程序中？你接下来要做什么？
是的，我已经添加了android环境。之后，我对主 html 文件进行了一些更改。但它没有反映在android项目中。（即我无法查看我在 Android 模拟器中所做的更改）。通用控制台，它工作正常。在对主 html 文件进行更改后，我是否需要特别做任何事情才能将更改应用于 android 项目？
没有。在构建期间，您在 Common 中所做的更改并复制到 Android。您可以通过在生成的 Android 项目中导航来验证这一点 - yourpoject\www\default\....
这个问题解决了吗？

标签： android jquery-mobile ibm-mobilefirst

【解决方案1】：

这对我来说非常好。
我在 Worklight 6.0.0.1 中做了以下工作：

创建了一个新的 Worklight 项目
在创建应用程序期间，我选择添加 jQuery Mobile。我用过 jQuery Mobile v1.3.1（至少我已经添加了 images 文件夹和 jquery.mobile-1.3.1 CSS 和 JS 文件）
添加了 Android 环境
在myProject\apps\myApp\common\myApp.html 中，我已将BODY 元素的内容替换为您的内容（当然，底部的3 个脚本引用除外）
右键单击myApp文件夹并选择Run As > Build All and Deploy
在生成的Android项目上右键选择Run As > Android application

该应用随后在 Android 模拟器中启动。
输入一些文本并单击提交按钮后，页面切换到第二页。

确保您遵循上述内容。

【讨论】：