[TOC] 在實際開發中，我們不同的頁面可能會需要引入不同的JS或CSS文件，系統有自己的一套引入規則，只需在控制器中assign操作即可，無需手動在html中寫引入的html代碼。 # 引入css文件 在控制器中，通過`assign屬性`的`addCss`引入css文件 ~~~ //引入一個css文件 $this->assign->addCss('xxx') // 如果是數組，可同時引入多個指定css文件 $this->assign->addCss([ '/layui/css/layui', '/woo/css/admin/global', 'animate', '/woo/css/woo', ]); ~~~ 說明： 1、所有的靜態文件都應該在`項目/public/static`下，所以只需定義static以后的路徑即可 2、css文件默認放置到`項目/public/static/css`目錄中，所以`animate`定義的css文件其實找的是`項目/public/static/css/animate.css` 3、如果沒有在css目錄下的文件，就必須以`/`開頭直接定義static以后的全部路徑 4、`.css`后綴名可寫可不寫，如果沒有后綴自動補齊 5、css文件都引入到head標簽中 # 引入JS文件 在控制器中，通過`assign屬性`的`addJS`引入css文件 ~~~ //引入一個JS文件 $this->assign->addJs('jquery-3.4.1.min'); // 如果是數組，可同時引入多個指定JS文件 $this->assign->addJs([ 'jquery-3.4.1.min', ]); $this->assign->addJs([ '/layui/layui', '/woo/woo', '/files/sortable/Sortable.min.js', '/woo/js/admin', 'admin/common' ], true); ~~~ 說明： 1、所有的靜態文件都應該在`項目/public/static`下，所以只需定義static以后的路徑即可 2、js文件默認放置到`項目/public/static/js`目錄中，所以`'jquery-3.4.1.min`定義的js文件其實找的是`項目/public/static/js/jquery-3.4.1.min.js` 3、如果沒有在js目錄下的文件，就必須以`/`開頭直接定義static以后的全部路徑 4、`.js`后綴名可寫可不寫，如果沒有后綴自動補齊 5、JS文件默認在head中引入，如果需要在body結尾引入，第二個參數設置為true。 # 傳遞值到JS中 我們知道控制中通過assign傳遞數據到模板中，模板中的直接寫JS代碼是可以使用這些變量值得。但是獨立的JS文件中不可以使用assign的值（獨立JS文件沒有經過模板引擎，所以不會被編譯）。系統也給大家準備了一種方案，方便你在獨立JS文件中動態的獲取控制器中處理的值。 控制器中，可以通過assign的`setScriptData`傳遞到JS中： ~~~ $this->assign->setScriptData('變量名', '值'); ~~~ 然后在模板中，暴露了一個全局的js變量`woo_script_vars`，你可以查看網頁源代碼或者直接JS代碼中直接`console.log(woo_script_vars)`打印數據看下，里面的數據有限可能是你會用上的。 這樣，你可以再任意js代碼中，包括獨立JS文件中都可以通過`woo_script_vars.變量名` 獲取到控制器動態傳遞的js值。 # JS中默認的變量 默認情況下`woo_script_vars`暴露的值大概有這些： ~~~ { absroot: "http://www.wooadmin.com/"?, // 當前絕對根地址 wwwroot: "/", // 當前相對根地址 approot: "/cms"?, // 當前應用相對根地址 cms_setting: {}, // 站點配置 需要js中使用的配置項 params: {}, // 當前請求相關參數 里面包含了當前應用、控制器、方法名、參數等 setting: {}, // 系統配置 需要js中使用的配置項 upload_domains: {} // 你上傳文件的主域名 } ~~~ 這些JS變量都可以通過`woo_script_vars.屬性名`直接獲取。