不会健身的程序员
不是好作家

项目总结-Hybrid(1):安卓物理返回键逻辑

采用hybrid混合模式开发手机app的时候因为app的所有页面完全由后台html5提供,app壳只提供接口,默认安卓手机的物理返回键点击行为就是window.history.back(),可以满足几乎所有业务场景,但是有特殊情况,比如进入app的时候页面顺序是广告页–>主页.
主页的业务逻辑要求不可返回并且,在2秒内再次点击物理返回键会要求退出,那么可以采用下面javascirpt和壳接口配合的方式执行,由于安全原因javascript不允许修改history里已有的url链接,但可以使用pushState方法往history里增加url链接,并且提供popstate事件监测从history栈里弹出url。我们可以利用这一点,在WebApp加载主界面后先往history里压入“#”链接,然后监听popstate事件,在Android手机的浏览器,按下物理返回键默认的操作是执行window.history.back(),此时将触发popstate事件。收到popstate事件时代码显示“再按一次退出程序”,如用户再次按下物理返回键将执行壳的接口退出应用程序。接着,我们要设定一个定时器,在指定的时间(比如2秒)后如用户没有再次按下物理返回键将再次往history里压入“#”链接,等待用户下一次按下物理返回键。
关于html5 history的操作方法可见:
HTML5之pushstate、popstate操作history,无刷新改变当前url

壳提供2个接口:

  1. 物理返回键执行window.history.back();
  2. 关闭应用接口(如果只是让某个页面无法返回,不需要这个接口);

代码实现

1. 让某个页面无法返回,让物理返回键

pushHistory();
setTimeout(function() {
    window.addEventListener("popstate", function(e) {
        pushHistory();
    }, false);
}, 300);

function pushHistory() {
    var state = {
        title : "title",
        url : "#"
    };
    window.history.pushState(state, "title", "#");
}

2. 连续点击退出应用

window.__b_c_once = false;
pushHistory();
setTimeout(function() {
    window.addEventListener("popstate", function(e) {
        pushHistory();
        if (window.__b_c_once) {
            window.__b_c_once = false;
            app_common.close();
        }
        window.__b_c_once = true;
        showBox("再按一次退出程序", 2000, function() {
            window.__b_c_once = false;
        });
    }, false);
}, 300);

function pushHistory() {
    var state = {
        title : "title",
        url : "#"
    };
    window.history.pushState(state, "title", "#");
}

function showBox(msg, timeOut, onTimeOut) {
    app_common.showToast(msg);//消息提醒
    if (typeof timeOut === "undefined")
        timeOut = 2000;//默认2秒
    setTimeout(function() {
        if (typeof onTimeOut !== "undefined")
            onTimeOut();
    }, timeOut);
}

参考自:http://blog.csdn.net/rilyu/article/details/37742595

赞(1)
转载请注明出处:林俊龙博客 » 项目总结-Hybrid(1):安卓物理返回键逻辑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

年年岁岁花相识,岁岁年年人不同

给我留言网站地图

谢主隆恩

支付宝扫一扫打赏

微信扫一扫打赏