微信小程序 webview 返回按钮阻止返回

一。需求：微信小程序在使用webview 时，导航栏是不允许自己修改的。对于左上角的返回按钮，如果相要在返回的时候，弹框确定后再返回，微信小程序是没有api支持。在微信小程序的思路上基本无解。

二。解决办法：用于我们的webview 就是直接使用的微信浏览器。我们是可以使用js 相关的 History API. 主要是通过设置 history.pushState 这个方法来阻止的。

history.pushState API说明：总共是三个参数，前面两个不用管直接用null 即可，第三个代码跳转页面的地址。

首先进入页面时：执行下面代码
```
<script type="text/javascript">window.history.pushState(null, null, null)
</script>
```
上面代码的目的就是添加一条历史记录。用于第三个参数为null，则不会发生跳转，但是会添加一条历史记录。然后加上自己的地址，这样就会存在两条历史记录。假如只有一条历史则不会触发 popstate 事件。

vue相关代码：

  data() {return {showConfirmModal: false,clickConfirm: false,isSaved: false // 是否保存的操作}},mounted() {window.addEventListener('popstate', this.handlePopstate)},beforeDestroy() {window.removeEventListener('popstate', this.handlePopstate)},methods: {confirmModal() {this.showConfirmModal = falsethis.clickConfirm = trueuni.navigateBack({delta: history.length})},closeModal() {this.showConfirmModal = falsehistory.pushState(null, null, document.URL)},handlePopstate() {if (!this.clickConfirm && this.isSaved) {history.pushState(null, null, document.URL)this.showConfirmModal = true}},}

showConfirmModal : 用于显示弹框参数
clickConfirm : 区分是否点击过确定按钮。点击后就一直为true。
当触发 popstate 事情时，需要先执行下 history.pushState 如果不执行则无法保留当前页面。当点击确定返回时，也会触发该事情，所以需要加一个参数进行控制。
点击 modal 确定按钮 则需要返回。微信小程序直接使用。必须使用history.length不然无法退出。因为 history 的长度是大于1的。
```
wx.navigateBack({delta: history.length
})
```

问题咨询：加入QQ群：620302448。或者扫描加入。

微信小程序 webview 返回按钮阻止返回相关推荐

实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
实现微信小程序内嵌H5中的下载功能一.项目场景: 难点解决方案: 1.H5微信小程序: a.首先必不可少的是安装jweixin-module模块: b.在main.js中将依赖绑定: c.H5对应 ...
微信小程序webview页面使用painter生成海报
微信小程序webview页面使用painter生成海报因为要在webview下生成海报,需要使用cover-view,根据接口返回数据动态更新海报内容,微信小程序生成海报组件有wxa-plugin- ...
关于微信小程序webview的使用
小程序微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验.同时提供一系列工具帮助开发者快速接入并完成小程序开发.关于如何注册配置就不多言了,本文主要 ...
微信小程序web-view公众号与小程序支付的切换使用
微信小程序web-view公众号与小程序支付间的切换使用最近小程序开放了新功能,支持内嵌网页.html写的网页,官网,网站,运行在浏览器上的,有域名的那种,可以内嵌到小程序里了! 那么这意味着什么呢 ...
微信小程序 - webview 的使用
为什么80%的码农都做不了架构师?>>> 使用 webview 可以让小程序内嵌网页,利用这个功能可以实现些在微信小程序环境中受到局限的功能,当然也有一些坑,在此分享下. 介绍 ...
微信小程序webview(H5页面)调用微信小程序支付
1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
[微信小程序]WebView内嵌H5实现本地文件上传
[官方文档] 小程序与H5如何互相跳转小程序与H5交互以上传文件为例微信小程序开放能力web-view使用之h5页面与小程序页面交互传值快速小程序开发之微信小程序内嵌 H5 微信小程序web-v ...
微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了,那么为什么会存在这个问 ...
开发那点事（十五）微信小程序webView首次进入白屏优化方案
写在前面的话公司最近项目已经进入使用阶段,从用户那边反应过来的问题,说小程序打开太慢,中间白屏几秒,于是想办法来做一个等待效果. 优化后效果具体实现(已vue为例) 按照正常的思路,路由按需加载. ...

微信小程序 webview 返回按钮阻止返回

一。需求：微信小程序在使用webview 时，导航栏是不允许自己修改的。对于左上角的返回按钮，如果相要在返回的时候，弹框确定后再返回，微信小程序是没有api支持。在微信小程序的思路上基本无解。

二。解决办法：用于我们的webview 就是直接使用的微信浏览器。我们是可以使用js 相关的 History API. 主要是通过设置 history.pushState 这个方法来阻止的。

history.pushState API说明：总共是三个参数，前面两个不用管直接用null 即可，第三个代码跳转页面的地址。

微信小程序 webview 返回按钮阻止返回相关推荐

最新文章

热门文章

微信小程序 webview 返回按钮阻止返回

一。需求：微信小程序在使用webview 时，导航栏是不允许自己修改的。对于左上角的返回按钮，如果相要在返回的时候，弹框确定后再返回，微信小程序是没有api支持。在微信小程序的思路上基本无解。

二。解决办法：用于我们的webview 就是直接使用的微信浏览器。我们是可以使用js 相关的 History API. 主要是通过 设置 history.pushState 这个方法来阻止的。

history.pushState API说明：总共是三个参数，前面两个不用管直接用null 即可，第三个代码跳转页面的地址。

微信小程序 webview 返回按钮阻止返回相关推荐

最新文章

热门文章

二。解决办法：用于我们的webview 就是直接使用的微信浏览器。我们是可以使用js 相关的 History API. 主要是通过设置 history.pushState 这个方法来阻止的。