使用设备上的 android 后退按钮返回到 Framework7 应用程序中的主视图？答案

【问题标题】：Use android back button on device to return to main view in Framework7 app?使用设备上的 android 后退按钮返回到 Framework7 应用程序中的主视图？
【发布时间】：2016-06-02 12:36:16
【问题描述】：

我最近使用 framework7 和 cordova 构建了一个应用程序。我的应用程序由一个包含所有视图的 html 文件组成。为了在视图之间导航，每个子视图的顶部都有一个后退按钮。

如果有人按下设备上的返回按钮，应用程序将被关闭。

当我在子页面中时，如何使用后退按钮进入主页面？

我已经阅读了 framework7 网站上的路由器 API，但它确实令人困惑并且似乎不起作用。这是我正在尝试的：

<html>
  <head>...</head>
  <body>
    ...
    <!-- Views -->
    <div class="views">
      <!-- View -->
      <div class="view view-main">
        <!-- Pages -->
        <div class="pages">
          <!-- Home page -->
          <div class="page" data-page="index">
            <div class="page-content">
              <p>Home page</p>
            </div>
          </div>

          <!-- About page -->
          <div class="page cached" data-page="about">
            <div class="page-content">
              <p>About page</p>
            </div>
          </div>

          <!-- Services page -->
          <div class="page cached" data-page="services">
            <div class="page-content">
              <p>Services page</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    ...
  </body>
</html>

// Initialize App  
var myApp = new Framework7();

// Initialize View          
var mainView = myApp.addView('.view-main')          

// Load about page:
mainView.router.load({pageName: 'about'});

请注意，当我在另一个 div 中时，我想使用设备上的物理按钮导航到主视图。

请帮忙。

【问题讨论】：

标签： javascript android html cordova html-framework-7

【解决方案1】：

各位开发者您好，

我知道大家对framework7中的Android硬件后退按钮问题非常恼火，而寻找解决方案也很乏味，因为我自己也很挣扎。所以这里我有代码 sn-p 它将帮助您管理 android 设备上的所有硬件后退按钮问题（弹出、模式、弹出框、侧面板和应用程序退出）。如果有任何混淆，请仔细阅读代码并删除查询。

设备就绪功能

function onDeviceReady() {
    document.addEventListener('backbutton', onBackKeyDown, false);
}

function onBackKeyDown() {
    var cpage = mainView.activePage;
    var cpagename = cpage.name;
    console.log(cpagename);
    if (($$('#leftpanel').hasClass('active')) || ($$('#rightpanel').hasClass('active'))) { // #leftpanel and #rightpanel are id of both panels.
        myApp.closePanel();
        return false;
    } else if ($$('.modal-in').length > 0) {
        myApp.closeModal();
        return false;
    } else if (cpagename == 'index') {
        myApp.confirm('Are you sure you want to exit?', function() {
            // var deviceType = device.platform;
            // if(deviceType == “Android” || deviceType == “android”){
            navigator.app.exitApp();
            // }
        },
        function() {
        });
    } else {
        mainView.router.back();
    }
}

【讨论】：

【解决方案2】：

如果你只是想导航到返回页面，在应用初始化中使用pushState : true，你将可以使用framework7中的硬件返回按钮返回。如果要打开特定页面，mainView.router.load是framework7中的一个函数。您可以在路由器上进行验证以检查页面是否是您的主视图页面。通过这样做，您可以控制退出应用程序。当后台页面加载时，它会调用路由器，路由器会为您提供有关页面的详细信息，即：page.name,page.query。希望这会有所帮助

【讨论】：

【解决方案3】：

要返回，请转到步骤 1.my-app.js 第2步。粘贴以下内容：

// Initialize your app
var myApp = new Framework7({pushState: true,});

再次运行您的应用。希望这会有所帮助

【讨论】：

【解决方案4】：

将下面的代码放入设备就绪功能

document.addEventListener("backbutton", yourCallbackFunction, false);

创建下面的函数

function yourCallbackFunction(){
 alert(window.location);
 }

如果你得到那个事件一次，你可以做任何事情。您可以使用不同的页面 ID 导航到不同的视图。

【讨论】：

【解决方案5】：

感谢@sjkushwaha21，我修改了Framework7 V2 的代码。在 Framework7 对象的方法中使用它被调用

onDeviceReady: function() {
    document.addEventListener("backbutton", myApp.methods.onBackKeyDown, false);
},

...这里是方法：

var myApp = new Framework7({
    ....,
    methods: {
        onBackKeyDown: function() {
            var leftp = myApp.panel.left && myApp.panel.left.opened;
            var rightp = myApp.panel.right && myApp.panel.right.opened;
            if ( leftp || rightp ) {
                myApp.panel.close();
                return false;
            } else if ($$('.modal-in').length > 0) {
                myApp.dialog.close();
                return false;
            } else if (myApp.views.main.router.url == '/') {
                myApp.dialog.confirm('Are you sure you want to exit?', 'Exit MyApp', function() {
                    navigator.app.exitApp();
                },
                function() {
                });
            } else {
                mainView.router.back();
            }

        }, ...

【讨论】：

【解决方案6】：

这是工作。 :)

打开 kitchen-sink.js 放代码
var myApp = new Framework7({ 推状态：真， });

【讨论】：

能否请您解释并提供相关细节以支持您的回答。可能是一个 JS Fiddle。