环境
- 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 <qiang.xue@gmail.com> * @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内容。
总结
这样就完成了资源引入->资源调用->视图展示的完整流程