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

简介: 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 <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内容。

总结

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

相关文章
|
Java 应用服务中间件 容器
javaweb项目中引用带有dll文件处理方式
javaweb项目中引用带有dll文件处理方式
|
缓存 JavaScript 开发者
require 函数加载模块原理(被加载的模块会先执行一次)|学习笔记
快速学习 require 函数加载模块原理(被加载的模块会先执行一次)
458 0
require 函数加载模块原理(被加载的模块会先执行一次)|学习笔记
|
存储 缓存 API
5.0版本之后的AssetBundle资源的打包和解析加载(Unity3D)
这几天在研究AssetBundle资源打包盒解析加载,也踩过很多坑,参考过很多人的文章 发现很多人关于AssetBundle的文章不是API过时了不能用,就是有点乱 也不是有点乱,就是摸不着头脑,让人不能快速的get到这个东西如何使用 所以我特意在踩过坑之后把我这个学到的经验分享给大家。
|
JavaScript Java Android开发
dex加载后导入类报错
牙叔教程 简单易懂
376 0
|
存储 Android开发
【Android 逆向】启动 DEX 字节码中的 Activity 组件 ( DEX 文件准备 | 拷贝资源目录下的文件到内置存储区 | 配置清单文件 | 启动 DEX 文件中的组件 | 执行结果 )(一)
【Android 逆向】启动 DEX 字节码中的 Activity 组件 ( DEX 文件准备 | 拷贝资源目录下的文件到内置存储区 | 配置清单文件 | 启动 DEX 文件中的组件 | 执行结果 )(一)
237 0
【Android 逆向】启动 DEX 字节码中的 Activity 组件 ( DEX 文件准备 | 拷贝资源目录下的文件到内置存储区 | 配置清单文件 | 启动 DEX 文件中的组件 | 执行结果 )(一)
|
存储 Android开发
【Android 逆向】启动 DEX 字节码中的 Activity 组件 ( DEX 文件准备 | 拷贝资源目录下的文件到内置存储区 | 配置清单文件 | 启动 DEX 文件中的组件 | 执行结果 )(二)
【Android 逆向】启动 DEX 字节码中的 Activity 组件 ( DEX 文件准备 | 拷贝资源目录下的文件到内置存储区 | 配置清单文件 | 启动 DEX 文件中的组件 | 执行结果 )(二)
147 0
【Android 逆向】启动 DEX 字节码中的 Activity 组件 ( DEX 文件准备 | 拷贝资源目录下的文件到内置存储区 | 配置清单文件 | 启动 DEX 文件中的组件 | 执行结果 )(二)
|
监控 安全 Android开发
【Android 逆向】Android 进程代码注入原理 ( 注入本质 | 静态注入和动态注入 | 静态注入两种方式 | 修改动态库重打包 | 修改 /data/app/xx/libs 动态库 )
【Android 逆向】Android 进程代码注入原理 ( 注入本质 | 静态注入和动态注入 | 静态注入两种方式 | 修改动态库重打包 | 修改 /data/app/xx/libs 动态库 )
517 0
|
Android开发
【Android 热修复】热修复原理 ( 合并两个 Element[] dexElements | 自定义 Application 加载 Dex 设置 | 源码资源 )
【Android 热修复】热修复原理 ( 合并两个 Element[] dexElements | 自定义 Application 加载 Dex 设置 | 源码资源 )
219 0
|
安全 Java Android开发
【Android 安全】DEX 加密 ( 代理 Application 开发 | 加载 dex 文件 | 将系统的 dexElements 与 应用的 dexElements 合并 | 替换操作 )
【Android 安全】DEX 加密 ( 代理 Application 开发 | 加载 dex 文件 | 将系统的 dexElements 与 应用的 dexElements 合并 | 替换操作 )
182 0