在 android 平台上的 app, 在主页面时经常会遇到再按一次退出 app 的功能, 避免只按一下返回键就退出 app 提升体验优化
1 这个功能需要我们用到 ionic 提供的
registerBackButtonAction 方法 (注册硬件后退按钮动作)
registerBackButtonAction(callback, priority, [actionId])
参数 类型 说明
callback function 当点击返回按钮时触发, 如果该监视器具有最高的优先级
priority number 仅最高优先级的会执行
actionId(可空) * 该 id 指定这个动作 默认: 一个随机且唯一的 id
后退按钮的优先执行顺序:
返回到上一个视图 = 100
关闭侧边菜单 = 150
关闭模版 modal = 200
关闭上拉菜单 action sheet = 300
关闭对话框 popup = 400
关闭加载框 loading = 500
注意: 返回: function 一个被触发的函数, 将会注销 backButtonAction
如果我们不想注册返回按钮影响所有页面, 就要将返回函数再调用
例如: 如果一个上拉菜单已经显示, 后退按钮应该关闭上拉菜单, 而不是返回一个页面视图或关闭一个打开的模型
所以我们要实现再按一次退出 app 的功能, 可以将优先级 priority 设为 101
2 代码实现
在 js 中
- angular.module("app").run(["$rootScope", "$ionicPlatform",
- "$location", "$ionicHistory",
- function ($rootScope, $ionicPlatform, $location, $ionicHistory) {
- "use strict";
- // 当用户在主页面, 按返回键时, 给予提示, 如果在 2s 内再次出发返回键, 就退出 app
- function showTipMsg() {
- window.plugins.toast.showShortCenter("在按一次退出 app"); // toast 是 cordova 的一个插件 cordova-plugin-x-toast, 也可以用 ionic 的弹窗来代替
- $rootScope.exitApp = true;
- const delay = 2000;
- setTimeout(() => {
- $rootScope.exitApp = false;
- }, delay);
- }
- // 判断当前路由, 是否是 project, mission,mine, message 这几个主页面
- function isExitPage() {
- let path = $location.path(),
- state = _.last(path.split("/")),
- ary = ["project", "mission", "mine", "","message"];
- return _.includes(ary, state);
- }
- // 注册返回事件
- function registerBackButton(event) {
- event.preventDefault();
- $cordovaKeyboard.isVisible() && $cordovaKeyboard.close();
- if (isExitPage()) {
- $rootScope.exitApp && ionic.Platform.exitApp();
- !$rootScope.exitApp && showTipMsg();
- } else {
- $ionicHistory.goBack();
- }
- return false;
- }
- // ionic 环境已经准备完毕
- ionic.Platform.ready(() => {
- try {
- const priority = 101;
- $ionicPlatform.is("Android") && $ionicPlatform.registerBackButtonAction(registerBackButton, priority);
- } catch (e) {
- console.warn("Application is running in browser causes inspection failed.");
- }
- });
- }]);
这样我们就很简单实现了一个 "再按一次退出 app 的功能"
来源: https://www.2cto.com/kf/201802/721122.html