页面模板目录结构

页面模板下载到 IDE 后，页面模板代码放到 UI2/comp 目录下。下图展示了两个页面模板的目录及文件结构，上面的模板包括一个页面，下面的模板包括两个页面。

页面模板目录

一个页面模板包括 template 目录和 template.config.xml 文件

│  ├─页面模板目录             //页面模板名称
│  │  ├─template                //模板文件目录
│  │  │  ├─.nocompile           //标记不编译此目录下的文件
│  │  │  ├─{{$fileName}}.css               //模板 css 文件
│  │  │  ├─{{$fileName}}.js         //模板 js 文件
│  │  │  ├─{{$fileName}}.data.js     //vue 体系数据组件 js 文件
│  │  │  ├─{{$fileName}}.w         //模板 w 文件
│  │  │  └─{{$fileName}}.w.meta     //模板 w.meta 文件
│  │  └─template.config.xml        //页面模板配置文件

一个带多套页面的页面模板包括 template 目录（多套页面）和 template.config.xml 文件，多套页面模板需把模板文件后缀添加 .tpl（因多套页面模板涉及页面菜单及跳转，需要加入 serviceMetaInfo.json 文件，避免运行时 w 模板被编译，因此统一修改添加模板后缀名 .tpl）。

│  ├─页面模板目录                          //页面模板名称
│  │  ├─template                             //模板文件目录
│  │  │  ├─.nocompile                        //标记不编译此目录下的文件
│  │  │  ├─{{$fileName}}.css.tpl                        //列表页模板 css 文件
│  │  │  ├─{{$fileName}}.js.tpl                  //列表页模板 js 文件
│  │  │  ├─{{$fileName}}.serviceMetaInfo.json.tpl        //带页面跳转的模板，需要补充 serviceMetaInfo 文件
│  │  │  ├─{{$fileName}}.data.js.tpl                      //vue 体系数据组件 js 文件
│  │  │  ├─{{$fileName}}.w.tpl                          //列表页模板 w 文件
│  │  │  ├─{{$fileName}}.w.meta.tpl                      //列表页模板 w.meta 文件
│  │  │  ├─{{$detailPageName}}.css.tpl                //详情页模板 css 文件
│  │  │  ├─{{$detailPageName}}.js.tpl                  //详情页模板 js 文件
│  │  │  ├─{{$detailPageName}}.serviceMetaInfo.json.tpl  //带页面跳转的模板，需要补充 serviceMetaInfo 文件
│  │  │  ├─{{$detailPageName}}.data.js.tpl              //vue 体系数据组件 js 文件
│  │  │  ├─{{$detailPageName}}.w.tpl                  //详情页模板 w 文件
│  │  │  └─{{$detailPageName}}.w.meta.tpl              //详情页模板 w.meta 文件
│  │  └─template.config.xml                     //页面模板配置文件

页面模板文件

页面源码 W 文件

页面模板 W 文件是指页面模板中以 .w 和 .w.tpl 为后缀的文件，是用于存储页面设计元素。页面模板中只包括一个页面时，使用 w 后缀，包括多条页面时，使用 .w.tpl 后缀。文件内容遵循 Handlebars 模板引擎语法。

React 架构桌面端模板案例

<antdpro:Page xmlns:antdpro="$UI/comp/antdpro/components" uix="true" xmlns:bind="http://www.wex5.com/wx/bind" xmlns:catch="http://www.wex5.com/wx/event/catch" 
    xmlns:on="http://www.wex5.com/wx/event/on" xmlns:wx="$UI/wxsys/comps" class="x-page" id="page">
    <wx:model id="model" style="left:0px;top:0px;height:auto;position:absolute">
        <wx:wxApi id="wxapi" designer_label="通用接口"/>
        <wx:commonOperation xmlns:wx="$UI/wxsys/comps" id="commonOperation" designer_label="操作扩展"/>
    </wx:model>
    <wx:inVisibleCompContainer id="inVisibleCompContainer0"/>
</antdpro:Page>

Vue 架构桌面端模板案例

