硬件后退按钮
大多数Android设备上都有硬件返回按钮。在本机应用程序中,它可以用来关闭情态动词,导航到上一个视图,退出应用程序,等等。在Ionic默认情况下,当按betway东盟体育app下后退按钮时,当前视图将从导航堆栈中弹出,并显示前一个视图。如果导航堆栈中不存在以前的视图,则什么也不会发生。本指南将展示如何自定义硬件后退按钮的行为。
硬件后退键指的是Android设备上的物理后退键,不应该与浏览器后退键或
ion-back-button
.本指南仅适用于Android设备。
电容和科多瓦的硬件返回按钮
当在电容或Cordova应用程序中运行时,Ionic Framework将发出betway东盟体育app
ionBackButton
事件,当用户按下硬件返回按钮时。
当听到
ionBackButton
事件时,可以注册要触发的处理程序。该处理程序可以执行退出应用程序或打开确认对话框等操作。必须为每个处理程序分配优先级。默认情况下,每次按下硬件返回按钮只触发一个处理程序。优先级值用于确定应该调用哪个回调。这很有用,因为如果你打开了一个模态,你可能不希望它关闭
而且
当按下硬件后退按钮时,应用程序可以向后导航。一次只运行一个处理程序可以关闭模态,但仍然需要按下另一个硬件后退按钮才能向后导航。
在某些情况下,您可能希望解雇多个处理程序。每个处理程序回调都传递一个函数作为参数,可用于告诉框架调用下一个处理程序。
浏览器中的硬件返回按钮
当在移动浏览器或作为PWA运行应用程序时,硬件返回按钮定制将受到限制。这是因为电容和Cordova暴露了在普通web浏览器中没有暴露的额外功能。例如,通过硬件返回按钮关闭覆盖和菜单是当前在移动浏览器中运行应用程序时不支持的功能。这些都是已知的局限性,目前还没有直接的解决方案。
对于完整的硬件后退按钮支持,我们建议使用电容或Cordova。
的
ionBackButton
事件不会在浏览器中运行应用程序或作为PWA时触发。
基本用法
文档
.
addEventListener
(
“ionBackButton”
,
(
电动汽车
)
= >
{
电动汽车
.
细节
.
注册
(
10
,
(
)
= >
{
控制台
.
日志
(
“处理程序被称为!”
)
;
}
)
;
}
)
;
进口
{
平台
}
从
“@betway东盟体育appionic /角”
;
...
构造函数
(
私人
平台
:
平台
)
{
这
.
平台
.
backButton
.
subscribeWithPriority
(
10
,
(
)
= >
{
控制台
.
日志
(
“处理程序被称为!”
)
;
}
)
;
}
文档
.
addEventListener
(
“ionBackButton”
,
(
电动汽车
)
= >
{
电动汽车
.
细节
.
注册
(
10
,
(
)
= >
{
控制台
.
日志
(
“处理程序被称为!”
)
;
}
)
;
}
)
;
进口
{
useBackButton
}
从
“@betway东盟体育appionic / vue”
;
...
出口
默认的
{
设置
(
)
{
useBackButton
(
10
,
(
)
= >
{
控制台
.
日志
(
“处理程序被称为!”
)
;
}
)
;
}
}
在本例中,我们正在注册一个处理程序,以便在按下硬件返回按钮时调用它。我们已经将优先级设置为10,并且没有向框架指示我们希望调用下一个处理程序。因此,优先级小于10的任何处理程序都不会被调用。优先级大于10的处理程序将首先被调用。
如果存在具有相同优先级值的处理程序,则为已注册的处理程序 最后的 将被调用。看到 具有相同优先级的处理程序 为更多的信息。
调用多个处理程序
每个硬件返回按钮回调都有一个
processNextHandler
参数。调用此函数允许您继续调用硬件返回按钮处理程序。
文档
.
addEventListener
(
“ionBackButton”
,
(
电动汽车
)
= >
{
电动汽车
.
细节
.
注册
(
5
,
(
)
= >
{
控制台
.
日志
(
“另一个驯兽师被叫来了!”
)
;
}
)
;
电动汽车
.
细节
.
注册
(
10
,
(
processNextHandler
)
= >
{
控制台
.
日志
(
“处理程序被称为!”
)
;
processNextHandler
(
)
;
}
)
;
}
)
;
进口
{
平台
}
从
“@betway东盟体育appionic /角”
;
...
构造函数
(
私人
平台
:
平台
)
{
这
.
平台
.
backButton
.
subscribeWithPriority
(
5
,
(
)
= >
{
控制台
.
日志
(
“另一个驯兽师被叫来了!”
)
;
}
)
;
这
.
平台
.
backButton
.
subscribeWithPriority
(
10
,
(
processNextHandler
)
= >
{
控制台
.
日志
(
“处理程序被称为!”
)
;
processNextHandler
(
)
;
}
)
;
}
文档
.
addEventListener
(
“ionBackButton”
,
(
电动汽车
)
= >
{
电动汽车
.
细节
.
注册
(
5
,
(
)
= >
{
控制台
.
日志
(
“另一个驯兽师被叫来了!”
)
;
}
)
;
电动汽车
.
细节
.
注册
(
10
,
(
processNextHandler
)
= >
{
控制台
.
日志
(
“处理程序被称为!”
)
;
processNextHandler
(
)
;
}
)
;
}
)
;
进口
{
useBackButton
}
从
“@betway东盟体育appionic / vue”
;
...
出口
默认的
{
设置
(
)
{
useBackButton
(
5
,
(
)
= >
{
控制台
.
日志
(
“另一个驯兽师被叫来了!”
)
;
}
)
;
useBackButton
(
10
,
(
processNextHandler
)
= >
{
控制台
.
日志
(
“处理程序被称为!”
)
;
processNextHandler
(
)
;
}
)
;
}
}
这个例子展示了如何向Ionic Framework指示您希望触发下一个处理程betway东盟体育app序。所有回调函数都提供了
processNextHandler
函数作为参数。调用此函数将导致下一个处理程序(如果存在的话)被触发。
具有相同优先级的处理程序
在内部,Ionic Frbetway东盟体育appamework使用类似于优先级队列的东西来管理硬件返回按钮处理程序。优先级值最大的处理程序将首先被调用。如果存在多个具有相同优先级值的处理程序,则 最后的 添加到此队列的相同优先级的处理程序将是第一个被调用的处理程序。
文档
.
addEventListener
(
“ionBackButton”
,
(
电动汽车
)
= >
{
/ /处理程序
电动汽车
.
细节
.
注册
(
10
,
(
processNextHandler
)
= >
{
控制台
.
日志
(
“叫了训导员A !”
)
;
processNextHandler
(
)
;
}
)
;
/ /处理程序B
电动汽车
.
细节
.
注册
(
10
,
(
processNextHandler
)
= >
{
控制台
.
日志
(
“叫了联络员B !”
)
;
processNextHandler
(
)
;
}
)
;
}
)
;
在上面的例子中,处理程序A和B的优先级都是10。由于处理程序B是最后注册的,所以Ionic Framework将在调用处理betway东盟体育app程序A之前调用处理程序B。
退出应用程序
在某些情况下,在按下硬件返回按钮时退出应用程序是可取的。这可以通过使用
ionBackButton
事件与电容/Cordova提供的方法相结合。
进口
{
BackButtonEvent
}
从
“@betway东盟体育appionic /核心”
;
进口
{
插件
}
从
“@capacitor /核心”
;
常量
{
应用程序
}
=
插件
;
...
常量
routerEl
=
文档
.
querySelector
(
“ion-router”
)
;
文档
.
addEventListener
(
“ionBackButton”
,
(
电动汽车
:
BackButtonEvent
)
= >
{
电动汽车
.
细节
.
注册
(
-
1
,
(
)
= >
{
常量
路径
=
窗口
.
位置
.
路径名
;
如果
(
路径
= = =
routerEl
.
根
)
{
应用程序
.
exitApp
(
)
;
}
}
)
;
}
)
;
进口
{
IonRouterOutlet
,
平台
}
从
“@betway东盟体育appionic /角”
;
进口
{
插件
}
从
“@capacitor /核心”
;
常量
{
应用程序
}
=
插件
;
...
构造函数
(
私人
平台
:
平台
,
私人
routerOutlet
:
IonRouterOutlet
)
{
这
.
平台
.
backButton
.
subscribeWithPriority
(
-
1
,
(
)
= >
{
如果
(
!
这
.
routerOutlet
.
canGoBack
(
)
)
{
应用程序
.
exitApp
(
)
;
}
}
)
;
}
进口
{
useIonRouter
}
从
“@betway东盟体育appionic /反应”
;
进口
{
插件
}
从
“@capacitor /核心”
;
常量
{
应用程序
}
=
插件
;
...
常量
ionRouter
=
useIonRouter
(
)
;
文档
.
addEventListener
(
“ionBackButton”
,
(
电动汽车
)
= >
{
电动汽车
.
细节
.
注册
(
-
1
,
(
)
= >
{
如果
(
!
ionRouter
.
canGoBack
(
)
)
{
应用程序
.
exitApp
(
)
;
}
}
)
;
}
)
;
进口
{
useBackButton
,
useIonRouter
}
从
“@betway东盟体育appionic / vue”
;
进口
{
插件
}
从
“@capacitor /核心”
;
常量
{
应用程序
}
=
插件
;
...
出口
默认的
{
设置
(
)
{
常量
ionRouter
=
useIonRouter
(
)
;
useBackButton
(
-
1
,
(
)
= >
{
如果
(
!
ionRouter
.
canGoBack
(
)
)
{
应用程序
.
exitApp
(
)
;
}
}
)
;
}
}
此示例显示当用户按下硬件后退按钮且导航堆栈中什么都没有留下时,应用程序将退出。也可以在退出应用程序之前显示一个确认对话框。
建议在退出应用程序之前检查用户是否在根页面上。开发人员可以使用
canGoBack
方法
IonRouterOutlet
在离子betway东盟体育app角和
IonRouter
在离子betway东盟体育app反应和离子Vue。
内部框架处理程序
下表列出了Ionic Framework使用的所有内部硬件返回按钮事件处理程序。betway东盟体育app的
传播
列说明该特定的处理程序是否告诉Ionic Framework调用下一个返回按钮处理程序。betway东盟体育app
处理程序 | 优先级 | 传播 | 描述 |
---|---|---|---|
覆盖 | One hundred. | 没有 |
适用于覆盖组件
ion-action-sheet
,
ion-alert
,
ion-loading
,
ion-modal
,
ion-popover
,
ion-picker
,
ion-toast
. |
菜单 | 99 | 没有 |
适用于
ion-menu
. |
导航 | 0 | 是的 | 适用于路由导航(即Angular routing)。 |