控制微信小程序web view的返回按钮

需求：点击web-view页面的左上角返回按钮时，显示弹窗，点击取消或确认后才能返回。（实际上点击返回按钮会直接返回上一页）

解决方法：由于webview使用的是微信浏览器打开的，我们可以使用js的History API ，通过history.pushState来阻止返回。

history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。

vue 代码

在进入页面之前，执行下面代码

<script type="text/javascript">window.history.pushState(null, null, null)
</script>

上面代码的目的就是添加一条历史记录。用于第三个参数为null，则不会发生跳转，但是会添加一条历史记录。然后加上自己的地址，这样就会存在两条历史记录。假如只有一条历史则不会触发 popstate 事件。

data() {return {centerDialogVisible: false,}},mounted() {window.addEventListener('popstate', this.handlePopstate)},beforeDestroy() {window.removeEventListener('popstate', this.handlePopstate)},
methods:{//弹出框handleClose() {this.centerDialogVisible = false;wx.miniProgram.navigateBack({delta: history.length,});},cancel_dialog() {this.centerDialogVisible = false;wx.miniProgram.navigateBack({delta: history.length,});},//确定confirm_dialog() {this.centerDialogVisible = false;this.cloudRequest({name: 'login',data: {$url: 'update_mv',id: this.userRecordId,status: 1,},}).then((res) => {console.log('update_mv', res.id);this.getFeedMv(res.id, false)});},handlePopstate() {if (this.canChoose) {this.centerDialogVisible = true;} else {wx.miniProgram.navigateBack({delta: history.length,});}history.pushState(null, null, document.URL);},
},

效果

原文链接：https://blog.csdn.net/github_38186390/article/details/116794605

控制微信小程序web view的返回按钮相关推荐

微信小程序使用wx.chooseLocation返回的数据没有省份的处理方法
微信小程序使用wx.chooseLocation返回的数据没有省份的处理方法遇到的问题: 第一个坑: 使用wx.chooseLocation获取地址,当输入地址时,有时候第一个搜索结果没有省市区信息 ...
[微信小程序]微信小程序点击事件返回值的target分析
微信小程序点击事件返回值的target分析测试过程在微信小程序中创建以下图片然后在调试中点击下面第5个. console返回两个e 第一个e是第5块小块的e 第二个e是下面全部9小块组成的大块的 ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
微信小程序中带参数返回上一页的方法总结（三种）
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一把当前页面数据放入本地缓存( wx.setStor ...
微信小程序某个页面直接返回首页（微信小程序回退到首页）
微信小程序某个页面直接返回首页(微信小程序回退到首页) 打开小程序后,到三级页面后点击左上角的返回按钮,能够直接返回到首页正常 A -> B -> C 都是通过 wx.navigate ...
微信小程序怎么添加底部菜单按钮
继续微信小程序方面的教程,今天讲怎么在空白的小程序页面添加几个类似菜单的按钮,实现点击某个按钮跳转到对应界面,而不是单单局限于一个页面. 需要什么: 微信小程序账户电脑一台电脑安装微信开发者工具软 ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
微信小程序如何隐藏右上角分享按钮
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序右上角有个转发按钮可以分享转发当前页面到群或者微信好友. 右上角胶囊按钮>转发转发可以配置转发是路径参 ...
php 微信创建客服,如何给微信小程序内添加客服按钮
这次给大家带来如何给微信小程序内添加客服按钮,给微信小程序内添加客服按钮的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 普通客服按钮添加客服-联系我们 2. 悬浮客服按钮添加,图片自定义大 ...

控制微信小程序web view的返回按钮

需求：点击web-view页面的左上角返回按钮时，显示弹窗，点击取消或确认后才能返回。（实际上点击返回按钮会直接返回上一页）

解决方法：由于webview使用的是微信浏览器打开的，我们可以使用js的History API ，通过history.pushState来阻止返回。

控制微信小程序web view的返回按钮相关推荐

最新文章

热门文章