详解解决小程序中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 相关文章推荐
jquery 防止表单重复提交代码
Jan 21 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
详解vue-cli3使用
Aug 14 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
JS实现公告上线滚动效果
Jan 10 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 中 config.m4 的探索
2020/08/26 PHP
List Installed Software Features
2007/06/11 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
pygame学习笔记(5):游戏精灵
2015/04/15 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
如何用python整理附件
2018/05/13 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Django 自定义分页器的实现代码
2019/11/24 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
十八大标语口号
2014/10/09 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
Python使用MapReduce进行简单的销售统计
2022/04/22 Python
MySQL中order by的执行过程
2022/06/05 MySQL