Cordova(PhoneGap）在jQuery Mobile应用程序的每一页上重新初始化

Cordova (PhoneGap) reinitializing on every page of jQuery Mobile app

本文关键字：一页 初始化 应用程序 PhoneGap Mobile jQuery Cordova      更新时间：2023-09-26

我一直在使用Cordova和jQuery Mobile编写一个简单的四屏Android应用程序。不同的屏幕作为 DIV 排列在单个 HTML 页面中，具有 data-role="page" 属性。我基本上从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 部分中，如下所示（应用程序.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

完成加载并准备好使用时，它会发出"设备就绪"信号。 Cordova 文档建议将所有设置代码绑定到与该信号关联的事件侦听器。我在应用程序中是这样做的.js：

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

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

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

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

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

谢谢埃文

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

我知道

这个问题已经存在了大约 9 个月，但以防万一我的解决方案可以帮助其他人解决同样的问题

不要使用每个 HTML 的显示来构建页面，而是构建一个长 HTML 页面，每个显示部分都位于其自己的 DIV 中，并带有data-role="page"

现在，当您更改页面时，您可以使用 JQM 的$.mobile.changePage()调用来更改显示页面

例如，您的页面可能如下所示：

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

我知道对于大多数Web开发来说，这似乎是违反直觉的，但是使用PhoneGap和JQM意味着不能在标准Web开发中工作。

相关文章：