Detaillierte Einführung in die Methode zum Laden von CSS, JS und statischen Ressourcen in Yii2

In diesem Artikel wird hauptsächlich die Methode zum Laden statischer Ressourcen in Yii2 vorgestellt. Interessierte Freunde können sich darauf beziehen.

Anwendungsszenarien

Yii2 stellt die AppAsset-Klasse zum Verwalten statischer Ressourcen bereit. Wenn Sie die Yii2-Layoutvorlage verwenden, möchten Sie einen Teil von js darin schreiben Eine Seite und am Ende der Seite ist es nicht möglich, Skript-Tags direkt zu verwenden.

Verwenden Sie die AppAsset-Klasse, um statische Ressourcen zu verwalten

Öffnen Sie assetAppAsset.php und definieren Sie addJs() und addCss() für die Einführung in statischen Seiten bzw. Externe JS- und CSS-Dateien

1. AppAsset.php-Dateicode ändern

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 eine statische Seite .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");
?>

Laden Sie den Javascript-Code unten auf der Website-Seite

js-Datei innerhalb der Webseite Oder Code entsprechend der Reihenfolge beim Laden der Seite, um zu vermeiden, dass der js-Zeitprozess ausgeführt wird und die Seite leer ist, was zu einer schlechten Benutzererfahrung führt. Wird im Allgemeinen unten auf der Webseite nach 36cc49f0c466276486e50c850b7e4956 platziert.

Option 1

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

Option 2

<?php $this->beginBlock(&#39;js&#39;) ?> 

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

Lösung für das Problem, dass Yii2 JS unten auf der Seite lädt und Die Syntax-Eingabeaufforderung schlägt fehl

Fügen Sie einfach das Skript-Tag hinzu. Wenn Sie andere Methoden kennen, teilen Sie uns dies bitte mit. Vielen Dank!

<script type="text/javascript">
<?php $this->beginBlock(&#39;js&#39;) ?> 
  //js代码
<?php $this->endBlock() ?> 
<?php $this->registerJs($this->blocks[&#39;js&#39;], \yii\web\View::POS_END); ?> 
</script>

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Methode zum Laden von CSS, JS und statischen Ressourcen in Yii2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!