举杯邀月

Yii2 引入JS、Css静态资源的方法,Yii2页面引入JS方法。

摘要:Yii2引入JS、Css静态资源时,会出现各种问题,尤其是JS,常常因为引入的位置顺序而导致脚本报错。

针对平常经常使用引入静态资源出现的各种问题,今天整理了一下Yii2引入静态资源的方法。

资源包定义

位置在应用目录的 assets/AppAsset.php 中

    public $basePath = '@webroot';  //指定资源从哪个可网络访问的目录提供服务。
    public $baseUrl = '@static';   //指定对应你的应用根 URL
    public $css = [                //全局CSS 
        'Css/common.css',  
    ];

    public $js = [                //全局JS
        'Js/jquery-3.2.1.js',   
    ];

   
    public $jsOptions = [         // 这是设置默认js放置的位置
        'position' => View::POS_HEAD,
    ];

    //依赖YiiAsset和BootstrapAsset,这两个资源包是框架定义好的
    public $depends = [
//        'yii\web\JqueryAsset',
    ];

    //定义按需加载JS方法,注意加载顺序在最后 
    public static function addScript($view, $jsfile, $position = \yii\web\View::POS_END) {
        $view->registerJsFile($jsfile, [AppAsset::className(),'position'=>$position]);
    }

    //定义按需加载css方法,注意加载顺序在最后
    public static function addCss($view, $cssfile) {
        $view->registerCssFile($cssfile, [AppAsset::className()]);
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

页面上使用

use assets\AppAsset;
AppAsset::addCss($this,'@static/Css/common.css');
AppAsset::addScript($this,'@static/Js/jquery-3.2.1.js');
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3

addScript 可以设置第三个参数进行位置的控制,具体位置有:

- \yii\web\View::POS_HEAD       头部
- \yii\web\View::POS_BEGIN      身体部分的开始
- \yii\web\View::POS_END        身体部分的末端
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3

页面上写入内敛脚本

上边的方法其实时通过 registerJsFile 方法实现的,在实际过程中,因为有些脚本无法写入到脚本文件需要放到页面上,Yii也提供了 registerJs 方法引用。

 $this->registerJs("
    alert('页面上的脚本');
");?>
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3

作者:举杯邀月

出处: http://www.hug-code.cn/archives/5fca060a9dff3.html

2020-09-14 标签: yii2