Question

我一直在使用Cordova和jQuery Mobile编写一个简单的四屏Android应用程序。不同的屏幕在HTML的单页内排列为具有data-role =“page”属性的DIV。我基本上从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定义here）读取信息的功能，以便在应用程序启动之间维护用户首选项和使用信息。

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

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

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

谢谢，埃文

Answer 1

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

之类的内容

Answer 2

我知道这个问题大约有9个月了，但万一我的解决方案可以帮助其他人解决同样的问题

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

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

e.g。您的网页可能如下所示：

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

我知道这对于大多数网络开发来说似乎都是违反直觉的，但是使用PhoneGap＆amp; JQM表示 NOT 在标准Web开发中工作

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

2 个答案: