代码模型

一个页面包括5个文件：源码 W 文件、代码 JS 文件、样式 CSS 文件、元数据 meta 文件和服务元数据 serviceMetaInfo 文件。

源码 W 文件

W 文件是 XML 格式的，相当于 Html 文件，里面是一个个组件，以树的形式存储层次结构。W 文件示例如下图所示

1720091881190

页面结构

W 文件里面的层次结构，在页面设计区通过页面结构展示。如下图所示，W 文件的根组件是“页面”组件

1720091926762

组件属性

JSX 属性值，除字符串以外，都使用“大花括号”括起来，例如：

  • 字符串：tab="表格"
  • 布尔值：filterRow={true}
  • JSON：pagination={{pageSize:4}}

W 文件是 XML 格式的，属性值都使用“双引号”括起来，组件属性值经过编译生成 JSX 属性值，对应关系如下：

类型 组件属性值 JSX 属性值
字符串 tab="表格" tab="表格"
布尔 filterRow="true" filterRow={true}
JSON pagination="{{{pageSize:4}}}" pagination={{pageSize:4}}

组件属性值支持表达式

  • 数据组件当前行：text="{pageData.current?.title}"
  • 表格（列表）当前行：src="{$row.images}"

表达式中可以调用 JS 文件中的方法

  • React 体系：在 w 文件中，使用 $page 访问 js 里面的方法，例如：
render="{$page.tableColumn27RenderRender(text, record, index)}"
  • Vue 系统：在 w 文件中，直接访问 js 文件中的方法，使用 $page 访问 data.js 里面的方法，例如：
render="{tableColumn27RenderRender(text, record, index)}"
readonly="{$page.setReadonly($row.state)}"

特别说明

  • 表达式内可用的语法糖变量有：$page, $row, $index, $parent, $root, $state, $event, $common
    • $page：页面对象，获取组件，例如：$page.comp('restData1')
    • $row, $index, $parent, $root：行对象相关，在表格（列表）中使用
    • $state：页面状态，例如获取 loading：$state.loading
    • $common：公共 JS 文件 UI2/pcx/common.js，在 w 文件中自动引用

组件事件

组件的事件支持：操作、操作组合、画代码、写代码

操作

调用一个操作，如下图所示，w 文件中的代码如下：

on:onClick="{'operation':'serviceRequest0.sendServiceRequest'}"

1720092401621

操作组合

调用多个操作，如下图所示，w 文件中的代码如下：

on:onClick="[{'operation':'batchRequest0.beginBatchRequest'},{'operation':'commonOperation.saveData','args':{'data':'ordermData'}},{'operation':'commonOperation.saveData','args':{'data':'productData'}},{'operation':'batchRequest0.endBatchRequest'}]"

1720092450770

画代码

适用于非开发者，在捋顺业务逻辑后，可以使用画代码的方式进行无代码开发。w 文件中的代码如下，在 JS 文件中生成相应的 JS 代码

on:onClick="{'args':{'event':'js:$event'},'operation':'button2OnClickCallback.customOperation','type':'customOperation'}"

1720165148558

系统提供“动作”用于执行一个或多个语句；提供“条件分支”实现 if else 语句；提供“循环”实现 for 语句，画代码的界面如下图所示。

1720165658884

写代码

适用于开发者，选择“写代码”，点击“跳转”按钮，在 w 文件中生成组件事件的定义代码，代码如下；在 JS 文件中生成相应的 JS 方法。

on:onClick="onOpenDialogBtnClick({"row":$row})"

特别说明

  • 组件事件的方法名由三部分组成：on + 组件 id + 事件名称。为了增加代码的可读性，组件 id 应该设置为有意义的名称
  • 删除组件事件，不能只删除 JS 文件中的方法，也必须同时删除 w 文件中组件事件的定义代码

1720092468505

代码 JS 文件

和 w 文件同名的 JS 文件，支持 ES6 语法，JS 文件中是一个个 JS 方法，这些方法被 W 文件调用。

Vue 技术体系开发必读

React 体系有一个 JS 文件，Vue 体系有两个 JS 文件，使用 Vue 体系开发前一定仔细阅读《Vue 技术体系开发必读》

ES6 异步方法

ES6 提供 async 和 await 语法糖，使得调用异步方法和调用同步方法的写法一样。在方法上添加 async，在异步请求前添加 await 即可。

  • 调用两个异步方法，这两个方法顺序执行，写法如下
    let doDeleteRole = async (rowid) => {
        try{
            let {data:deletedSuccess} = await this.request({
                method : "DELETE",
                dataType : "text",
                url :  "/authorize/roles/" + rowid
            })
            let {deleteRoleResult} = await this.comp("deleteRoleRequest").send({ roleid: rowid });
            message.info("删除角色执行成功！");
        }catch(e){
            message.error("删除角色执行失败：" + e);
        }
    }
  • 调用两个异步方法，这两个方法同时执行，写法如下
    let doDeleteRole = async (rowid) => {
        try{
            let pi = this.request({
                method : "DELETE",
                dataType : "text",
                url :  "/authorize/roles/" + rowid
            })
            let p2 = this.comp("deleteRoleRequest").send({ roleid: rowid });
            await Promise.all([p1, p2]);
            message.info("删除角色执行成功！");
        }catch(e){
            message.error("删除角色执行失败：" + e);
        }
    }

