Yii2.0里面如何引入JS包文件

Yii2.0里面如何引入JS包文件,第1张

yii\web\View 对象可以注册脚本。专门有两种方法:为内联脚本registerJs()  和 外部脚本registerJsFile()。内联脚本可用于配置和动态生成的代码

一、内联脚本registerJs()

使用如下:

//内部注册js代码$jsString = "$(function(){                alert(123)            })"$this->registerjs($jsString, View::POS_END)或则$this->registerJs("var options = ".json_encode($options)."", View::POS_END, 'my-options')

说明:

第一个元素是我们在视图文件中要写入的 js 代码

第二个元素是我们决定这段代码插入在视图文件中具体那一个位置,具体参数如下: 

View::POS_HEAD for head section.

View::POS_BEGIN for right after opening <body>.

View::POS_END for right before closing </body>.

View::POS_READY for executing code on document ready event. This will register jQuery automatically.

View::POS_LOAD for executing code on document load event. This will register jQuery automatically.

第三个元素是表示这段代码的ID,它具有唯一性,如果曾经有过某个ID,则它会替代或取代之前跟它同名的哪一个,如果不写最后一个元素,则js代码本身就是Id,可忽略最后一个元素

$this 指 yii\web\View对象,用于管理和渲染视图

还有这样的一种写法

<?php $this->beginBlock("aaa") ?>

   $(function () {      //这里写你的js代码    })<?php $this->endBlock() ?>

<?php $this->registerJs($this->blocks["aaa"], \yii\web\View::POS_END)?>

数据块block可以在一个地方指定视图内容在另一个地方显示,通常和布局一起使用

例如:可在内容视图中定义数据块在布局中显示它

调用 yii\base\View::beginBlock() 和 yii\base\View::endBlock() 来定义数据块

使用 $view->blocks[$blockID] 访问该数据块

其中 $blockID 为定义数据块时指定的唯一标识ID。

可见内部写法还是蛮灵活滴~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

二、外部脚本registerJsFile() 

使用如下:

<?php

use backend\assets\AppAsset

use yii\web\View

AppAsset::register($this)//外部引入js文件$this->registerJsFile(Yii::$app->request->baseUrl . 'js/mytest_js.js', ['depends' =>backend\assets\AppAsset::className(), "position"=>$this::POS_END])

说明:引入外部 js文件

第一个参数是文件的绝对路径 Yii::$app->request->baseUrl 加js文件

第二个元素是织带它是依赖于谁的,这里它是依赖 backend\assets\AppAsset::className() 对象的

第三个元素是引入文件的位置,POS_END 说明是在</body>之前引入

但是:通常不使用这个引入的方式引入外部文件,因为每次引入一个文件都需要指定它是依赖于谁的,相对复杂,通常情况下我们使用包管理asset bundles进行注册;

首先: 在这个文件中 backend\assets\AppAsset.php 可见,我们引入了两个静态方法,完整版的AppAsset类如下:

namespace backend\assets 

 

use yii\web\AssetBundle 

 

class AppAsset extends AssetBundle  {  

   public $basePath = '@webroot' 

   public $baseUrl = '@web'     

   //全局CSS  

   public $css = [  

       'css/animate.css',  

       'css/style.min.css',  

   ]

   

   //全局JS  

   public $js = [  

       'js/jquery-2.1.1.js'  

   ]

   

   //依赖关系  

   public $depends = [  

       'yii\web\YiiAsset',  

       'yii\bootstrap\BootstrapAsset',  

   ] 

 

    //定义按需加载JS方法,注意加载顺序在最后  

   public static function addScript($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']) 

   }  

}

addScript()  和 addCss() 方法则是我们在视图文件中进行注册的钥匙,通过如下使用方式,我们就不需要使用 $this->registerJsFile 进行注册了

<?phpuse backend\assets\AppAssetuse yii\web\View

AppAsset::register($this)

//外部引入css文件AppAsset::addCss($this,Yii::$app->request->baseUrl."/css/blog.css")

AppAsset::addScript($this, Yii::$app->request->baseUrl . '/js/waibu_js.js')

在页面里引入bootstrap的css和js文件的方法是通过modules的loader加载的。1、加载js文件:varpath=require('path')module.exports={context:path.resolve('js'),entry:"./index",output:{path:path.resolve('build/js/'),publicPath:'/public/assets/js/',filename:"bundle.js"}2、加载css文件:{test:/\.css$/,loaders:'style-loader!css-loader',exclude:/node_modules/}3、完整的写法如图:

在yii2中,由于yii2版本升级导致了,很多yii2的用法跟yii1有着很大的区别,这几天一直在view层的视图界面徘徊着,遇到什么问题呢? 问题就是搞不清我该如何去引入CSS,JS文件了!也看了社区中其它有经验的大神的教程,也按着做了,但是还是有一些问题存在着,比如说yii2的项目打开后,头部和尾部是公共的,该如何去掉?以及如何才能不改动原main.php文件的情况下,去引入JS,CSS文件,也许有一种办法就是写一个xxxAsset.php的配置文件,然后通过xxx Asset::register($this)可以引入文件,但是这下我又遇到问题了,碰到了这句代码无效,不起作用,在firebug打开后,head里没有引入任何的CSS,JS文件,样式也变得乱七八糟,后来我又查了下相关资料,恰巧,下了一个其他人发的yii2后台模版,于是,今天早上我大概了看了下后台的样式是怎么布局的,总结了下:

1、在前台view中最简单不过的就是像之前那样一个文件一个文件的引入,于是在顶部使用use调用代码段

use yii\helpers\Html

然后在下面的Html中可以这样调用

<?=Html::jsFile('@web/***/js/***.js')?>//这里***代表你的目录名或者文件名

<?=Html::cssFile('@web/***/css/***.css')?>//***同上

这样的话就不需要动其他文件,直接引入文件就好了,需要哪个引入哪个,当然这样写的话就是每次得写很多行代码去加载,最好还是写到配置文件中,但是用配置文件来引入这个问题我暂时还没弄通,后面如果找到原因我会分享给大家

2、前台这样引入,那么在controller中怎么自定义样式文件呢

在控制器中加上以下代码

public $layout = 'layout'//在类中定义一个变量,名为$layout

注意的是这个layout在你的view中有个目录叫layouts,在这个目录下,我新建了一个文件名为layout.php,在其中我加上一句代码

<?php echo $content?>

这样控制器就会自动去找当前视图目录下的layouts目录下的加载视图文件的php文件

以上的几行简短的代码就解决了新手不知道该如何去加载CSS,JS文件的问题,大家如果觉得写***Asset.php文件会有问题,就用我这种办法,后期等熟悉了yii2之后在改用其他的办法去加载

另外,我再补充下,在view中怎么去跳转链接到其他的视图文件

同样在顶部先引入类库

use yii\helpers\Url

然后再需要链接跳转的地方这样写:

<?phpecho Url::toRoute('post/index')?>//post为你的当前控制器名,index为view模版


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11948597.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存