牛骨文教育服务平台(让学习变的简单)
博文笔记

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

创建时间:2015-08-17 投稿人: 浏览次数:3028

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

  然后在文件中引入js:

<?=Html::jsFile("@web/public/assets/js/hello.js")?>

如此即可


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

下面说下如何引用:

namespace appassets;
use yiiwebAssetBundle;

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" => "appassetsAppAsset"]);
    }

    
    
}
然后在我们的模板开头部分加上:

//自动加载资源
AppAsset::register($this);
然后导入js:

//导入js资源
appassetsAppAsset::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" => "appassetsAppAsset"]);
}


在视图中直接调用addPageScript($this)即可
//导入js资源
appassetsAppAsset::addPageScript($this);



声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。