最近做一个angularJS的商城项目,使用Hbuilder打包app时遇到了返回键直接退出的问题,网上的解决办法机制为判断是否有window.history(或者webview记录)历史记录,有就返回上一级,没有就退出程序,这只能满足一般需要,在我的实际项目中完全不能解决问题。
首先我抛出我用网上常规方法时出现的bug。
第一个bug,当我在app中点击退出登陆时,app会返回授权登录页并清除storage本地缓存。此时按返回键应该退出app,但因为是从退出登录页面跳转到当前页面,所以window.history会有记录,此时点击返回按键实际会跳向退出登录的页面,造成未登录却依然可以进入app的bug。
第二个bug,进入app时,授权登录页会根据storage判断是否为登录状态,如果为登录状态就直接放行,让用户进入app进行使用,用网上一般解决办法时,在app首页点击返回键会向授权登录页跳转,但此时用户为登录状态,所以授权登录页的判断机制会让页面重新跳转进入app首页,造成在app首页按退出键无效的假象。
解决办法:
先上代码
//获取当前页面的信息
$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
$rootScope.previousState = from; //from为前一个页面的路由信息:url,cache,views,name
$rootScope.previousParams = fromParams; //fromParams为前一个页面的ID信息
$rootScope.nowState = to; //to为当前页面的路由信息:url,cache,views,name,同样,toParams为当前页面的ID信息
});
$scope.first = null;
//监听手机返回键
document.addEventListener("plusready", function() {
$scope.webview = plus.webview.currentWebview();
plus.key.addEventListener('backbutton', function () {
$scope.webview.canBack(function (e) {
if($rootScope.nowState.name == 'Main0'){
//首次按键,提示‘再按一次退出应用’
if (!$scope.first) {
$scope.first = new Date().getTime();
plus.nativeUI.toast('再按一次退出应用');
setTimeout(function() {
$scope.first = null;
}, 1000);
} else {
plus.runtime.quit();
}
} else if (e.canBack && localStorage.getItem('uid') && localStorage.getItem('openid')) {
$scope.webview.back();
} else{
plus.runtime.quit();
}
})
});
});
解释:
第一个if判断,根据获取到的当前页面name值判断页面是否为首页,是的话双击退出,解决第二个bug。
第二个if判断,根据登录状态和是否有路由历史判断是否需要退出,解决第一个bug。
刚刚迈入前端开发的大门,也是第一次写博客,如有不足,多多包涵。