引入css、js文件

更新时间：2020-05-26 16:21:50 作者：米拓建站

## 标签模板引入css、js文件：
### 原理：
可通过当前模板文件夹下的`config.json`文件引入`css`、`js`文件，标签模板会把模板文件夹下config.json引入的css、js文件按添加顺序打包生成到模板文件夹下的`cache/metinfo.css、cache/metinfo.js`中，前台页面会自动加载这两个文件。
### 调用语法：
在css，js数组中分别添加所需引入文件的路径。

{
    "css": [
        "{$metui_url2}plugins/webui-popover/webui-popover.min.css",
            "{$metui_url3}plugins/formvalidation/formValidation.min.css",
            "{$metui_url4}js/shop_showproduct.css",
            "{$metui_temp}static/new.css"
        ],
        "js": [
            "{$metui_url2}plugins/webui-popover/jquery.webui-popover.js",
          "{$metui_url3}plugins/register/webui-popover/webui-popover.js",
            "{$metui_url3}plugins/formvalidation/formValidation.min.js",
            "{$metui_url3}js/editor.js",
            "{$metui_url4}js/shop_showproduct.js",
            "{$metui_temp}static/new.js"
        ]
    }

### 变量及对应文件路径：

添加的路径需要以下面几种变量开头，下面是各变量对应的路径。

【注意】：请按照以下变量的顺序来引入文件，依次引入系统公用静态文件、前台模板公用静态文件、商城应用前台默认模板文件夹中的静态文件、当前模板文件夹下的静态文件，若变量对应的路径中没有需要引入的文件则可不引入。
**系统7.1及之后的版本中可用变量和对应路径：**

{$metui_url2}：网站根目录/public/（系统公用静态文件目录）
    {$metui_url3}：网站根目录/public/web/（前台模板公用静态文件目录）
    {$metui_url4}：网站根目录/app/app/shop/web/templates/met/（商城应用前台默认模板文件夹）
    {$metui_temp}：网站根目录/templates/当前模板名/（当前模板文件夹）

**系统7.1之前的版本中可用变量和对应路径：**

在系统7.1及之后版本可兼容以下变量和对应路径，但实际修改时请参照系统7.1及之后版本的设置，否则容易把路径混淆。

{$metui_url2}：网站根目录/app/system/include/static2/（系统公用静态文件目录）
    {$metui_url3}：网站根目录/public/ui/v2/static/（前台模板公用静态文件目录）
    {$metui_url4}：网站根目录/app/app/shop/web/templates/met/（商城应用前台默认模板文件夹）
    {$metui_temp}：网站根目录/templates/当前模板名/（当前模板文件夹）

### 示例：
#### 标签模板如何引入系统和自定义的css、js文件
**场景案例：**标签模板metv7需引入系统slick插件和模板中自定义的css、js文件
**①`系统css和js文件`：**位于系统公用静态文件目录下，假设调用系统slick插件，插件中包含css和js文件；
**②`自定义的css、js文件`：**位于当前模板文件夹static文件夹中，假设自定义的css、js文件为new.css、new.js。
**config.json代码：**

## 商业模板UI引入css、js文件：
### 原理：
可通过当前UI所在文件夹下的config.json文件引入css、js文件，商业模板会把UI所在文件夹下config.json引入的css、js文件按添加顺序打包生成到模板文件夹下的cache/当前页面模板文件名称_当前站点语言名称.css中，前台页面会自动加载该打包生成的css、js文件。

### 调用语法：
在css，js数组中分别添加所需引入文件的路径。

{
    "css": [
        "{$metui_url2}plugins/webui-popover/webui-popover.min.css",
            "{$metui_url3}plugins/formvalidation/formValidation.min.css",
            "{$metui_url4}js/shop_showproduct.css",
            "{$metui_temp}static/new.css",
            "ui/css/img/style.css",
            "ui/css/index.css",
        ],
        "js": [
            "{$metui_url2}plugins/webui-popover/jquery.webui-popover.js",
            "{$metui_url3}plugins/register/webui-popover/webui-popover.js",
            "{$metui_url3}plugins/formvalidation/formValidation.min.js",
            "{$metui_url3}js/editor.js",
            "{$metui_url4}js/shop_showproduct.js",
            "{$metui_temp}static/new.js",
            "ui/css/img/style.js",
            "ui/css/index.js",
        ]
    }

