環境
- 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內容。
總結
這樣就完成了資源引入->資源調用->視圖展示的完整流程