Sencha Touch 程序設計之 Android 平臺 Back 按鍵處理

用 Sencha Touch 結合PhoneGap設計本地APP，免不了要分別處理android平臺和iphone平臺，兩個平臺的最大區別之一就是back鍵的處理。iphone平臺沒有back按鍵，只有home按鍵，按下該鍵的話程序會自動轉入後臺處理，該按鍵的效用等同於android平臺的home按鍵，可是，android平臺特殊的地方在於，它還有一個back鍵，熟悉了android平臺的開發者或使用者，把該鍵的做用理解爲退回程序的上一個頁面，若是程序已經在主頁面，此時則退出程序。 由於Sencha Touch對android平臺進行了消息封裝，默認對back鍵的處理，同home鍵的處理一致，這令不少android開發者或使用者使用其功能的話不太友好，我本身在調試程序的過程當中就誤操做過了N次，每次按下back鍵指望程序回退到上一個頁面，沒想到程序直接消失了，轉到後臺去了。 網上搜索了一些解決方案，各有利弊，彙總貼可參照Sencha Touch官方論壇《Why-can-t-I-control-Android-phone-s-hardware-Back-button-in-Sencha-with-PhoneGap》，下面介紹一下我設計的一個解決方案，在實測環境中工做良好，總結以下： 1. 首先在Sencha 啓動代碼中捕獲android平臺的back按鍵消息，阻止Sencha 框架的默認處理 var App = new Ext.application({ // ... APP 配置參數 launch : function () { // ... 界面初始化 BBGlobalData.mainPanel = Ext.create('Ext.Panel', { fullscreen: true, layout : 'card', cardAnimation : 'slide', items: [ Ext.create('BBShow.view.LoginPanel'), Ext.create('BBShow.view.HomePanel'), Ext.create('BBShow.view.MediaPanel'), Ext.create('BBShow.view.PicCarousel'), Ext.create('BBShow.view.ReportListPanel'), Ext.create('BBShow.view.ReportPanel'), ] }); Ext.Viewport.add(BBGlobalData.mainPanel); document.addEventListener('deviceready', function () { console.log('deviceready'); document.addEventListener("backbutton", function () { console.log('user presses the back button on Android'); // 獲取當前的焦點頁面，併發送自定義消息'back' BBGlobalData.mainPanel.getActiveItem().fireEvent('back'); }, false); }, false); } }) 2. 在子頁面中註冊back消息的監聽器 /*定義登陸面板*/ Ext.define('BBShow.view.LoginPanel', { extend: 'Ext.Panel', config: { items: [ { xtype: 'titlebar', docked: 'top', title: '用戶登陸' }, // 其餘頁面內容 ], listeners: [ { fn: 'onBack', event: 'back', //註冊監聽自定義back按鍵消息 } ] }, onBack: function() { //BBGlobalData.gotoHomePanel(); //如，跳轉到其餘頁面 BBGlobalData.exitApp(); //或退出程序 }, }); 3. 實現退出程序的處理，藉助於PhoneGap BBGlobalData.exitApp = function() { navigator.app.exitApp(); } 4. 實現頁面跳轉的處理（主頁面採用card view，相似於撲克的翻牌） BBGlobalData.gotoHomePanel = function() { BBGlobalData.mainPanel.setActiveItem(1); } 總結：其實總的解決方法仍是很簡單，只要把總體的框架搭建完善了，很容易就能在多平臺之間轉換了。