当前位置: 首页 > 编程笔记 >

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

慕容念
2023-03-14
本文向大家介绍详解解决小程序中webview页面多层history返回问题,包括了详解解决小程序中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会存值,如果直接关闭页面,不会被清除,那么在小程序中访问时就直接回退了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍微信小程序 详解页面跳转与返回并回传数据,包括了微信小程序 详解页面跳转与返回并回传数据的使用技巧和注意事项,需要的朋友参考一下 微信小程序 详解页面跳转与返回并回传数据 A页面: .wxml文件 .js文件 A页面跳转B页面之后返回: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 本文向大家介绍微信小程序 页面传值详解,包括了微信小程序 页面传值详解的使用技巧和注意事项,需要的朋友参考一下 微信小程序 页面传值详解 一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如 这里将good_id=16 参数传入detail页面, 然后detail页面的 onload方法内接受. 如果需要传多个参数, 用 & 链接即可 如果要传 数组, 字

  • 本文向大家介绍微信小程序中子页面向父页面传值实例详解,包括了微信小程序中子页面向父页面传值实例详解的使用技巧和注意事项,需要的朋友参考一下 微信小程序中子页面向父页面传值实例详解 上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面。这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面。 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,

  • 本文向大家介绍详解nodejs爬虫程序解决gbk等中文编码问题,包括了详解nodejs爬虫程序解决gbk等中文编码问题的使用技巧和注意事项,需要的朋友参考一下 使用nodejs写了一个爬虫的demo,目的是提取网页的title部分。 遇到最大的问题就是网页的编码与nodejs默认编码不一致造成的乱码问题。nodejs支持utf8, ucs2, ascii, binary, base64, hex等

  • 本文向大家介绍微信小程序出现wx.navigateTo页面不跳转问题的解决方法,包括了微信小程序出现wx.navigateTo页面不跳转问题的解决方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了微信小程序出现wx.navigateTo页面不跳转问题的解决方法。分享给大家供大家参考,具体如下: 今天在做微信小程序的时候,做的商品购买流程。流程是这样的: 商品展示-->商品详情-->下单页

  • 本文向大家介绍vue中SPA单页面应用程序详解,包括了vue中SPA单页面应用程序详解的使用技巧和注意事项,需要的朋友参考一下 一、SPA的概述 SPA(single page application)单页面应用程序,在一个完成的应用或者站点中,只有一个完整的html页面,这个页面有一个容器,可以把需要加载的代码片段插入到该容器中。 SPA的工作原理:   eg:  http://127.0.0.