ionic框架对Android返回键的处理

   在HybridApp移动跨平台开发中,android平台会遇到一些比较特殊并难以解决的问题,这些问题在原生应用开发中很easy, Android的返回键处理就是问题之一,假如我们要实现一个在很多App中都有的在主页按返回键弹出对话框提示用户退出应用的功能,在原生应用开发中是 很容易的,只要在onKeyUp事件里面对返回键事件进行处理就可以了。按2次返回键退出应用的Java代码如下:

  1. private long exitTime = 0;  
  2.   
  3. @Override  
  4. public boolean onKeyDown(int keyCode, KeyEvent event) {  
  5.     if(keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN){     
  6.         if((System.currentTimeMillis()-exitTime) > 2000){    
  7.             Toast.makeText(getApplicationContext(), "再按一次退出程序", Toast.LENGTH_SHORT).show();                                  
  8.             exitTime = System.currentTimeMillis();     
  9.         } else {  
  10.             finish();  
  11.             System.exit(0);  
  12.         }  
  13.         return true;     
  14.     }  
  15.     return super.onKeyDown(keyCode, event);  
  16. }  


      但在使用了PhoneGap的HTML5应用程序中,事情就没有这么简单了,首先WebView接管了返回键的事件,你无法在Java层处理返回键,除非 改Cordova框架的代码,但这样显然是不合适的,会带来维护问题,也不符合一般的开发规范。即使我们可以修改Cordova源码,同时处理好按返回键 Webview回退上一页和在首页时弹出处理提示,也是很困难的。

      在深入分析ionic框架源码,在与ionic论坛的国外开发者交流后,终于找到了一个比较后的解决方法。Ionic作为目前国外比较活跃的 HybridApp移动开发框架,对Android平台的返回键的处理是有比较合理的解决方案的。ionic框架对android返回键处理的源码如下:

返回键优先级定义,主要用途是返回键行为的优先级定义,例如当有弹出框时(优先级400),按返回键取消弹出框,不回退页面(优先级100)

[javascript] view plaincopy
  1. var PLATFORM_BACK_BUTTON_PRIORITY_VIEW = 100;  
  2. var PLATFORM_BACK_BUTTON_PRIORITY_SIDE_MENU = 150;  
  3. var PLATFORM_BACK_BUTTON_PRIORITY_MODAL = 200;  
  4. var PLATFORM_BACK_BUTTON_PRIORITY_ACTION_SHEET = 300;  
  5. var PLATFORM_BACK_BUTTON_PRIORITY_POPUP = 400;  
  6. var PLATFORM_BACK_BUTTON_PRIORITY_LOADING = 500;  


注册返回键处理动作,我们自己对返回键的处理需要在这里实现了,注意返回的是一个函数,调用这个函数将取消本次事件注册。

[javascript] view plaincopy
  1. /** 
  2.  * @ngdoc method 
  3.  * @name $ionicPlatform#registerBackButtonAction 
  4.  * @description 
  5.  * Register a hardware back button action. Only one action will execute 
  6.  * when the back button is clicked, so this method decides which of 
  7.  * the registered back button actions has the highest priority. 
  8.  * 
  9.  * For example, if an actionsheet is showing, the back button should 
  10.  * close the actionsheet, but it should not also go back a page view 
  11.  * or close a modal which may be open. 
  12.  * 
  13.  * @param {function} callback Called when the back button is pressed, 
  14.  * if this listener is the highest priority. 
  15.  * @param {number} priority Only the highest priority will execute. 
  16.  * @param {*=} actionId The id to assign this action. Default: a 
  17.  * random unique id. 
  18.  * @returns {function} A function that, when called, will deregister 
  19.  * this backButtonAction. 
  20.  */  
  21. $backButtonActions: {},  
  22. registerBackButtonAction: function(fn, priority, actionId) {  
  23.   
  24.   if(!self._hasBackButtonHandler) {  
  25.     // add a back button listener if one hasn‘t been setup yet  
  26.     self.$backButtonActions = {};  
  27.     self.onHardwareBackButton(self.hardwareBackButtonClick);  
  28.     self._hasBackButtonHandler = true;  
  29.   }  
  30.   
  31.   var action = {  
  32.     id: (actionId ? actionId : ionic.Utils.nextUid()),  
  33.     priority: (priority ? priority : 0),  
  34.     fn: fn  
  35.   };  
  36.   self.$backButtonActions[action.id] = action;  
  37.   
  38.   // return a function to de-register this back button action  
  39.   return function() {  
  40.     delete self.$backButtonActions[action.id];  
  41.   };  
  42. },  


回到我们刚开始提出的问题,在主页增加按返回键提出退出应用,在其它页面正常返回上个页面,只要注册一个处理事件就可以了,代码如下:

[javascript] view plaincopy
  1. .run([‘$ionicPlatform‘, ‘$ionicPopup‘,‘$rootScope‘,‘$location‘, function ($ionicPlatform, $ionicPopup, $rootScope, $location) {  
  2.          
  3.         //主页面显示退出提示框  
  4.         $ionicPlatform.registerBackButtonAction(function (e) {  
  5.   
  6.             e.preventDefault();  
  7.   
  8.             function showConfirm() {  
  9.                 var confirmPopup = $ionicPopup.confirm({  
  10.                     title: ‘<strong>退出应用?</strong>‘,  
  11.                     template: ‘你确定要退出应用吗?‘,  
  12.                     okText: ‘退出‘,  
  13.                     cancelText: ‘取消‘  
  14.                 });  
  15.   
  16.                 confirmPopup.then(function (res) {  
  17.                     if (res) {  
  18.                         ionic.Platform.exitApp();  
  19.                     } else {  
  20.                         // Don‘t close  
  21.                     }  
  22.                 });  
  23.             }  
  24.   
  25.             // Is there a page to go back to?  
  26.             if ($location.path() == ‘/home‘ ) {  
  27.                 showConfirm();  
  28.             } else if ($rootScope.$viewHistory.backView ) {  
  29.                 console.log(‘currentView:‘, $rootScope.$viewHistory.currentView);  
  30.                 // Go back in history  
  31.                 $rootScope.$viewHistory.backView.go();  
  32.             } else {  
  33.                 // This is the last page: Show confirmation popup  
  34.                 showConfirm();  
  35.             }  
  36.   
  37.             return false;  
  38.         }, 101);  
  39.   
  40.     }]) 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。