yii2以前端資源引入

 PS：因新項目後端使用yii2框架，不在使用純html模板的方式搭建頁面（先後端不分離模式）使用yii2的內置boostart封裝模板，遂研究了一番yii2

　　經過yii2官方下載的基礎文件結構

　　　　

　　　　　　其中frontend 爲放置前端文件的文件夾，

　　　　　　/frontend/views是放置前端頁面（即單頁面模塊的文件夾）

　　　　　　/frontend/web是放置前端資源的文件夾

　　　　　　/frontend/web/assets 是放置前端js資源的文件夾

　　　　　　/frontend/web/css 是放置前端css資源的文件夾

　　　　　　layout爲存放的公共佈局（例如我這文件是/frontend/views/layouts/main.php）基本這塊是放置公共頭尾部分全部頁面都會引入至main.php 再輸出至對應的路由顯示頁面內容

 

　　1.在yii2中如何引入css文件至頭部

　　　　1）.引入全局css：例如base.css

　　　　　　　　首先咱們找到frontend/assets/AppAsset.php  該文件用於配置主前端應用程序資產包

　　　　　　　　在裏面咱們能夠清晰看到以下代碼

　　　　　　　　

　　　　　　　　其中 : 

　　　　　　　　　　　piblic $basePath  指定包含資源包中資源文件並可Web訪問的目錄 例如：@webroot 指向的就是 文件名爲web的根目錄

　　　　　　　　　　　public $baseUrl   指定對應到 basePath 目錄的 URL  @web 文件名爲web的目錄

　　　　　　　　　　　public $css 列出此包中包含的 CSS 文件的數組。 請注意，只應使用正斜槓「/」做爲目錄分隔符。每一個文件均可以單獨指定爲字符串， 也能夠與屬性標記及其值一塊兒指定在數組中  是咱們須要配置的公共css文件 由圖上能夠看出是數組格式  路徑爲css/xxx.css  在執行時文件會自動匹配到frontend/web/css文件下的指定css文件

　　　　　　　　　　　public $depends 一個列出該資源包依賴的 其餘資源包

 

 

　　　　　　2).引入單頁面css

　　　　　　　　1.須要從頁面指定到head標籤呢

　　　　　　　　　　<?php $this->registerCssFile('site2.css');?>    在須要將css指定到head內的頁面寫入還函數  便可將文件引入head中，該文件指向的的文件路徑默認爲

 

 

　　　　　　　　2.按需在頁面指定位置添加css

<?php
      /* @var $this yii\web\View */
    //必須文件
    use yii\helpers\Html; 
    use frontend\assets\AppAsset;
    

?>
 //需放在beginBody以外,將會在body以前出現  test.css文件
 <?= Html::cssFile('@web/css/test.css') ?>
 //能夠指定參數，例如在conditon內指定ie5下才執行
 <?= Html::cssFile('@web/css/test.css', ['condition' => 'IE 5']) ?>
    
<?php $this->beginBody() ?>
     BODY內容
<?php $this->endBody() ?>

 

 

 　　　　　　　　<?= Html::cssFile('@web/css/ie5.css', ['condition' => 'IE 5']) ?>

 

 

　　2.在yii2中如何引入js文件或者插入內聯js

　　　　1).單頁面內引入JS ，該例子不適用在公共佈局有依賴源文件狀況下使用（在那些會在哪生成）

 1 <?php
 2 
 3     /* @var $this yii\web\View */
 4 
 5 
 6     use yii\helpers\Html;
 7     use frontend\assets\AppAsset;
 8     
 9     AppAsset::register($this);
10     $this->context->layout = false;
11 
12 ?>
13 <?php $this->beginBody() ?>
14     
15      BODY內容
16 
17 <?php $this->endBody() ?>

18     必須在endBody以外引入不然將報html  類不存在
19     <?=Html::jsFile('@web/assets/util.lin.js')?>
20     <?=Html::jsFile('@web/assets/core-min.js')?>

 

　　　2).單頁面內引入JS ，該例子不適用在公共佈局有依賴源文件狀況下使用（在beginBody內引入js文件狀況，引入後會加會全局js以後）

　　　　　

<?php
      /* @var $this yii\web\View */
    use yii\helpers\Html;
    use frontend\assets\AppAsset;
    
    AppAsset::register($this);
    $this->context->layout = false;

?>
<?php $this->beginBody() ?>
    <?php
        use yii\helpers\Html;
    ?>
     BODY內容
       如須在endBody以內引入，必須在beginBody以內從新引入 Html類
    <?=Html::jsFile('@web/assets/util.lin.js')?>
    <?=Html::jsFile('@web/assets/core-min.js')?>
<?php $this->endBody() ?>

　　　　 

　　　　3).單頁面內引入JS ，該例子適合有依賴源文件狀況下使用（引入以後會加載在依賴源以後）

<?php
      /* @var $this yii\web\View */
    use yii\helpers\Html;
    use frontend\assets\AppAsset;
    
    AppAsset::register($this);
    $this->context->layout = false;

?>
<?php $this->beginBody() ?>
     BODY內容
<?php $this->endBody() ?>
//該方法是將registerJsFile方法註冊（將文件按需加載到指定的位置去）
<?php
    $this->registerJsFile('/assets/jquery-ui.min.js',['depends'=>['backend\assets\AppAsset']]);
    $this->registerJsFile('/assets/jquery-ui-timepicker-addon.min.js',['depends'=>['backend\assets\AppAsset']]);
    $this->registerJsFile('/assets/jquery-ui-timepicker-zh-CN.js',['depends'=>['backend\assets\AppAsset']]);
    $this->registerJsFile('/assets/admin/good.js',['depends'=>['backend\assets\AppAsset']]);
?>

 

 　　4).單頁內聯JS ，由於在文件中若直接使用有依賴全局的js因此在頁面直接寫入<script></script>將會出現，xx 未定義問題

使用該方法後  將會將定義的js代碼加入到頁面最後面
<?php
    $js = <<<JS
        $(".flow_conter li").hover(function () {
              ......
        });
    JS;
    $this->registerJs($js);
?>

 

  　　5).單頁內聯JS ，該方法可將js插入引入文件以後，可是會在yii2動態生成的內聯代碼以前（例如使用了驗證，就可在源代碼處看着該段代碼插入在表單驗證的源代碼以前了）

<?php $this->beginBlock('alert')?>
       
    $(".btn-getcode").click(function(){
        $.post(
        　　'<?= Url::to(["user/sms_secret"])?>',
            {mob:$('[name="BankAddForm[mob]"]').val()},
            function(data){
            　　alert(data.msg);
        },'json')
     })
 <?php $this->endBlock()?>
 <?php $this->registerJs($this->blocks['alert'],yii\web\View::POS_END)?>