Yii2 加载css、js 载静态资源的方法


Posted in PHP onMarch 10, 2017

应用场景

Yii2提供了AppAsset类管理静态资源,在使用Yii2 布局模板时,如果想在某个页面内部写一段js 并且在页面底部,如果直接使用 script 标签是不可以的。

使用AppAsset类管理静态资源

打开assetsAppAsset.php,定义 addJs(),addCss() 分别用于在静态页面引入外部js、css 文件

1、修改AppAsset.php文件代码

namespace backend\assets;
use yii\web\AssetBundle;
/**
 * @author Qiang Xue 
 * @since 2.0
 */
class AppAsset extends AssetBundle
{
  public $basePath = "@webroot";
  public $baseUrl = "@web";
  //默认自动加载样式
  public $css = [
    "css/site.css",
  ];
  //默认自动加载js
  public $js = [
  ];
  //依赖关系管理
  public $depends = [
    "yii\web\YiiAsset",
    "yii\bootstrap\BootstrapAsset",
  ];  
  //定义按需加载JS方法,注意加载顺序在最后 
  public static function addJs($view, $jsfile) { 
    $view->registerJsFile(
      $jsfile, 
      [
        AppAsset::className(), 
        "depends" => "backend\assets\AppAsset"
      ]
    ); 
  } 
  //定义按需加载css方法,注意加载顺序在最后 
  public static function addCss($view, $cssfile) { 
    $view->registerCssFile(
      $cssfile, 
      [
       AppAsset::className(), 
       "depends" => "backend\assets\AppAsset"
      ]
    ); 
  } 
}

2、在静态页面调用AppAsset.php

<?php

use backend\assets\AppAsset;
AppAsset::register($this);
AppAsset::addJs($this,Yii::$app->request->baseUrl."/js/a.js");
AppAsset::addCss($this,Yii::$app->request->baseUrl."/css/b.css");
?>

在网站页面底部加载javascript代码

网页内部的js文件或代码,根据页面加载顺序,避免执行js时间过程导致页面空白,导致用户体验不好问题。一般放置在网页底部</body>的后面。

方案一

<?php
$this->registerJs("
  $(function () {
  //为所欲为的写你想要写的js代码吧
  
  });
", \yii\web\View::POS_END);

方案二

<?php $this->beginBlock('js') ?> 

  //js代码
  
<?php $this->endBlock() ?> 
<?php $this->registerJs($this->blocks['js'], \yii\web\View::POS_END); ?>

解决Yii2在页面底部加载JS,语法提示失效

加入script 标签即可,注意只有 方案二有效,知道有其他方法的 ,望告知,谢谢!

<script type="text/javascript">
<?php $this->beginBlock('js') ?> 

  //js代码
  
<?php $this->endBlock() ?> 
<?php $this->registerJs($this->blocks['js'], \yii\web\View::POS_END); ?> 
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
?生?D片??C字串
Dec 06 PHP
PHP curl 获取响应的状态码的方法
Jan 13 PHP
PHP实现的英文名字全拼随机排号脚本
Jul 04 PHP
php实现与erlang的二进制通讯实例解析
Jul 23 PHP
PHP文件锁函数flock()详细介绍
Nov 18 PHP
php根据某字段对多维数组进行排序的方法
Mar 07 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
May 12 PHP
WordPress过滤垃圾评论的几种主要方法小结
Jul 11 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
Aug 04 PHP
PHP crypt()函数的用法讲解
Feb 15 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
Nov 13 PHP
PHP开发api接口安全验证操作实例详解
Mar 26 PHP
php pdo操作数据库示例
Mar 10 #PHP
yii2简单使用less代替css示例
Mar 10 #PHP
在Mac OS下搭建LNMP开发环境的步骤详解
Mar 10 #PHP
Yii2.0中使用js异步删除示例
Mar 10 #PHP
php实现购物车功能(以大苹果购物网为例)
Mar 09 #PHP
PHP用户管理中常用接口调用实例及解析(含源码)
Mar 09 #PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
Mar 08 #PHP
You might like
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
PHP输出时间差函数代码
2013/01/28 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
js导出txt示例代码
2014/01/14 Javascript
Jquery对数组的操作技巧整理
2014/03/25 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
js实现导航跟随效果
2018/11/17 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
详解Django框架中的视图级缓存
2015/07/23 Python
python文件名和文件路径操作实例
2017/09/29 Python
python aiohttp的使用详解
2019/06/20 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
应届毕业生求职信范文
2013/12/18 职场文书
商场总经理岗位职责
2014/02/03 职场文书
网络技术专业求职信
2014/05/02 职场文书
三八节标语
2014/06/27 职场文书
典型事迹材料范文
2014/12/29 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android