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

来源:互联网 发布:有什么软件推广 编辑:程序博客网 时间:2024/04/29 00:15

 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);



0 0
原创粉丝点击