应用场景
在微信开发菜单的时候,遇到一个问题,当从菜单进去的页面后,如果立刻按返回键,则出现返回到微信公众号的微信界面。并没有任何提示,但我看到【京东微信公众号】点击进去,立刻按返回键时是有提示的,在微信JSSDK 开发文档中并未找到相关的说明。注意【京东】右上角,都是可以自定义的。
方案原理
利用HTML5的
window.history.pushState
特性,例如 当从A页面进入时,先判断window.history.length==1
那么调用window.history.pushState
写进一个空历史记录。并且监听返回键,当按下返回键时(我们是没办法阻止返回事件的,但由于上一个历史记录是空白的,所以的还是当前页面。
),监听到返回事件 使用layer弹框插件提示,“您确定要返回微信吗?” 或者其他。点击【再逛逛】,则再次写入空白历史记录,点击【确定】或者再次点击【返回键】则关闭微信浏览器。
方案代码
if(window.history.length==1){//判断是第一次从微信菜单进入页面
//写入空白历史记录
pushHistory();
}
//延时监听
setTimeout(function () {
//监听物理返回按钮
window.addEventListener("popstate", function(e) {
layer.open({
content: '您确定要返回微信吗?',
btn: ['确认', '再逛逛'],
shadeClose: false,
yes: function(){
//调用微信浏览器私有API关闭浏览器
WeixinJSBridge.call('closeWindow');
}, no: function(){
//点击【再逛逛】,再次写入空白历史记录
pushHistory();
}
});
}, false);
}, 300);
/**
* [pushHistory 写入空白历史记录]
* @author 邱先生
* @copyright 烟火里的尘埃
* @version [V1.0版本]
* @date 2016-07-30
* @return {[type]} [description]
*/
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。