1.自定义导航（只能拦截左上角返回）

当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏

  "navigationStyle": "custom",

如果想要全局替换可以直接在 app.js中配置，单页面使用可在对应的xxx.js中使用
使用自定义导航我们可以在点击左上角箭头返回的方法中实现各种需求
但是这种方法只能监听左上角的返回达不到我们想要的效果
附：https://github.com/lingxiaoyi/navigation-bar
上边是我项目中使用过的导航组件具体使用方法可以看该组件介绍

2.内嵌H5实现拦截物理键返回（均可监听）

这种方式可以监听三种返回操作需要使用内嵌H5来解决
微信小程序内嵌H5方法

<web-view src="{{url}}"></web-view>

注意：需要提前配置h5的域名到小程序后台的业务域名中

然后在H5中我们要使用pushState方法，通过window.history方法来对浏览器历史记录的读写
pushState是H5的API中新添加的，
在 HTML 文件中, history.pushState() 方法向浏览器历史添加了一个状态。
pushState() 带有三个参数：状态对象，标题，以及自定义URL地址。
直接上代码

<!DOCTYPE html>
<html><meta name="viewport" content="width=device-width"><script type="text/javascript">window.history.pushState(null, null, "#");window.addEventListener("popstate", function(e) {window.history.pushState(null, null, "#");alert('我被拦截了')})</script>
<body><p>测试物理键返回</p>
</body>
</html>

H5及微信小程序实测可用——监听手机返回键操作相关推荐

JS 监听手机返回键
JS监听手机返回键,需要用些前端的"奇技淫巧". 核心代码如下: if (window.history && window.history.pushState) { ...
原生js监听手机返回键
创建人:hu_time 描述:js监听手机返回键普通页面跳转,监听返回上一页: document.addEventListener("plusready", function() ...
Android监听手机返回键
Android在做项目时,有时候点击返回按钮没反应(有冲突),那就需要我们监听返回键.重写onKeyDown()方法: // 监听手机返回键 @Override public boolean onKe ...
监听手机返回键或浏览器后退键并自定义跳转地址
/** * 监听手机返回键或浏览器后退键并自定义跳转地址 * oldUrl 本页对应的url * backUrl 后退到页面的Url */ function backBtnToUrl(oldU ...
微信公众号监听手机返回键事件jssdk—wx.closeWindow
需求场景: 只有扫码初始进入异业联盟活动页,0元券直接弹框领取成功(如图1) 抛出问题: 进入优惠券包后到另一个页面(如图1) 然后按手机返回会回到异业联盟活动页,始终弹出领取活动页面解决方案: 在 ...
微信小程序实现watch监听，无需页面引入！！！
目录 1监听函数实现 2.页面Page重写(实现无需引入) 3完整代码实现 4微信小程序代码片段大家都知道小程序其实和Vue的写法以及原理都存在很大的相同,但是里有watch监听可以监听data定义 ...
微信小程序实现watch监听数据变化
起因:众所周知,微信小程序的数据监听器observers只能在自定义组件中使用,如果想要在页面中实现类似的功能,就只有通过其他的方法.其一就是通过模拟vue的watch来监听数据变化. 实现如下: 1 ...
微信小程序自定义导航栏 navigation bar 返回键首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件版本号:2.0.0 作者:chen-yt github: https://g ...
js监听手机返回按键操作，禁用返回按键操作。
**使用到的技术要点:**history.pushState() 原理暂不做解释,后续再做补充,可参考popstate官方文档 1.禁用手机返回按键,引入直接可用,亲测. XBack = {};(fu ...

H5及微信小程序实测可用——监听手机返回键操作

目录

1.自定义导航（只能拦截左上角返回）

2.内嵌H5实现拦截物理键返回（均可监听）

H5及微信小程序实测可用——监听手机返回键操作相关推荐

最新文章

热门文章