微信服务号H5开发去除缓存方案 Wechat WebCache Killer-烟雨网

Wechat WebCache Killer

背景

服务号网页开发的缓存弊病多年，之前X5内核的自带方案（https://debugx5.qq.com）已经打不开了（据说是微信内置网页换了内核），微信官方也一直未给出更好的方案,经过多个项目的折磨，我封装了这套方案，兼容性、适应性还未进行研究，至少不用再手动的清除微信数据，重新登录微信了。

说明：

1、开发期间后端程序debug 为true ，前台资源用时间戳 ; 生产环境后端debug为false 用fastadmin的版本号，这样能避免每个页面加载时出现的 vue标签未渲染的样子 ,即便是用版本号控制，也会偶尔的出现如下的情况，没办法。

2、debug标记通过后端接口（可放置首页或接口公共返回参数）获得；
3、版本号想如何维护，可自行决定，fastadmin是直接可以在后台维护的；
4、并非一定要用公共js，用公共的html最方便，只是我测试的工程不是我搭建的，试验了数小时也没做到最好的的兼容；
5、本方案中关键细节是早就有的方案，并非我原创（document.write()动态写入资源）；

开搞

PHP-fastadmin
env 配置

 [app]
debug = true

    function index()
    {
        
        $other["version"] = $this->getVersion();

        $new = array_merge($d, $other);
      
        $this->success("", $new);

    }
 private function getVersion()
    {
        $debug = Env::get("app.debug", false);
        if ($debug) {
            $v = time();
        } else {
            $v = Config::get('site')["version"];
        }

        return $v;
    }

html

var resp = response.data ; // response 是后端的 $new
window.localStorage.setItem("version",data.version);

搞一个所有html都引入的 JS ： common.js ，所有使用频率高的js、css均可放置于此文件，并按照适当顺序进行摆放 :

var v = window.localStorage.getItem("version", '0'); // 获取请求接口时缓存的版本号，无需关心是否工程处于debug模式
document.write('<script type="text/javascript" src="../js/xxx.js?v=' + v + '"><\/script>');
document.write('<link rel="stylesheet" type="text/css" href="../css/xxxx.css?v=' + v + '"/>');

引入到你的页面中

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover">
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <title>page</title>
</head>

<body>
 <script src="../js/common.js"></script>
</body>
</html>

效果：
debug为true ：

debug为false ：

以下不用看哈哈，方便抓取的
微信公众号页面缓存问题
如何清除微信网页缓存
微信网页去除缓存

文章版权归作者所有，未经允许请勿转载。

THE END