yii2如何引入自定义css或js文件

最新推荐文章于 2022-12-08 11:00:48 发布

原创最新推荐文章于 2022-12-08 11:00:48 发布 · 5.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#Yii #php #appset

Yii 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了Yii2框架中资源管理的概念，着重介绍了AssetBundle类的使用方法，包括两种引入方式和AppAsset类的特性，强调了其在规范依赖关系和避免加载顺序错误方面的优势。

 Yii2 在管理css和js脚本方面，引入了一个资源管理包的概念AssetBundle。      先直接写出我所知道的两种引入方式：现假如我要引入我根目录下的 public/assets/js/hello.js  文件   1）第一种是在视图文件中直接引入：       在视图文件开头先引入HTML帮助类<?php
 use yii\helpers\Html;
?>

然后在文件中引入js：
<?=Html::jsFile('@web/public/assets/js/hello.js')?>
如此即可

最后再说下yii2的资源管理类 AppAsset 类。使用它有什么好处呢？首先一个是它可以规范依赖关系，不会因为js先后的加载顺序不同而导致代码的不可用。比如说引入jquery，我们自定义的代码若是在jquery文件之前先引入了，就有可能出现错误。而使用AppAsset 可以让在视图里加载的文件肯定会排在你的基础样式或脚本的后面，不会出错。

下面说下如何引用：
namespace app\assets;
use yii\web\AssetBundle;

class AppAsset extends AssetBundle {
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'public/skin/default_skin/css/theme.css',
    ];
    public $js = [
        'public/vendor/jquery/jquery-1.11.1.min.js',
        'public/vendor/jquery/jquery_ui/jquery-ui.min.js',
        'public/js/bootstrap/bootstrap.min.js',
    ];

    //依赖包
    public $depends = [
        //这里写你的依赖包即可，没有就别写
    ];

    //导入当前页的功能js文件，注意加载顺序，这个应该最后调用
    public static function addPageScript($view, $jsfile) {
        $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'app\assets\AppAsset']);
    }

    
    
}
然后在我们的模板开头部分加上：
//自动加载资源
AppAsset::register($this);
然后导入js：
//导入js资源
\app\assets\AppAsset::addPageScript($this,'js文件相对路径或url');  //@web/public/assets/js/hello.js
如此即可。再延伸一下，假如几个页面都共同引入了相同的几个js或css文件安，那么可以在AppAsset里导入当前js文件函数里，一次性加载多几个js文件：
//导入当前页的功能js文件，注意加载顺序，这个应该最后调用
    public static function addPageScript($view) {
        $view->registerJsFile('@web/public/assets/js/hello.js', [AppAsset::className(), 'depends' => 'app\assets\AppAsset']);
}
在视图中直接调用addPageScript($this)即可
//导入js资源
\app\assets\AppAsset::addPageScript($this);