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

xorpay 发布于2019-08-26 14:04 / 2200人阅读

摘要：听起来似乎也可行，但小程序的缓存和微信的缓存是同步的，如果在微信环境中直接访问页面，重定向到会存值，如果直接关闭页面，不会被清除，那么在小程序中访问时就直接回退了。

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

混合云私有云 webrtc在webview中使用问题小程序解决方法小程序解决方案电商小程序解决方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109989.html

【小程序】小程序刷新webview小结

摘要：场景在小程序其它页面做了操作，数据发生改变，回到页面时需要更新里面的数据。由于小程序没有提供与的实时通信能力，因此刷新页面是个可考虑的做法。小结目前我了解到的情况来看，确实没有一个简单的可以直接无副作用地刷新小程序。场景在小程序其它页面做了操作，数据发生改变，回到webview页面时需要更新webview里面的数据。由于小程序没有提供与webview的实时通信能力，因此刷新页面是个...

娣辩孩 2019-08-23 10:44 评论0 收藏0
理解小程序

摘要：小程序的布局信息微信小程序中使用作为长度单位，可以根据屏幕宽度进行自适应。运行环境普通都是执行在浏览器的宿主环境，浏览器提供等对象但是小程序是运行在微信上下文中的，没有和。小程序坚持着无需下载、触手可及、用完即走的设计理念和价值观，帮助用户缩短完成任务的时间。下面从以下几点进行总结。总结是参考三清水老师的小册子，推荐大家去购买。写的很棒。 1. 小程序能做什么，不能做什么? sho...

dmlllll 2019-08-23 12:11 评论0 收藏0
JS中最容易被轻视的对象----location和history

摘要：最近开始移动端页面的时候，被和坑了一把，于是决定对这两个对象进行一个全面的剖析。但出于隐私方面的原因，对象不再允许脚本访问已经访问过的实际。唯一保持使用的功能只有和方法。华为执行完之后，我们发现不能回退了，是不是就跟实现同样的效果了。最近开始移动端页面的时候，被window.location和window.history坑了一把，于是决定对这两个对象进行一个全面的剖析。下面进行我们的...

xumenger 2019-08-20 16:29 评论0 收藏0
跨平台技术演进

摘要：接下来，我将从原理优缺点等方面为大家分享跨平台技术演进。小程序年是微信小程序飞速发展的一年，年，各大厂商快速跟进，已经有了很大的影响力。下面，我们以微信小程序为例，分析小程序的技术架构。前言大家好，我是simbawu ，@BooheeFE Team Leader，关于这篇文章，有问题欢迎来这里讨论。随着移动互联网的普及和快速发展，手机成了互联网行业最大的流量分发入口。以及随着5G...

魏宪会 2019-08-30 15:43 评论0 收藏0