<antdv:Page xmlns:antdv="$UI/comp/antdv/components" uix="true" xmlns:bind="http://www.wex5.com/wx/bind" xmlns:catch="http://www.wex5.com/wx/event/catch" 
    xmlns:on="http://www.wex5.com/wx/event/on" xmlns:wx="$UI/wxsys/comps" class="x-page" id="page">
    <wx:model id="model" style="left:0px;top:0px;height:auto;position:absolute">
        <wx:wxApi id="wxapi" designer_label="通用接口"/>
        <wx:commonOperation xmlns:wx="$UI/wxsys/comps" id="commonOperation" designer_label="操作扩展"/>
    </wx:model>
    <wx:inVisibleCompContainer id="inVisibleCompContainer0"/>
</antdv:Page>

React架构移动端模板案例

<vantui:Page class="x-page" id="page" xmlns:bind="http://www.wex5.com/wx/bind" xmlns:catch="http://www.wex5.com/wx/event/catch" xmlns:on="http://www.wex5.com/wx/event/on" xmlns:vantui="$UI/comp/vantui/components" xmlns:wx="$UI/wxsys/comps">
    <wx:model id="model" style="left:0px;top:0px;height:auto;position:absolute">
        <wx:wxApi designer_label="通用接口" id="wxapi"/>
        <wx:commonOperation designer_label="操作扩展" id="commonOperation" xmlns:wx="$UI/wxsys/comps"/>
    </wx:model>
    <wx:inVisibleCompContainer id="inVisibleCompContainer0"/>
</vantui:Page>

Vue架构移动端模板案例

<vant:Page xmlns:vant="$UI/comp/vant/components" uix="true" xmlns:bind="http://www.wex5.com/wx/bind" xmlns:catch="http://www.wex5.com/wx/event/catch" 
    xmlns:on="http://www.wex5.com/wx/event/on" xmlns:wx="$UI/wxsys/comps" class="x-page" id="page">
    <wx:model id="model" style="left:0px;top:0px;height:auto;position:absolute">
        <wx:wxApi id="wxapi" designer_label="通用接口"/>
        <wx:commonOperation xmlns:wx="$UI/wxsys/comps" id="commonOperation" designer_label="操作扩展"/>
    </wx:model>
    <wx:inVisibleCompContainer id="inVisibleCompContainer0"/>
</vant:Page>

页面代码 JS 文件

页面模板 JS 文件是指页面模板中以 .js 和 .js.tpl 为后缀的文件，存储生成的页面中配套的事件处理代码。页面模板中只包括一个页面时，使用 js 后缀，包括多条页面时，使用 .js.tpl 后缀。文件内容遵循 Handlebars 模板引擎语法。

React 架构模板案例

import Page from "$UI/wxsys/comps/reactContainer/page/Page";
export default class IndexPage extends Page {
    constructor(props, context) {
        super(props, context);
    }
}

Vue 架构模板案例

import { reactive, ref, watch } from "vue";
import { usePage, useData } from "vue_addon/core";
let $page = usePage();

//使用门户主题变量，需要申明 token 变量，供 css 模板文件中引用
import { theme } from 'ant-design-vue';
const { token } = theme.useToken();

页面模板 DATA.JS 文件是指页面模板中以 .data.js 和 .data.js.tpl 为后缀的文件，是 Vue 架构中用于存储数据系列组件的事件处理代码。目前有下面这三种组件的事件代码写入 data.js 文件中

• wx:model 组件下的所有组件
• 组件模板（.xml 文件）中有 hasView="false" 的组件：wx:importExcel、wx:exportExcel、wx:print
• data 系列组件：wx:restData、wx:tableData、wx:tableCustomData、wx:jsonData、wx:serviceData、wx:aggregateData

页面模板中只包括一个页面时，使用 data.js 后缀，包括多条页面时，使用 .data.js.tpl 后缀。文件内容遵循 JavaScript 语法及 Handlebars 模板引擎语法。

data.js 模板案例

import Page from "$UI/wxsys/comps/vueContainer/page/Page";
export default class VuePage extends Page {
    constructor(...args) {super(...args); }
}

