开发过程中经常会遇到最新的静态资源已经上传到服务器,用户看到仍然是旧的缓存内容,尤其是在微信站中最常见,缓存没有更新,用户就无法看到最新的内容,PC上浏览器可以强制刷新内容,但在微信中就无法手动刷新了。

    这种情况可以给css和js路径后带上版本号,客户端浏览器就会重新下载新的js或css文件 ,从而起来刷新缓存的作用

正常加载css和js的方式如下

<link href="base.css" rel="stylesheet">
<script src="global.js"></script>

带上版本号后加载css和js的方式如下:

<link href="base.css?v=20161112001" rel="stylesheet">
<script src="global.js?v=20161112001"></script>

上传新的静态资源后,只需要改变v=20161112001 的值为其它字符就可以了,当然v的值可以做成变量或常量,视图中再去调用这个值。

yii2使用前端资源管理器注册css,js,完整的代码如下:

<?php
/**
 *  微信前端资源包
 *
 * @author        shuguang <5565907@qq.com>
 * @package       wechat.Controllers
 */
namespace bagesoft\assets;
use Yii;
use yii\web\AssetBundle;
class Wechat extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    /**
     * 全局CSS
     * @var [type]
     */
    public $css = [
        "static/wechat/css/base.css",
        "static/wechat/css/layout.css",
    ];
    /**
     * 全局JS
     * @var [type]
     */
    public $js = [
        'static/wechat/js/zepto.min.js',
        'static/wechat/js/plugins.js',
        'static/wechat/js/controller/init.js',
    ];
    /**
     * js定位
     * @var [type]
     */
    public $jsOptions = [
        'position' => \yii\web\View::POS_HEAD
    ];
    /**
     * 依赖
     * @var [type]
     */
    public $depends = [
    ];
    /**
     * 初始化
     * @return [type] [description]
     */
    public function init()
    {
        parent::init();
        if (is_array($this->css)) {
            $cssArr = $this->css;
            $this->css = '';
            foreach ($cssArr as $css) {
                $this->css[] = $css . '?ver=' . Yii::$app->params['view']['assetsVer'];
            }
        }
        if (is_array($this->js)) {
            $jsArr = $this->js;
            $this->js = '';
            foreach ($jsArr as $js) {
                $this->js[] = $js . '?ver=' . Yii::$app->params['view']['assetsVer'];
            }
        }
    }
    /**
     * 自定义script
     * @param [type] $view   [description]
     * @param [type] $jsfile [description]
     */
    public static function addScript($view, $jsfile)
    {
        $view->registerJsFile($jsfile, [Wechat::className(), 'depends' => 'bagesoft\assets\Wechat']);
    }
    /**
     * 自定义css
     * @param [type] $view    [description]
     * @param [type] $cssfile [description]
     */
    public static function addCss($view, $cssfile)
    {
        $view->registerCssFile($cssfile, [Wechat::className(), 'depends' => 'bagesoft\assets\Wechat']);
    }
}

追加版本号的处理部分在init() 方法中,遍历css,js过程中追加版本号。 

在params.php中增加字段:Yii::$app->params['view']['assetsVer'] 保存着版本号,更新静态资源css,js后更改下这个值,所有加载资源管理器中的css,js地方全部更新了

Image 3(1).png

在视图中注册一个资源包, 在渲染Web页面时会包含包中的CSS和JavaScript文件

 \bagesoft\assets\Wechat::register($this);

实现结果如下图:

Image 2(1).png