[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.属性名`直接获取。