1

我一直在使用 Cordova 和 jQuery Mobile 编写一个简单的四屏 Android 应用程序。不同的屏幕作为具有 data-role="page" 属性的 DIV 排列在一个 HTML 页面中。我基本上从 jQuery Mobile 文档中复制了多页示例模板。

http://jquerymobile.com/test/docs/pages/page-anatomy.html

页面之间的导航通过固定在每个页面底部的持久导航栏进行。同样，我使用了 jQuery Mobile 文档中建议的代码，几乎没有修改。

<div data-role="footer" data-id="appNavBar" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="#homePage" data-icon="home" data-transition="none" class="ui-btn-active ui-state-persist">Home</a></li>
            <li><a href="#historyPage" data-icon="grid" data-transition="none">History</a></li>
            <li><a href="#settingsPage" data-icon="gear" data-transition="none">Settings</a></li>
            <li><a href="#aboutPage" data-icon="info" data-transition="none">About</a></li>
        </ul>
    </div>
</div>

各种 Javascript 库包含在 HTML 页面的 head 部分中，如下所示（application.js 包含应用程序的逻辑）。

<head> 
    <title>Redacted</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery/RedactedTheme.min.css" />
    <link rel="stylesheet" href="jquery/jquery.mobile.structure-1.1.0.min.css" />
    <link rel="stylesheet" href="application.css" />
    <script type="text/javascript" src="jquery/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript" src="flot/jquery.flot.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script> 
    <script type="text/javascript" charset="utf-8" src="statusbarnotification.js"></script>
    <script type="text/javascript" charset="utf-8" src="application.js"></script>
</head>

当 Cordova 完成加载并准备好使用时，它会发出“deviceready”信号。Cordova 文档建议将所有设置代码绑定到与该信号相关的事件侦听器。我在 application.js 中这样做了：

function onDeviceReady() {
    console.debug("Cordova initialized.");
    setup();
}
document.addEventListener("deviceready", onDeviceReady);

setup() 是一个从浏览器 Web SQL 数据库和存储（使用此处定义的 Cordova API）读取信息的函数，以便在应用程序启动之间维护用户偏好和使用信息。

现在问题来了：我的印象是 jQuery Mobile 会使用 jQuery ajax 方法来加载第一页之后的任何后续页面，这样做会去掉 head 部分并直接跳到带有数据的 DIV -role="page" 属性和适当的 ID。相反，我观察到的是，每当我访问应用程序的新页面时，head 部分中的脚本似乎都会重新加载。这发生在第一次在会话中访问页面时，然后停止发生。

似乎 Cordova 正在重新初始化，并且它再次发出 deviceready 信号。在 Eclipse 中使用 LogCat，我可以看到我放置在 onDeviceReady 函数中的调试消息。setup() 函数也被再次调用。这大大减慢了速度。

有人知道我哪里出错了吗？有没有办法确保 Cordova 只加载一次？

谢谢，埃文

4

2 回答 2

1

I know that this issue is about 9 months old, but just in case my solution helps someone else with the same issue

Don't build your pages with display per HTML, instead build one long HTML page with each display part in it's own DIV with data-role="page"

Now, when you're changing page, you can use JQM's call of $.mobile.changePage() to change the display page

e.g. your page could look like this:

<div data-role="page" id="startingPage">
<p onClick="$.mobile.changePage('page2')">Page Link</p>
</div>

<div data-role="page" id="page2">
<p>more content here</p>
</div>

I know this seems counter-intuitive for most web development, but working with PhoneGap & JQM means NOT working in standard web development

于 2013-03-25T16:12:13.840 回答
1

我在使用 phonegap facebook connect 插件时遇到了同样的问题。唯一的解决方法是将整个应用程序设计为一个 html 文档，其中的面板显示和隐藏为不同的屏幕。如果要将面板保存在单独的文件中，可以使用 require.js 之类的东西

于 2012-07-19T18:39:32.153 回答