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 相关文章推荐
PHP脚本数据库功能详解(上)
Oct 09 PHP
PHP IN_ARRAY 函数使用注意事项
Jul 24 PHP
php XMLWriter类的简单示例代码(RSS输出)
Sep 30 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
Nov 09 PHP
php随机显示指定文件夹下图片的方法
Jul 13 PHP
提交表单后 PHP获取提交内容的实现方法
May 25 PHP
PHP操作mysql数据库分表的方法
Jun 09 PHP
PHP的AES加密算法完整实例
Jul 20 PHP
php类的自动加载操作实例详解
Sep 28 PHP
PHP小程序支付功能完整版【基于thinkPHP】
Mar 26 PHP
Laravel框架实现文件上传的方法分析
Sep 29 PHP
layui数据表格自定义每页条数limit设置
Oct 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
php简单的会话类代码
2011/08/08 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
兼容ie6浏览器的php下载文件代码分享
2014/07/14 PHP
php向js函数传参的几种方法
2014/08/10 PHP
微信access_token的获取开发示例
2015/04/16 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
Prototype Function对象 学习
2009/07/12 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
浅析Python中元祖、列表和字典的区别
2016/08/17 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
大学生学习自我评价
2014/01/13 职场文书
初三学习决心书
2014/03/11 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书