搜索文档 /

硬件后按钮

硬件后按钮可在大多数Android设备上找到。在本机应用程序中,它可用于关闭模式,导航到先前的视图,退出应用程序等等。默认情况下,在离子上,按下返betway东盟体育app回按钮时,当前视图将从导航堆栈中弹出,并将显示上一个视图。如果导航堆栈中没有以前的视图,则不会发生任何事情。本指南将显示如何自定义硬件返回按钮的行为。

硬件返回按钮是指Android设备上的物理背面按钮,不应与浏览器背面的按钮或 离子 - 背屁股 。本指南中的信息仅适用于Android设备。

电容器和科尔多瓦的硬件后按钮

在电容器或Cordova应用程序中运行时,离子框架将发射betway东盟体育app Ionbackbutton 当用户按硬件返回按钮时。

当听 Ionbackbutton 事件,您可以注册一个处理程序以要射击。该处理程序可以执行诸如退出应用程序或打开确认对话框之类的操作。每个处理程序都必须分配优先级。默认情况下,每个硬件后按钮只能触发一个处理程序。优先级值用于确定应调用哪个回调。这很有用,因为如果您有模态打开,则可能不希望模态关闭 按下硬件返回按钮时,该应用程序要向后导航。一次仅运行一个处理程序允许模态关闭,但仍需要另一个按下硬件返回按钮向后导航。

在某些情况下,您可能想让多个处理人员射击。每个处理程序回调都以函数作为参数传递,可用于告诉框架调用下一个处理程序。

浏览器中的硬件返回按钮

在移动浏览器或PWA中运行应用程序时,硬件返回按钮自定义将受到限制。这是因为电容器和科尔多瓦公开了在普通网络浏览器中未暴露的其他功能。例如,通过硬件返回按钮关闭覆盖层和菜单是当前在移动浏览器中运行应用程序时不支持的功能。这些是已知的局限性,目前没有直接的解决方案。

对于完整的硬件返回按钮支持,我们建议使用电容器或Cordova。

Ionbackbutton 在浏览器或PWA中运行应用程序时,将不会发出事件。

