2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > H5及微信小程序实测可用——监听手机返回键操作

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

时间:2020-03-28 01:09:07

相关推荐

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

目录

1.自定义导航(只能拦截左上角返回)2.内嵌H5实现拦截物理键返回(均可监听)

微信小程序开发过程中我们经常遇到需要监听点击左上角返回、手机物理返回键或者左滑返回的需求

微信原生是没有API支持监听的

这时候我们可以借助以下两种方法实现该操作

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

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

"navigationStyle": "custom",

如果想要全局替换可以直接在 app.js中配置,单页面使用可在对应的xxx.js中使用

使用自定义导航 我们可以在点击左上角箭头返回的方法中实现各种需求

但是这种方法只能监听左上角的返回 达不到我们想要的效果

附:/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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。