特别说明

  • 注意必须抛出具体错误

ref 的使用

在 JS 文件中获取组件对象，调用组件方法，需要在组件上开启组件引用（数据组件除外），如下图所示，设置组件的“开启组件引用”属性为“是”

1720169502249

在 JS 文件中，可以通过 this.comp("组件id") 获取组件对象，如下图所示。开启组件引用相当于设置组件的 ref 属性，即组件设置 ref 属性后，即可在 JS 中获取组件对象。

1720169537093

企业门户打开页面使用单页模式，单页模式下打开的多个页面中，存在相同的元素 id 或者 class 时，直接使用 id 或 class 获取元素，会出现获取到的不是当前页面中元素的情况，另外 querySelector 还存在消耗资源的情况，因此不建议使用 querySelector 获取 DOM 元素，建议使用 ref 获取 DOM 元素

样式 CSS 文件

和 w 文件同名的 CSS 文件，用于设置当前页面的样式，设置样式的方法参考《页面样式》

元数据 meta 文件

w 文件的元数据文件，无需手工维护

1720168002916

在“配置”中的修改，会存入元数据文件。如果需要将一个普通页面改为流程页面，在配置中，选中“流程”即可

1720175771894

服务元信息 serviceMetaInfo 文件

页面保存时，系统根据 w 文件 的元数据文件，自动生成 w 文件的服务元信息文件。服务元信息文件的内容含义参考《服务元信息》

1720168070916

在“配置”中选中“PC 首页内容块”，使页面成为小部件页面，但是这还不够，小部件页面需要“编码”属性，因此需要自定义服务元信息文件，参考《桌面端门户首页小部件开发》

公共 JS 文件

公共 JS 文件位于 UI2/pcx/common.js，默认没有此文件，需要手工创建。w 文件自动引用，在表达式中使用 $common 访问，在 js 文件中手工引用。文件格式如下：

import './common.css';

export default {
    // 对象为null,undefined,NaN  则输出为空串
    convertToEmpty(value) {
        if (value === null || value === undefined || Number.isNaN(value)) {
            return '';
        }
        return value;
    }
};

公共 CSS 文件

公共 CSS 文件位于 UI2/pcx/common.css，默认没有此文件，需要手工创建。在 common.css 文件中定义样式，在 common.js 文件中引用 common.css 文件，由于 w 文件会自动引用 common.js 文件，所以间接的 w 文件引用了 common.css 文件

在 common.js 文件中引用 common.css 文件的代码如下

1720167756310

在 common.css 文件中定义公共样式，代码如下

1720167795745

编译处理

页面编译就是将页面模型文件 w、 js 和 css 等文件，编译为可在浏览器里面使用的文件。

页面编译分为两个阶段

  • 第一阶段， 将 w 编译为 js 文件
    • React 体系的 w 文件编译
      • 将 w 文件的视图 view 部分，编译为 component.js，逻辑部分（包括操作），编译为 build.js，再生成一个 js，引用 user.js
      • 将 w 同名的 js 文件改名为 user.js
      • css 文件不变
    • Vue 系统的 w 文件编译
      • 将 w、js、css 文件编译为 vue 文件
      • data.js 文件不变
    • 这些编译后的文件，放到 model-user/.debug/pcx/pages/pcx/ 目录下

React 的 W 文件，编译出 component.js、build.js 和 user.js，如下图所示

1720087011452

Vue 的 W 文件，编译出 vue 和 data.js，如下图所示

1720165468666

  • 第二阶段，使用 webpack 打包
    • 使用模块打包器 webpack 将 JS 文件打包在一起，生成一个可在浏览器中使用的文件，文件名为：_pages_pcx_xxx_component_js.js

UI2/pcx/cs.w 最终编译为 _pages_pcx_cs_component_js.js，如下图所示

1720087042080

UI2/pcx/page/pageComp.w 最终编译为 _pages_pcx_page_pageComp_component_js.js，如下图所示

1720088182881

特别说明

  • 打开 IDE 时，系统编译 UI2/wxsys 目录下的文件
  • 第一次预览时，系统根据预览的端，对端下的文件进行全编译，例如预览桌面端，编译 pcx 目录下所有的文件
  • 第一次预览时，根据当前的技术体系（React 或者 Vue），对市场组件进行全编译
  • 后续在 IDE 中修改文件，执行快速编译，即组件比较版本，其他文件比较时间，不变不编译

results matching ""

    No results matching ""