基本用法


               文档
                
                AddEventListener
                ((
                '离子背嘴'
                ,,,,
               
                ((
                ev
                
               
                =>
               
                {
               ev
                
               细节
                
                登记
                ((
                10
                ,,,,
               
                ((
                
               
                =>
               
                {
               安慰
                
                日志
                ((
                “处理者被称为!”
                
                ;
               
                }
                
                ;
               
                }
                
                ;
               
复制 复制

                进口
               
                {
               平台
                }
               
                
               
                '@betway东盟体育appionic/angular'
                ;
               
                ...
               
                构造函数
                ((
                 私人的
                平台
                 
                平台
                
               
                {
               
                
                
               平台
                
               返回键
                
                订阅
                ((
                10
                ,,,,
               
                ((
                
               
                =>
               
                {
               
                安慰
                
                日志
                ((
                “处理者被称为!”
                
                ;
               
                }
                
                ;
               
                }
               
复制 复制

               文档
                
                AddEventListener
                ((
                '离子背嘴'
                ,,,,
               
                ((
                ev
                
               
                =>
               
                {
               ev
                
               细节
                
                登记
                ((
                10
                ,,,,
               
                ((
                
               
                =>
               
                {
               
                安慰
                
                日志
                ((
                “处理者被称为!”
                
                ;
               
                }
                
                ;
               
                }
                
                ;
复制 复制

                进口
               
                {
               用二次
                }
               
                
               
                '@betway东盟体育appionic/vue'
                ;
               
                ...
               
                出口
               
                默认
               
                {
               
                设置
                ((
                
               
                {
               
                用二次
                ((
                10
                ,,,,
               
                ((
                
               
                =>
               
                {
               
                安慰
                
                日志
                ((
                “处理者被称为!”
                
                ;
               
                }
                
                ;
               
                }
               
                }
复制 复制

在此示例中,我们正在注册一个处理程序时,请按下硬件返回按钮。我们将优先级设置为10,我们没有向框架指出我们希望将下一个处理程序称为。结果,任何优先级小于10的处理程序都不会被调用。优先级大于10的处理程序将首先称为。

如果有具有相同优先级值的处理程序,则注册的处理程序 最后的 将被称为。看 具有相同优先级的处理人员 了解更多信息。

致电多个处理程序

每个硬件返回按钮回调都有一个 ProcessNexthandler 范围。调用此功能使您可以继续调用硬件返回按钮处理程序。


               文档
                
                AddEventListener
                ((
                '离子背嘴'
                ,,,,
               
                ((
                ev
                
               
                =>
               
                {
               ev
                
               细节
                
                登记
                ((
                5
                ,,,,
               
                ((
                
               
                =>
               
                {
               安慰
                
                日志
                ((
                “另一个处理程序被称为!”
                
                ;
               
                }
                
                ;
               ev
                
               细节
                
                登记
                ((
                10
                ,,,,
               
                ((
                ProcessNexthandler
                
               
                =>
               
                {
               安慰
                
                日志
                ((
                “处理者被称为!”
                
                ;
               
                ProcessNexthandler
                ((
                
                ;
               
                }
                
                ;
               
                }
                
                ;
               
复制 复制

                进口
               
                {
               平台
                }
               
                
               
                '@betway东盟体育appionic/angular'
                ;
               
                ...
               
                构造函数
                ((
                 私人的
                平台
                 
                平台
                
               
                {
               
                
                
               平台
                
               返回键
                
                订阅
                ((
                5
                ,,,,
               
                ((
                
               
                =>
               
                {
               
                安慰
                
                日志
                ((
                “另一个处理程序被称为!”
                
                ;
               
                }
                
                ;
               
                
                
               平台
                
               返回键
                
                订阅
                ((
                10
                ,,,,
               
                ((
                ProcessNexthandler
                
               
                =>
               
                {
               
                安慰
                
                日志
                ((
                “处理者被称为!”
                
                ;
               
                ProcessNexthandler
                ((
                
                ;
               
                }
                
                ;
               
                }
               
复制 复制

               文档
                
                AddEventListener
                ((
                '离子背嘴'
                ,,,,
               
                ((
                ev
                
               
                =>
               
                {
               ev
                
               细节
                
                登记
                ((
                5
                ,,,,
               
                ((
                
               
                =>
               
                {
               
                安慰
                
                日志
                ((
                “另一个处理程序被称为!”
                
                ;
               
                }
                
                ;
               ev
                
               细节
                
                登记
                ((
                10
                ,,,,
               
                ((
                ProcessNexthandler
                
               
                =>
               
                {
               
                安慰
                
                日志
                ((
                “处理者被称为!”
                
                ;
               
                ProcessNexthandler
                ((
                
                ;
               
                }
                
                ;
               
                }
                
                ;
复制 复制

                进口
               
                {
               用二次
                }
               
                
               
                '@betway东盟体育appionic/vue'
                ;
               
                ...
               
                出口
               
                默认
               
                {
               
                设置
                ((
                
               
                {
               
                用二次
                ((
                5
                ,,,,
               
                ((
                
               
                =>
               
                {
               
                安慰
                
                日志
                ((
                “另一个处理程序被称为!”
                
                ;
               
                }
                
                ;
               
                用二次
                ((
                10
                ,,,,
               
                ((
                ProcessNexthandler
                
               
                =>
               
                {
               
                安慰
                
                日志
                ((
                “处理者被称为!”
                
                ;
               
                ProcessNexthandler
                ((
                
                ;
               
                }
                
                ;
               
                }
               
                }
复制 复制

此示例显示了如何向离子框架指示您要触发下一个处理程序的离子框架。betway东盟体育app所有回调都有一个 ProcessNexthandler 函数作为参数。这样做将导致下一个处理程序,如果存在的话,将被解雇。

具有相同优先级的处理人员

在内部,离子框架使用与优betway东盟体育app先队列类似的东西来管理硬件后退按钮处理程序。最大优先级值的处理程序将首先称为。如果有多个具有相同优先级值的处理程序,则 最后的 添加到此队列的相同优先级的处理程序将是要调用的第一个处理程序。


             文档
              
              AddEventListener
              ((
              '离子背嘴'
              ,,,,
             
              ((
              ev
              
             
              =>
             
              {
             
              //处理程序a
             ev
              
             细节
              
              登记
              ((
              10
              ,,,,
             
              ((
              ProcessNexthandler
              
             
              =>
             
              {
             安慰
              
              日志
              ((
              “处理者A被称为!”
              
              ;
             
              ProcessNexthandler
              ((
              
              ;
             
              }
              
              ;
             
              //处理程序b
             ev
              
             细节
              
              登记
              ((
              10
              ,,,,
             
              ((
              ProcessNexthandler
              
             
              =>
             
              {
             安慰
              
              日志
              ((
              “处理者B被称为!”
              
              ;
             
              ProcessNexthandler
              ((
              
              ;
             
              }
              
              ;
             
              }
              
              ;
复制 复制

在上面的示例中,两个处理程序A和B的优先级为10。自处理程序B上一次注册以来,Ionic Framework将在调用处理程序A之前调用处理程序B。betway东盟体育app

退出应用程序

在某些情况下,按下硬件返回按钮时,可能希望退出应用程序。这可以通过使用 Ionbackbutton 事件与电容器/Cordova提供的方法相结合。


                进口
               
                {
               backuttonevent
                }
               
                
               
                '@betway东盟体育appionic/core'
                ;
               
                进口
               
                {
               插件
                }
               
                
               
                '@电容器/核心'
                ;
               
                const
               
                {
               应用程序
                }
               
                =
               插件
                ;
               
                ...
               
                const
               路由器
                =
               文档
                
                Queryselector
                ((
                '离子旋风'
                
                ;
               文档
                
                AddEventListener
                ((
                '离子背嘴'
                ,,,,
               
                ((
                ev
                 
                backuttonevent
                
               
                =>
               
                {
               ev
                
               细节
                
                登记
                ((
                -
                1
                ,,,,
               
                ((
                
               
                =>
               
                {
               
                const
               小路
                =
               窗户
                
               地点
                
               路径名
                ;
               
                如果
               
                ((
               小路
                ===
               路由器
                
               
                
               
                {
               应用程序
                
                Exitapp
                ((
                
                ;
               
                }
               
                }
                
                ;
               
                }
                
                ;
复制 复制

                进口
               
                {
               离子
                ,,,,
               平台
                }
               
                
               
                '@betway东盟体育appionic/angular'
                ;
               
                进口
               
                {
               插件
                }
               
                
               
                '@电容器/核心'
                ;
               
                const
               
                {
               应用程序
                }
               
                =
               插件
                ;
               
                ...
               
                构造函数
                ((
               
                 私人的
                平台
                 
                平台
                 ,,,,
                
                 私人的
                routeroutlet
                 
                离子
               
                
               
                {
               
                
                
               平台
                
               返回键
                
                订阅
                ((
                -
                1
                ,,,,
               
                ((
                
               
                =>
               
                {
               
                如果
               
                ((
                
                
                
               routeroutlet
                
                Cangoback
                ((
                
                
               
                {
               应用程序
                
                Exitapp
                ((
                
                ;
               
                }
               
                }
                
                ;
               
                }
               
复制 复制

                进口
               
                {
               UseionRouter
                }
               
                
               
                '@betway东盟体育appionic/react'
                ;
               
                进口
               
                {
               插件
                }
               
                
               
                '@电容器/核心'
                ;
               
                const
               
                {
               应用程序
                }
               
                =
               插件
                ;
               
                ...
               
                const
               离子
                =
               
                UseionRouter
                ((
                
                ;
               文档
                
                AddEventListener
                ((
                '离子背嘴'
                ,,,,
               
                ((
                ev
                
               
                =>
               
                {
               ev
                
               细节
                
                登记
                ((
                -
                1
                ,,,,
               
                ((
                
               
                =>
               
                {
               
                如果
               
                ((
                
               离子
                
                Cangoback
                ((
                
                
               
                {
               应用程序
                
                Exitapp
                ((
                
                ;
               
                }
               
                }
                
                ;
               
                }
                
                ;
复制 复制

                进口
               
                {
               用二次
                ,,,,
               UseionRouter
                }
               
                
               
                '@betway东盟体育appionic/vue'
                ;
               
                进口
               
                {
               插件
                }
               
                
               
                '@电容器/核心'
                ;
               
                const
               
                {
               应用程序
                }
               
                =
               插件
                ;
               
                ...
               
                出口
               
                默认
               
                {
               
                设置
                ((
                
               
                {
               
                const
               离子
                =
               
                UseionRouter
                ((
                
                ;
               
                用二次
                ((
                -
                1
                ,,,,
               
                ((
                
               
                =>
               
                {
               
                如果
               
                ((
                
               离子
                
                Cangoback
                ((
                
                
               
                {
               应用程序
                
                Exitapp
                ((
                
                ;
               
                }
               
                }
                
                ;
               
                }
               
                }
复制 复制

此示例显示了当用户按下硬件返回按钮时,该应用程序将退出,并且导航堆栈中没有任何剩余的内容。在退出应用程序之前,还可以显示确认对话框。

建议在退出应用程序之前检查用户是否在根页面上。开发人员可以使用 Cangoback 方法开 离子 在离子betway东盟体育app角和 离子 在离子betway东盟体育app反应和离子vue中。

内部框架处理程序

下表列出了Ionic Framework使用的所有内部硬件后式按钮事件处理程序。betway东盟体育app这 传播 列注意该特定处理程序是否告诉Ionic Framework调用下一个后退按钮处理程序。betway东盟体育app

处理程序 优先事项 传播 描述
覆盖 100 适用于覆盖组件 离子表演表 ,,,, 离子效果 ,,,, 离子加载 ,,,, 离子模式 ,,,, 离子流行 ,,,, 离子挑选 , 和 离子对象
菜单 99 适用于 离子菜单
导航 0 是的 适用于路由导航(即角路由)。
以前的
开发技巧
下一个
键盘
Baidu