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 相关文章推荐
BBS(php &amp; mysql)完整版(三)
Oct 09 PHP
PHP校验ISBN码的函数代码
Jan 17 PHP
php数组函数序列之array_key_exists() - 查找数组键名是否存在
Oct 29 PHP
PHP中cookie和session的区别实例分析
Aug 28 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
Jan 08 PHP
yii的入口文件index.php中为什么会有这两句
Aug 04 PHP
php中static 静态变量和普通变量的区别
Dec 01 PHP
PHP CURL与java http使用方法详解
Jan 26 PHP
PHP实现的服务器一致性hash分布算法示例
Aug 09 PHP
Laravel手动返回错误码示例
Oct 22 PHP
laravel接管Dingo-api和默认的错误处理方式
Oct 25 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
Feb 18 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
WebQQ最新登陆协议的用法
2014/12/22 PHP
Yii中表单用法实例详解
2016/01/05 PHP
各种快递查询--Api接口
2016/04/26 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
基于jquery的表头固定的若干方法
2011/01/27 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
js使用数组判断提交数据是否存在相同数据
2013/11/27 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
Python requests模块session代码实例
2020/04/14 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
python matlab库简单用法讲解
2020/12/31 Python
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
什么是接口(Interface)?
2013/02/01 面试题
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
商务邀请函范文
2014/01/14 职场文书
手术室护士个人总结
2015/02/13 职场文书
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers