Cordova (PhoneGap) 在 jQuery Mobile 应用程序的每个页面上重新初始化答案

【问题标题】：Cordova (PhoneGap) reinitializing on every page of jQuery Mobile appCordova (PhoneGap) 在 jQuery Mobile 应用程序的每个页面上重新初始化
【发布时间】：2012-05-28 09:22:19
【问题描述】：

我一直在使用 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包含app的逻辑）。

<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 here），以便在应用程序启动之间维护用户偏好和使用信息。

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

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

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

谢谢，埃文

【问题讨论】：

查看车把 (ccoenraets.github.io/cordova-tutorial/handlebars-templates.html) 和页面滑块 (github.com/ccoenraets/PageSlider)

标签： javascript jquery cordova

【解决方案1】：

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

【讨论】：

【解决方案2】：

我知道这个问题大约存在 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 开发

【讨论】：