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); } 总结:其实总的解决方法还是很简单,只要把整体的框架搭建完善了,很容易就能在多平台之间转换了。 

转载于:https://my.oschina.net/victorHomePage/blog/86532

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值