Apache Cordova - 混合移動應用程序頁面像 Chrome 瀏覽器一樣打開，而不像cordova 應用程序

Question

我正在使用 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());
                });
            });
        });

讓我澄清一下我們可以向 Cordova 應用程序添加 PhoneGap 插件的疑問嗎？ 因為兩者都是使用 HTML、CSS 和 Javascript 開發混合應用程序的不同平台。

Answer 1

您應該更深入地了解cordova/phonegap 以及有關此的全部內容。 使用 phonegap/cordova 構建混合應用程序的正常方法是設置單頁應用程序。

這意味着，您使用了一個框架：例如 - jquery mobil e。 在此框架的幫助下，您可以設置單頁應用程序。

例如，您可以設置永久工具欄。 完成此操作后，您可以通過普通的<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>標簽內容。

只需谷歌單頁應用程序 Cordova 教程或類似的東西，就會有大量的結果。

Cordova 文檔 5.0

科爾多瓦插件

如果沒有那些出色的插件，Cordova 就不會像現在這樣廣為人知。 插件列表幾乎是無窮無盡的，而且每天都有新插件。

您可以通過終端安裝插件。

cd yourProject
cordova plugin add cordova-plugin-pluginName 其中pluginName將是該插件的名稱。 例如：控制台
科爾多瓦插件添加科爾多瓦插件控制台

將這樣的插件添加到項目后，您將運行構建命令（ 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 事件文檔中找到有關該事件和所有其他事件的詳細信息。

Apache Cordova - 混合移動應用程序頁面像 Chrome 瀏覽器一樣打開，而不像cordova 應用程序

問題描述

1 個解決方案

解決方案1
2 2015-06-30 12:19:46

Apache Cordova - 混合移動應用程序頁面像 Chrome 瀏覽器一樣打開，而不像cordova 應用程序

問題描述

1 個解決方案

解決方案1 2 2015-06-30 12:19:46

解決方案1
2 2015-06-30 12:19:46