页面样式 CSS 文件

页面模板 CSS 文件是指页面模板中以 .css 和 .css.tpl 为后缀的系列文件，为 W 文件提供 CSS 规则，内容遵循 CSS、SCSS 规范及 Handlebars 模板引擎语法。

• 如果需要覆盖组件库提供的 css 规则，需要使用 :global 的方式才能生效，但是为了避免污染全局的组件库 css 规则
  • React 架构则要在 :global 外层再嵌套一层选择器
  • Vue 架构需要添加父 css 选择器
• Vue 架构如需使用门户主题变量，则需在 .js 模板中加入 import { theme } from 'ant-design-vue';const { token } = theme.useToken(); 的申明语句

React 架构模板案例

/* 使用 :global 覆盖组件库 css 规则 */
.c-full{
    :global{
        .ant-layout{
            height:100%;
            background: var(--ant-color-bg-base, #fff) !important;
        };
    }
}

Vue 架构模板案例

/* 使用 :global 覆盖组件库 css 规则 */
:global(.list-detail-page-vue .ant-layout) {
    height: 100%;
}

/* 使用门户主题变量 */
.c-selected {
    background: v-bind('token.colorBgBase');
    border: 1px solid v-bind('token.colorBorder');
}

页面元文件

页面模板 W.META 文件是指页面模板中以 .w.meta 和 .w.meta.tpl 为后缀的文件，是用于存储页面元信息，页面模板中只包括一个页面时，使用 .w.meta 后缀，包括多条页面时，使用 .w.meta.tpl 后缀。文件内容遵循 Handlebars 模板引擎语法。有下面两个规范

• 桌面端页面的 fileMode 为 pc，移动端页面的 fileMode 为 m。
• React 桌面端页面需要设置 modules 为 antdpro

React 体系桌面端文件内容

{
    "devMode": "source",
    "fileMode": "pc",
    "label": "{{$fileLabel}}",
    "modules": [
        "antdpro"
    ]
}

Vue 体系桌面端文件内容

{
    "devMode": "source",
    "fileMode": "pc",
    "label": "{{$fileLabel}}"
}

React 体系移动端文件内容

{
    "fileMode": "m",
    "label": "{{$fileLabel}}",
    "devMode": "source"
}

Vue 体系移动端文件内容

{
    "fileMode": "m",
    "label": "{{$fileLabel}}",
    "devMode": "source"
}

服务元信息文件

页面模板 serviceMetaInfo 文件是指页面模板中以 .serviceMetaInfo.json 和 .serviceMetaInfo.json.tpl 为后缀的文件，因生成页面后，多个页面涉及菜单及跳转，需要加入 serviceMetaInfo 文件，文件内容遵循 JavaScript 语法及 Handlebars 模板引擎语法。

{{$fileName}}.serviceMetaInfo.json.tpl模板文件案例

{
    "authorize":{
        "permissions":[],
        "roles":[]
    },
    "menu":{
        "children":[
            {
                "children":[
                    {
                        "children":[],
                        "ext":{},
                        "title":"{{$detailPageLabel}}",
                        "types":["pcx","func"],
                        "url":"/{serviceName}/{{#replace $targetPath}}{{/replace}}/{{$detailPageName}}.w"
                    }
                ],
                "ext":{},
                "title":"{{$targetPathLabel}}",
                "types":[]
            }
        ],
        "ext":{},
        "title":"{serviceLabel}",
        "types":[]
    },
    "serviceInfo":{
        "label":"{serviceLabel}",
        "name":"{serviceName}"
    }
}

标记文件

.nocompile 文件是空白文件，用于标记当前目录在运行时不需要编译。因页面模板中的 .w 文件位于 model/UI2/comp 下，运行时默认会触发资源编译，由于 .w 模板文件是整合 Handlebars 模板引擎语法的结构文档，不具备正确编译和预览的能力，因此无需编译，添加 .nocompile 空白文件即可加入编译黑名单，在运行时忽略编译。

模板配置文件

模板配置文件 template.config.xml 用于配置页面模板包括的配置页，参考《页面模板配置页》