Lei Zhang

时光已逝永不回,
往事只能回味。
... ...
春风又吹红了花蕊,
你已经也添了新岁。

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 96%



微信(IOS)中点后退不会重新发请求,页面也不刷新的问题

2017-12-21 » 疑难杂症 / 微信开发

由于微信有着诸多“潜规则”限制,在微信里面做“文件下载”功能,通常的做法我们会给出一个模态框或遮罩层,引导用户用浏览器打开当前页面。

但是我司业务组发现部分文件类型可以直接在 IOS微信 内置浏览器中预览,经过测试组的各种千奇百怪的测试结果,总结出了可以“预览”的文件类型。

在实际开发中,可以将这类常用的变量放在项目的“constants.js”中,当做一个全局的常量来处理。

/**
* 消息提示
* @type {string}
*/
export const SUCCESS_ALERT_MSG = '操作成功';
export const FAILED_ALERT_MSG = '操作失败';
export const DEF_HR_TAG = '<div style="background:#e0e0e0;border:0;height:2px;width:193px;margin-bottom:5px;"></div>'

/**
* 支持预览图片文件的后缀
* @type {string}
*/
export const PREVIEW_IMAGE_SUFFIX = 'jpeg|jpg|png|gif|JPEG|JPG|PNG|GIF';

/**
* 支持微信中直接预览或下载的文件后缀
*/
export const DIRECT_PREVIEW_FILE_SUFFIX = 'docx|DOCX|doc|DOC|xlsx|XLSX|xls|XLS|pptx|PPTX|ppt|PPT|txt|TXT|pdf|PDF|html|HTML';

遍历附件数组对象,渲染视图,绑定点击事件。

图片预览,直接调用微信给的JSSDK中的 previewImage 接口即可预览图片。

但是其他类型的附件,都会产生“跳转”操作,此处的“跳转”指的是跳出这个 SPA 页面,例如你的 SPA 访问 URL 为:a.com/index.html,跳转至了 b.com/index.html a.com/other.html,在IOS微信中从跳出的页面返回至上一个页面时,上图中附件列表的 item 所绑定的事件都不再生效。


Back-Forward Cache

Safari 会对 web pages 做一次缓存处理(包括 Javascript 状态),在当前浏览的页面之间前后移动便不需要再重新加载一遍网页,这样做可以提高页面导航速度,这个缓存状态在关闭浏览器之前会一直存在。

做个试验,写一个 HTML 页面,里面包含一个超链接,并在 <body> 上注册一个 onload 事件,如下:

<!DOCTYPE>
<html>
<head>
    <title>Safari Back Button Test</title>
</head>
<body onload="alert('page is loaded');">
    <a href="https://www.lovchun.com">Mysite</a>
</body>
</html>

在浏览器中打开这个 HTML 页面,你会看到“page is loaded”,关掉这个弹窗,点击页面中的超链接,然后再点浏览器的返回按钮,你会发现这次 onload 事件不再执行了,也不会再出现 “page is loaded”。


我们可以通过监听 onpageshow 事件,就能获取到当前的页面的渲染是来自 cache 还是 render 。

window.onpageshow = function(event) {
    if (event.persisted) {
        // from cache
    }else{
        // from render
   }
};

最直接的解决方式,在 man.js 中,我们只需要再次刷新一下当前的路由,就可以解决这个问题了。

window.onpageshow = function(event) {
    if (event.persisted) {
        window.location.reload()
    }
};
展开选填信息