【Yii2】使用AssetBundle中的$sourcePath对资源文件进引入和调用

环境

  • Yii 2.0.15.1
  • PHP 7.2.7

AppAsset

AppAsset在项目根目录下的assets文件夹内,作用是控制项目的资源文件。

资源文件也就是我们的js/css这些文件。

下面是自带的AppAsset类

namespace app\assets;

use yii\web\AssetBundle;

/**
 * Main application asset bundle.
 *
 * @author Qiang Xue <[email protected]>
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';//项目文件夹
    public $baseUrl = '@web';
    public $css = [//单独引入的
        'css/site.css',
    ];
    public $js = [
    ];
    //继承了下面的两个资源类
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
}

自定义资源类

目的

创建一个资源类,作为网页布局中新的layout文件,将项目资源文件放到不可访问的文件夹内,让Yii2自动引入到web文件夹内

$sourcePath

这里配置的重点是$sourcePath,这里定义的是源资源的位置,只定义这个之后,就会自动引入到web下的assets文件夹内。

下面是完整的资源类文件

namespace app\assets;

use yii\web\AssetBundle;

/**
 * 后台管理的基本资源文件
 * @package app\assets
 */
class AdminAsset extends AssetBundle
{
    //资源文件的源文件位置
    public $sourcePath = '@app/res'; 
    //当前事例引入的文件
    public $css = [
        'assets/vendors/custom/fullcalendar/fullcalendar.bundle.css',
        'assets/vendors/base/vendors.bundle.css',
        'assets/demo/default/base/style.bundle.css'
    ];
    public $js = [
        'assets/vendors/base/vendors.bundle.js',
        'assets/demo/default/base/scripts.bundle.js'
    ];
    //没有依赖
    public $depends = [

    ];
}

自动引入资源

在本文的事例中,我创建了一个新的layout文件。

下面的内容放在视图文件的最前面,即可完成对资源文件的复制,Yii2就会自动复制到web下的assets文件夹内。

use yii\helpers\Html;
use app\assets\AdminAsset;

AdminAsset::register($this);

自动引用资源

仅仅写上面的内容,是不能引入css和js文件的,还需要做下面的处理。

<head>
<?php $this->head() ?>
</head>

写在head中,让视图确定网页的head位置。这时会自动引入css文件。

<body>
<?php $this->beginBody() ?>

<?php $this->endBody() ?>
</body>

这对标签写在Body中间,让视图确认网页的Body位置.这时会在body最后自动引入js内容。

总结

这样就完成了资源引入->资源调用->视图展示的完整流程

猜你喜欢

转载自blog.csdn.net/diandianxiyu/article/details/81201194