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内容。

总结

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

相关文章
|
SQL Windows
web未能加载文件或程序集“XXX”或它的某一个依赖项
如果你将应用程序生成x86而不是Any CPU时,在64位操作系统中不会出错错误,而在32位操作系统中可能会出现以下错误 “/xxxxx”应用程序中的服务器错误。 -------------------------------------------------------------------------------- 未能加载文件或程序集“xxx”或它的某一个依赖项。试图加载格式不正确的程序。
318 0
web未能加载文件或程序集“XXX”或它的某一个依赖项
|
存储 缓存 API
5.0版本之后的AssetBundle资源的打包和解析加载(Unity3D)
这几天在研究AssetBundle资源打包盒解析加载,也踩过很多坑,参考过很多人的文章 发现很多人关于AssetBundle的文章不是API过时了不能用,就是有点乱 也不是有点乱,就是摸不着头脑,让人不能快速的get到这个东西如何使用 所以我特意在踩过坑之后把我这个学到的经验分享给大家。
|
JavaScript Java Android开发
dex加载后导入类报错
牙叔教程 简单易懂
380 0
|
监控 安全 Android开发
【Android 逆向】Android 进程代码注入原理 ( 注入本质 | 静态注入和动态注入 | 静态注入两种方式 | 修改动态库重打包 | 修改 /data/app/xx/libs 动态库 )
【Android 逆向】Android 进程代码注入原理 ( 注入本质 | 静态注入和动态注入 | 静态注入两种方式 | 修改动态库重打包 | 修改 /data/app/xx/libs 动态库 )
529 0
|
Android开发
【Android 热修复】热修复原理 ( 合并两个 Element[] dexElements | 自定义 Application 加载 Dex 设置 | 源码资源 )
【Android 热修复】热修复原理 ( 合并两个 Element[] dexElements | 自定义 Application 加载 Dex 设置 | 源码资源 )
222 0
|
安全 Java Android开发
【Android 安全】DEX 加密 ( 代理 Application 开发 | 加载 dex 文件 | 使用反射获取方法创建本应用的 dexElements | 各版本创建 dex 数组源码对比 )(一)
【Android 安全】DEX 加密 ( 代理 Application 开发 | 加载 dex 文件 | 使用反射获取方法创建本应用的 dexElements | 各版本创建 dex 数组源码对比 )(一)
238 0
|
安全 Java API
【Android 安全】DEX 加密 ( 代理 Application 开发 | 加载 dex 文件 | 使用反射获取方法创建本应用的 dexElements | 各版本创建 dex 数组源码对比 )(二)
【Android 安全】DEX 加密 ( 代理 Application 开发 | 加载 dex 文件 | 使用反射获取方法创建本应用的 dexElements | 各版本创建 dex 数组源码对比 )(二)
205 0
|
安全 Java Android开发
【Android 安全】DEX 加密 ( 代理 Application 开发 | 加载 dex 文件 | 将系统的 dexElements 与 应用的 dexElements 合并 | 替换操作 )
【Android 安全】DEX 加密 ( 代理 Application 开发 | 加载 dex 文件 | 将系统的 dexElements 与 应用的 dexElements 合并 | 替换操作 )
189 0
从加载DLL的中获取放置于Resources文件夹中资源字典的几种方法
原文:从加载DLL的中获取放置于Resources文件夹中资源字典的几种方法 主程序 为 Main_Test.exe 被加载的DLL 为 Load_Test.dll  此DLL 中 有一个 文件夹Resources文件夹有一个资源字典Graphics.
1331 0