### 变量及对应文件路径

添加的路径需要以下面几种变量开头，下面是各变量对应的路径。
【注意】请按照以下变量的顺序来引入文件，依次引入系统公用静态文件、前台模板公用静态文件、商城应用前台默认模板文件夹中的静态文件、当前模板文件夹下的静态文件、当前UI文件夹下的静态文件，可根据需求调整顺序，若变量对应的路径中没有需要引入的文件则可不引入。

**系统7.1及之后的版本中可用变量和对应路径：**

**系统7.1之前的版本中可用变量和对应路径：**
在系统7.1及之后版本可兼容以下变量和对应路径，但实际修改时请参照系统7.1及之后版本的设置，否则容易把路径混淆。

### 示例：
#### 商业模板如何引入系统中的css、js文件，模板中的css、js文件
**场景案例：**商业模板mui001的首页产品区块（UI为product_list|met_16_1），需引入系统、模板和自定义的css、js文件：
**①`系统插件中的css、js文件：`**系统插件位于系统公用静态文件目录下，假设调用系统slick插件，slick插件包含css和js文件；
**②`模板自定义的css和js：`**位于当前模板文件的static目录中，假设调用是new.css和new.js文件；
**③`UI自定义的css、js文件：`**位于当前UI目录下的img文件夹中，假设调用的是style.css和style.js；
**④`UI默认的css和js文件：`**即当前UI目录下的index.css和index.js；
系统slick插件包含css和js文件，位于系统公用静态文件目录下的slick文件夹中；
**UI所在文件夹下config.json代码：**

{
    "css": [
        "{$metui_url2}plugins/slick-theme.min.css",//调用网站根目录/public/plugins/slick-theme.min.css
        "{$metui_url2}plugins/slick.min.css",//调用网站根目录/public/plugins/slick.min.css
            "{$metui_temp}static/new.css",//调用网站根目录/templates/mui001/static/new.css,
            "ui/css/img/style.css",//调用网站根目录/templates/mui001/ui/product_list/met_16_1/img/style.css，
             "ui/css/index.css"//调用调用网站根目录/templates/mui001/ui/product_list/met_16_1/index.css
        ],
        "js": [
         "{$metui_url2}plugins/slick.min.js",//调用网站根目录/public/plugins/slick.min.js
            "{$metui_temp}static/new.js",//调用网站根目录/templates/mui001/static/new.js
            "ui/css/img/style.js", //调用网站根目录/templates/mui001/ui/product_list/met_16_1/img/style.js
             "ui/css/index.js" //调用网站根目录/templates/mui001/ui/product_list/met_16_1/index.js
        ]
    }
    
## js异步加载css、js文件：
### 原理：
可在模板文件夹下任意js文件中通过`$.include`函数异步加载css、js文件。
### 语法：

//$.include函数
    $.include(文件路径,function(){
        ...//文件引入并加载完成后的回调
    });
    //文件路径可以是当前站点内的文件，也可以是第三方链接的文件。
    //调用当前模板文件夹下的文件需要以变量M.tem开头（当前模板文件夹路径）,例如：
    $.include(M.tem+'static/new.css',function(){
        ...//自定义代码
    });
    $.include(M.tem+'ui/head_nav/met_16_1/img/new.css',function(){
        ...//自定义代码
    });
    
    //调用当前站点内其他路径的文件需要以变量M.weburl开头（当前站点根目录路径）,例如：
    $.include(M.weburl+'public/plugins/slick.min.css',function(){
        ...//自定义代码
    });
    //$.include函数可以加载多个文件，把文件路径写成多个文件的数组形式即可，页面会按照文件的顺序来加载，例如：
    $.include([
    M.weburl+'public/plugins/slick.min.js',
    M.tem+'static/new.css',
    'https://cdn.bootcdn.net/ajax/libs/Chart.js/3.0.0-alpha/Chart.min.js'
    ],function(){
        ...//自定义代码
    });