摘要：浏览器返回等于重新进入上一个页面，会触发刷新动作，而微信不会。也就是困扰我多时的微信返回不刷新。也就是说当时微信返回还是会触发渲染事件的具体是什么事件也不清楚，因为当时没有深究，但是确实是触发了。
PC浏览器返回等于重新进入上一个页面，会触发刷新动作，而微信不会。也就是困扰我多时的微信返回不刷新。
大概再2017年初和2016末（大概也是从那个时候我开始做微信公众号），还可以通过在sessionStorage中记录刷新标志，让上一个页面根据标识刷新。也就是说当时微信返回还是会触发渲染事件的（具体是什么事件也不清楚，因为当时没有深究，但是确实是触发了componentDidMount）。
但是某个时刻起，这种方法也不再有效了，说明通过storage记录需要刷新标志是完全失效的了。
另外可以发现，上一个页面会保持上一次操作的状态，并且不会再有静态资源的请求，不会触发load事件。那也可以这么理解，在微信中的页面跳转，其实更类似于浏览器中的打开新标签页。所以上一个页面的内容没有被销掉，而是会保持你跳走前的状态。所以我们很多页面会有点击返回但是loading还是在转的现象。
尝试一：visibilitychange由此，我想到了第一个检查他是否返回的方法——监听页面的visibilitychange事件。因为PC浏览器中如果标签切换或者是浏览器缩略，其可见性改变的时候，都会触发该事件。
有兴趣的可以打开控制台输入以下代码，看看有什么不同。
window.addEventListener("visibilitychange", function () {
console.log(document.hidden)
});
总之我先尝试了以下代码：
let isPageBack = false;
window.addEventListener("visibilitychange", function () {
if(document.hiden){
isPageBack = true
} else if ( isPageBack ) {
fetch("/data") //因为visibilitychange事件中alert可以看到被模拟器禁了，所以就改用改了fetch自己的接口，通过查看日志检查是否触发
}
});
尝试之后发现该事件并没有被触发。疑惑之余，我尝试了chrome手机浏览器，发现同样，该事件没有被触发。
另外，因为好奇如果app压后台会不会触发该事件，所以尝试这段代码↓，结果发现即使压后台页面也不会被挂起。
setInterval(function () {
var p = document.createElement("p");
p.appendChild(document.createTextNode(`${Date.now()}`));
document.body.appendChild(p);
}, 1000)
尝试二：pageshow & pagehide
与visibilitychange类似的还有pageshow和pagehide事件。
pageshow事件触发点是 a session history entry is being traversed to. 同时根据MDN的介绍在back/forward时也会被触发
于是我改了改代码
let isPageBack = false;
window.addEventListener("pageshow", function () {
if (isPageBack ) fetch("/data")
})
window.addEventListener("pagehide", function () {
isPageBack = true
})
居然意外的能行，，，
pageshow和pagehide事件可以被监听到。返回页可以通过页面是否隐藏过知道是否是返回回来的。
尝试三：historyhistory可以修改历史记录或url主要是 history.pushState 和 history.replaceState 。
使用pushState 等于多推一条历史记录，replaceState 等于修改了历史记录，另外我们要知道reload是不计入历史记录的。
理论上来说如果使用pushState修改url，那么页面访问就会像这样 A -> A1 -> B
当B返回A1时就会触发 popstate 事件。在popstate事件里面可以做一些自定义的事情。
这里用了代码
var state = {
date: Date.now()
};
window.history.pushState(state, "csb");
window.addEventListener("popstate", function (event) {
if(event.state) location.reload()
})
检查history时，可以看到state里面有一个key是date的时间戳，同时历史记录的长度+1。
但是使用pushState会增加历史记录，会导致同一个页面需要返回好几次才能退出去，不过可以利用他做返回退出公众号
window.history.pushState({}, "csb");
window.addEventListener("popstate", function (event) {
if (event.state) {
wx.ready(function () {
wx.closeWindow();
});
}
});
但是因为replaceState不会增加历史记录，所以利用它这样返回刷新页面
history.replaceState(null, null, "#");
window.addEventListener("popstate", function (event) {
self.location.reload();
})
另外如果要如果A->B->C，而C返回时想要直接返回A可以这样
B页面：
history.replaceState(null, null, "/c"); //将url替换成C，这样跳转到C页面等于被转变成了reload行为，但直观上来说，是我们删除了一条历史记录
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93290.html
摘要：对微信小程序进行全局配置，决定页面文件的路径窗口表现设置网络超时时间设置多等。 微信小程序知识总结及案例集锦 微信小程序的发展会和微信公众号一样，在某个时间点爆发 学习路径 微信小程序最好的教程肯定是官方的文档啦，点击这里直达 微信官方文档 认真跟着文档看一遍，相信有vue前端经验的看下应该就能上手了，然后安装 微信小程序开发者工具 新建一个quick start项目，了解代码结构，...
摘要：引言用过原生开发的小程序也知道除了其他功能性的内容并不多对于需要做大型项目来说是比较难入手的，因此朋友推荐的我就入坑鸟。。。开发还是和部分有出入，因此如下记录，入手的教程就不发了只发踩坑。 引言 用过原生开发的小程序也知道除了api 其他功能性的内容并不多对于需要做大型项目来说是比较难入手的，因此朋友推荐的wepy我就入坑鸟。。。这么一个跟vue的开发方式类似的框架，不过说起来跟vue...
阅读 681·2021-11-18 10:02
阅读 3518·2021-09-02 10:21
阅读 1706·2021-08-27 16:16
阅读 2036·2019-08-30 15:56
阅读 2332·2019-08-29 16:53
阅读 1354·2019-08-29 11:18
阅读 2880·2019-08-26 10:33
阅读 2621·2019-08-23 18:34
