详解解决小程序中webview页面多层history返回问题


Posted in Javascript onAugust 20, 2019

小程序开发中遇到的问题:小程序中嵌套了一个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会存值,如果直接关闭页面,不会被清除,那么在小程序中访问时就直接回退了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
JS canvas实现画板和签字板功能
Feb 23 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 #Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 #Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 #Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 #Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 #Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 #Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 #Javascript
You might like
php&java(二)
2006/10/09 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
PHP递归算法的简单实例
2019/02/28 PHP
浅谈php调用python文件
2019/03/29 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
JS location几个方法小姐
2008/07/09 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
JavaScript易错知识点整理
2016/12/05 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
node.js获取参数的常用方法(总结)
2017/05/29 Python
python去除字符串中的换行符
2017/10/11 Python
Python2.7版os.path.isdir中文路径返回false的解决方法
2019/06/21 Python
python新手学习可变和不可变对象
2020/06/11 Python
Pytorch生成随机数Tensor的方法汇总
2020/09/09 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
信息专业本科生个人的自我评价
2013/10/28 职场文书
节约用电标语
2014/06/17 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
食品质检员岗位职责
2015/04/08 职场文书
离婚代理词范文
2015/05/23 职场文书
运动会100米加油稿
2015/07/21 职场文书
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android