s7team丶杰克
s7team丶杰克
  • 发布:2019-01-17 11:41
  • 更新:2020-07-21 11:41
  • 阅读:5244

解决返回操作遇到的坑,监听back键重置返回操作。

分类:HBuilderX

新人在初次接触开发的时候,搞不清楚多页面以及父子页面之间的关系

为了更好的兼容返回键的时候,采用以下方案

举例说明
常规方案
以首页父子页面结构为例,子页面的创建在父页面(即首页)中完成。

var index = plus.webview.getLaunchWebview();  
var home = plus.webview.create('home.html','home', {  
    top: '50px',  
    bottom: 0  
});  
index.append(home);

想要home页面接下去跳转到外链,或者其他页面实现可返回操作,需要重置mui的返回监听操作
判断如果回到最初页面就提醒退出,一秒之内按两次则退出

//重置mui返回  
mui.back = function(){  
    var first = null;  
    //显示上一个界面;  
    home.canBack(function(e) { //监听webview窗口是否可以返回  
        if (e.canBack) { //可以返回  
            home.back(); //返回上一页面  
        } else { //不可以返回  
             //首次按键,提示‘再按一次退出应用’  
                if (!first) {  
                        first = new Date().getTime();  
                        mui.toast('再按一次退出应用');  
                        setTimeout(function() {  
                                first = null;  
                        }, 1000);  
                } else {  
                        if (new Date().getTime() - first < 1000) {  
                                plus.runtime.quit();  
                        }  
                }  
        }  
    });  
    //继续当前页面原有返回逻辑  
}

如果到指定页面,不让返回操作,执行返回提示退出的话,请先清空历史操作记录,再重新加载这个页面

home.clear();  
home.loadURL('login.html');

这样的方案就很好解决一个封装网页的应用了,兼容有效体验的返回操作。

后期会更用心研究5+App的开发,谢谢大家支持,有好的项目合作,可以联系合作wx:s7team

1 关注 分享
yang2027

要回复文章请先登录注册

d***@sina.com

d***@sina.com

https://ext.dcloud.net.cn/plugin?id=2352 可以实现屏蔽系统返回键 ,并自定义行为
2020-07-21 11:41