1. 如何使用 Assets 资源组件；
-
相关概念：
-
资源：CSS 文件、JavaScript 文件、图片或者视频文件
-
资源包：管理资源的一个类，当渲染页面时，可以将所需的
资源加入资源包，在页面当中注册该资源包即可渲染对应的资源
-
相关目录解释：
-
如上图，在一开始安装好框架的时候，
basic/web/assets 目录是空的
-
访问框架页面
http://192.168.2.214/yii22/basic/web/ 后，再打开
basic/web/assets 会自动创建三个目录，如下图。
-
再访问
basic/views/layouts/main.php 布局文件里，锁定代码
AppAsset::register($this);，其中
AppAsset 就是它写好的资源包，这个资源包会在布局文件当中注册，然后然后当我们渲染 index.php 的时候，就会将我们资源包里的资源注册到页面当中。
-
再访问资源包
basic/assets/AppAsset.php，继承了 AssetBundle （资源管理组件）
-
AssetBundle 相关属性
-
basePath：资源文件并且可以通过 Web 访问的目录（就是 basic/web 目录，是 Linux 路径）
-
baseUrl：Web 访问资源文件的 URL（通过浏览器访问的路径）
-
css、js：资源包文件数组
-
depends：该资源包依赖的其它资源包
-
jsOption：加载 js 文件式用到的选项（比如浏览器小于 ie9，加一个 js 文件）
-
cssOption：加载 css 文件式用到的选项
<?php
namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.css',
];
public $js = [
'1.js'
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
public $cssOptions = [
'noscript' => true
];
public $jsOptions = [
'condition' => 'lte IE9',
'position' => \yii\web\View::POS_HEAD
];
public $publishOptions = [
'only' => [
'css',
'fonts'
]
];
}
-
按需加载
-
registerJsFile：加载 JS 文件
-
registerCssFile：加载 CSS 文件
-
registerJs：加载 JS 代码
-
registerCss：加载 CSS 代码
<?php
$this->registerJsFile('js/2.js', [
'position' => \yii\web\View::POS_HEAD,
'depends' => 'yii\web\YiiAsset'
]);
$this->registerJsFile('3.css', ['depends' => 'yii\bootstrap\BootstrapAsset']);
$js = <<<JS
console.log('test');
JS;
$this->registerJs($js);
$css = 'body{background-color:red;}';
$this->registerCss($css);
?>
-
使用资源管理组件的优势
-
资源文件按需加载
-
解决资源间的依赖
-
一键安装前端插件（比如 Composer）
2. 使用 Asset 资源包管理页面资源；
- 配置资源包：
basic/assets/AppAsset.php
<?php
namespace app\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/main.css',
'css/red.css',
'css/owl.transitions.css',
'css/animate.min.css',
];
public $js = [
'js/jquery-migrate.js',
'js/gmap3.min.js',
'js/bootstrap-hover-dropdown.min.js',
'js/owl.carousel.min.js',
'js/echo.min.js',
'js/jquery.easing.min.js',
'js/bootstrap.slider.min.js',
'js/jquery.raty.min.js',
'js/jquery.prettyPhoto.min.js',
'js/jquery.customSelect.min.js',
'js/jquery.wow.min.js',
'js/scripts.js',
['js/html5shiv.js', 'condition' => 'lte IE9', 'position' => \yii\web\View::POS_HEAD ],
['js/response.min.js', 'condition' => 'lte IE9', 'position' => \yii\web\View::POS_HEAD ],
];
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
- 引入资源包在
basic/views/layouts.php
<?php
use app\assets\AppAssets;
use yii\helpers\Html;
AppAssets::register($this);
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<?php
$this->registerMetaTag(['http-equiv' => 'X-UA-Compatible', 'content' => 'IE=edge']);
?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= Html::encode($this->title) ?></title>
<?php $this->head() ?>
</head>
<body>
<?php $this->beginBody(); ?>
content
<?php $this->endBody(); ?>
</body>
</html>
<?php $this->endPage(); ?>
3. 前端资源的按需加载；
-
问题：加载了
basic/assets/AppAsset.php 资源包，但是 bootstrap.js 文件没有被加载
-
打开
basic/vendor/yiisoft/yii2-Bootstrap/src/BoosstrapAsset.php，只加载了
css/bootstrap.css
-
因为在 layout.php 中用到了 Nav（导航），在导航中会依赖 bootstrap 的 js 包
-
解决方法：使用
basic/vendor/yiisoft/yii2-Bootstrap/BootstrapPluginAsset.php
<?php
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
'yii\bootstrap\BootstrapPluginAsset',
];
<?php
$url = yii\helpers\Url::to(['cart/mod']);
$js = <<<JS
console.log('这里都是 js 文件');
$.get('$url',{},function(data){
}, 'json');
JS;
$this->registerJs($js);
?>
4. 使用 NavBar 和 Nav 渲染页面导肮；
<?php
use yii\helpers\Html;
use yii\bootstrap\Nav;
use yii\bootstrap\NavBar;
?>
<?php
NavBar::begin([
'options' =>[
'class' => 'top-bar animate-dropdown',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-left'],
'item' => [
['label' => '首页', 'url' => ['/site/index']],
\Yii::$app->Session['isLogin'] == 1 ? (
['label' => '购物车', 'url' => ['/cart/index']]
) : '',
\Yii::$app->Session['isLogin'] == 1 ? (
['label' => '我的订单', 'url' => ['/cart/index']]
) : '',
],
]);
echo Nav::widget([
'options' => ['class' => 'navbar-nav navbar-right'],
'item' => [
\Yii::$app->Session['isLogin'] != 1 ? (
['label' => '注册', 'url' => ['/member/auth']]
) : '',
\Yii::$app->Session['isLogin'] != 1 ? (
['label' => '登录', 'url' => ['/member/login']]
) : '',
\Yii::$app->Session['isLogin'] == 1 ? (
'欢迎您回来，' . \Yii::$app->session['username'] .
Html::a('退出', ['member/logout'])
) : '',
],
]);
NavBar::end();
?>
