详解解决小程序中webview页面多层history返回问题
更新时间：2019年08月20日 09:58:16 作者：sunny
这篇文章主要介绍了详解解决小程序中webview页面多层history返回问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
小程序开发中遇到的问题：小程序中嵌套了一个webview页面，webview页面中有静默授权（A1页面静默授权后重定向到A2页面），点小程序原生的返回按钮会返回到A1页面，然后页面就会反复静默授权
预期表现：点小程序原生的返回按钮后返回到小程序上个页面
解决方案：通过history.pushState添加历史记录名目，history.onpopstate监听历史记录条目发生变化时，调用小程序APIwx.navigateBack
window.addEventListener('popstate', (event) => {
wx.miniProgram.navigateBack();
});
const code = getSearch('code'); // 伪代码，获取查询参数
if (!code) { // 页面A1
if (isWeixin()) {
// 微信环境
const redirectUrl = window.location.href + '&code=1';
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize' + '?appid=' + appId +
'&redirect_uri=' + encodeURIComponent(redirectUrl) +
'&response_type=code&scope=snsapi_userinfo' +
'#wechat_redirect'; // 静默授权伪代码
} else {
alert('当前不是微信环境');
}
} else { // 页面A2
history.pushState({page: 1}, null, window.location.href);
}
刚开始想的解决办法是用localStorage，跳转到A2时存储一个值，返回到A1时获取这个值，如果有值就清除这个值并且回退到小程序页面。听起来似乎也可行，但小程序的缓存和微信的缓存是同步的，如果在微信环境中直接访问A1页面，重定向到A2会存值，如果直接关闭页面，不会被清除，那么在小程序中访问时就直接回退了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文将用一个简单的例子详细讲解如何用原生JS一步步实现完整的任意位置缩放图片功能,无任何第三方依赖,指针事件 进行多端统一的事件监听,干货满满,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了mpvue 页面预加载新增preLoad生命周期的两种方式,本文重点给大家讲解了第一种方式，需要的朋友可以参考下2019-10-10
本文将详细介绍一个可拖拽列宽表格实例,需要了解更多的朋友可以参考下2012-11-11
这篇文章全面解析了Bootstrap表单的使用方法，本文重点介绍Bootstrap表单控件，感兴趣的小伙伴们可以参考一下2015-11-11
Javascript下的keyCode键码值表...2007-04-04
这篇文章主要为大家详细介绍了js图片查看器的制作方法，可以实现图片的滑动等效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要给大家介绍了关于如何编写一个d.ts文件的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用d.ts具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-04-04
这篇文章主要为大家详细介绍了如何简单实现bootstrap导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
轮询请求就是间隔相同的时间（如5s）后不断地向服务端发起同一个接口的请求，当然不能无限次去请求，所以轮询必须要有个停止轮询的机制，今天通过本文给大家介绍JavaScript实现可终止的轮询请求，感兴趣的朋友一起看看吧2022-06-06
这篇文章主要介绍了删除javascript中注释语句的正则表达式,需要的朋友可以参考下2014-06-06
最新评论