Apache Cordova - 混合移动应用程序页面像 chrome 浏览器一样打开，而不像 cordova 应用程序答案

【问题标题】：Apache Cordova - Hybrid Mobile Application page opening like a chrome browser not like cordova applicationApache Cordova - 混合移动应用程序页面像 chrome 浏览器一样打开，而不像 cordova 应用程序
【发布时间】：2015-09-17 05:35:11
【问题描述】：

我正在使用 Cordova 开发使用 HTML、CSS 和 Javascript 的混合移动应用程序。

我们如何从一个页面重定向到其他页面，不像浏览器应用程序，它必须是Cordova应用程序。

它在浏览器中运行良好，但如果我生成 .apk 文件并部署到移动设备上，它就像 Web 应用程序一样工作，而不是 Cordova 应用程序。在这里，我使用了 window.open()、window.location.href() 和 window.location.replace() 之类的编码。

          $(document).ready(function() {
            $("#btn4").click(function() {
                $lname = $("#lname").val();
                $.ajax({
                    url: 'http://localhost:8080/RESTfulDemoDerby/webresources/com.mss.mmxregistration/session',
                    data: {lname: $lname},
                    type: 'GET',
                    crossDomain: true,
                    ContentType: 'html/text',
                    dataType: 'text',
                    cache: false
            }).done(function(response) {

                   if (response== 'success') {
   window.location.href='http://localhost:8383/HTML5Application1/listform.html';
                   }
                    else {
                 window.location.replace("http://localhost:8383/HTML5Application1/login1.html");

                    }

             }).fail(function(request, textStatus, errorThrown) {
                    //   alert(url);

                    alert(textStatus + " : " + errorThrown.toString());
                });
            });
        });

让我澄清一下我们是否可以将 PhoneGap 插件添加到 Cordova 应用程序？因为两者是使用 HTML、CSS 和 Javascript 开发混合应用程序的不同平台。

【问题讨论】：

cordova 和phonegap 是一回事，你可以在cordova 项目中使用phonegap 插件。 HTML5Application1/listform.html 和 HTML5Application1/login1.html 是否存在于您的 cordova www 文件夹中？
对于您拥有的 Cordova 和 PhoneGap 应用程序，请等待 deviceready 事件触发，您不能使用 $(document).ready，因为当文件已准备就绪。
@Timo，如果他想使用一些插件，他必须等待设备就绪，但他没有使用任何插件。
@VinodKumarMarupu，然后将 window.location.replace("localhost:8383/HTML5Application1/login1.html"); 替换为 window.location.replace("HTML5Application1/login1.html");

标签： javascript android html css cordova

【解决方案1】：

您应该更深入地了解cordova/phonegap 以及这方面的全部内容。使用 phonegap/cordova 构建混合应用程序的常规方法是设置单页应用程序。

这意味着，您使用了一个框架：例如 - jquery mobile。在此框架的帮助下，您可以设置单页应用程序。

例如，您可以设置persistent toolbars。完成此操作后，您可以通过普通的 <a href="#pageID">Page 2</a> 浏览页面，其中 #pageID 必须是您要导航到的页面的 id。

单页应用程序模板如下所示：

<div data-role="page" id="page1" data-title="Page 1">
    <div class="content">
        <a href="#page2">Testcontent Page 2 - Go to Page 2</a>
    </div>
</div>

<div data-role="page" id="page2" data-title="Page 2">
    <div class="content">
        <a href="#page1">Testcontent Page 2 - Back to Page 1</a>
    </div>
</div>

data-title="Page 1" 是通过 JavaScript 和jQuery 自动更改的标题。它将替换持久标头中的 <h1></h1> 标签内容。

只需 Google 获取单页应用程序 Cordova 教程或类似的东西，就会有大量结果。

Cordova Documentation 5.0

科尔多瓦插件

如果没有那些出色的插件，Cordova 就不会那么有名了。插件列表几乎是无穷无尽的，而且每天都有新的。

您可以通过终端安装插件。

cd yourProject
cordova 插件添加 cordova-plugin-pluginName 其中pluginName 将是该插件的名称。例如：控制台
cordova 插件添加cordova-plugin-console

在您将这样的插件添加到您的项目后，您将运行构建命令（cordova build - 将“插件添加过程”集成到您构建应用程序的常规方式中。

所以现在在你添加了你想要的插件之后，你就可以使用插件自带的命令了。但请注意：您必须等待deviceReady 事件，然后才能使用您的插件。

DeviceReady 事件示例

<!DOCTYPE html>
<html>
  <head>
    <title>Device Ready Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }

    // device APIs are available
    //
    function onDeviceReady() {
        // Now safe to use device APIs
    }

    </script>
  </head>
  <body onload="onLoad()">
  </body>
</html>

您可以在cordova events docs 中找到有关该事件和所有其他事件的详细信息。

【讨论】：

我同意单页应用是最好的选择，但我认为这并不能回答他提出的问题
他问“如何从一个页面重定向到另一个页面” - 这就是我的答案。主题“插件”本身就是一个非常具体的主题，但我将编辑我的答案并提供一些相关细节。
@jcesarmobile 没错，因为需要调用Webservices，它不像示例应用程序，它包含很多页面。
@Sithys 我上面的代码运行良好，但是当我生成 .apk 文件时，它就像 Web 应用程序一样运行，而不是 Cordova 应用程序。
比提供完整的代码 sn-p 还是我应该猜想在哪里寻找你的错误？谁在用window.open(),window.location.href() and window.location.replace(). 构建一个“原生感觉”phonegap cordova 应用程序，只需谷歌并深入了解整个歌曲。关键字也可以是 angularJS、ionic 等。