错误检查_多端低代码开发平台魔笔(Mobi)-阿里云帮助中心

本文介绍平台提供的错误检查。

错误检查类型

错误检查类型定义如下：

export enum FORMAT {
  // 组件是否在数据容器中
  isInDataContainer = 'isInDataContainer',
  // 判断 propName 不为空
  emptyCheck = 'emptyCheck',
  // 判断 绑定的上下文 是否存在
  contextDataCheck = 'contextDataCheck',
  // 判断字段是否和所在的数据容器的字段匹配。
  fieldCheck = 'fieldCheck',
  // 判断字段 和 逻辑流数据源的实体是否匹配
  logicResultCheck = 'logicResultCheck',
  // 判断 模板字符串 是否有误
  templateExpressionCheck = 'templateExpressionCheck',

  // 判断绑定的逻辑流 工作流是否存在
  logicCheck = 'logicCheck',
  // 判断事件绑定的逻辑流参数是否和逻辑流模型匹配
  logicParamsChangeCheck = 'logicParamsChangeCheck',
  // 判断事件绑定的工作流上下文是否是工作流对应的实体
  workFlowEnvCheck = 'workFlowEnvCheck',
  // 判断绑定的事件 如果是 外链 需要以http https 开头
  urlValidCheck = 'urlValidCheck',
  // 判断绑定的事件 页面传递的参数是否和逻辑流参数匹配
  logicPageParamCheck = 'logicPageParamCheck',
  // 判断绑定的事件，如果是内部跳转，不能跳转有自定义参数的页面
  eventCustomPathRouterCheck = 'eventCustomPathRouterCheck',
  // 判断事件 内部跳转 携带的上下文参数存在
  contextDataInsideJumpCheck = 'contextDataInsideJumpCheck',
  // 判断事件 内部跳转 页面存在
  insideJumpCheck = 'insideJumpCheck',

  // 判断上下文数据源 关联数据源是否存在
  dataAssociationCheck = 'dataAssociationCheck',
  // 检查数据源的实体模型是否存在，如果是逻辑流数据源，还判断逻辑流返回的实体模型是否匹配
  dataModelCheck = 'dataModelCheck',
  // 检查数据库数据源中过滤字段都在实体内有定义
  dataSourceFilter = 'dataSourceFilter',
  // 检查数据库数据源中排序字段都在实体内有定义
  dataSourceSort = 'dataSourceSort',
  // 判断数据库数据源 排序字段配置不对
  checkDatasourceSort = 'checkDatasourceSort',
  // 判断数据库数据源 范围字段配置不对
  checkDatasourceRange = 'checkDatasourceRange',
  // 判断数据库数据源 过滤字段配置不对
  checkDatasourceFilter = 'checkDatasourceFilter',
}

export interface FormatObj {
  name: FORMAT; // 所使用的format
  args: Array<any>; // 当前format的额外参数,如{inject: [{type: 'TEXT'}]}
  condition?: string; // 当前format的condition,会替换整体condition
}

错误检查类型用字符串表示，有些错误检查允许配置参数，此时可以扩展为对象，定义如 FormatObj。

当错误检查类型是 FormatObj 时，字段定义如下：

字段	类型	含义	备注
name	string	错误检查类型	参考错误检查类型
args	array<any>	错误检查扩展的参数	具体有几个参数，什么类型，由具体的错误检查决定
condition	string	错误检查生效的条件	缺省一直启用。形式是一个字符串。示例：'arguments[0].multiple' 其中arguments[0]表示props，也就是说props参数multiple为true时启用。

数据源的错误检查

针对数据源的错误检查有很多类型，为了减少配置，我们在 src/api 中封装一组数据源的错误配置 dataSourceRules ，方便对数据源的错误检查配置。

示例如下：

import { API_VERSION, Category, dataSourceRules, actionRules, FORMAT } from './api';

export default {
  apiVersion: API_VERSION,
  version: '1.0',
  isContainer: true,
  title: '{{ alias }}',
  componentName: '{{ componentName }}',
  category: Category.COMMON,
  icon: 'https://img.alicdn.com/imgextra/i1/O1CN01oufFHB266LbYRkVr3_!!6000000007612-55-tps-20-20.svg',
  configure: [
    // 省略属性配置
  ],

  rules: [
    {
      type: 'object',
      format: FORMAT.emptyCheck,
      description: '没有绑定数据源',
      propName: 'props.dataSource',
      level: 'ERROR',
      alias: '数据源',
    },
    ...dataSourceRules,
  ],
};

dataSourceRules 会返回针对数据源的所有配置，减少配置量。

dataSourceRules 定义如下：

export const dataSourceRules = [
  {
    type: 'object',
    format: FORMAT.dataModelCheck,
    description: '绑定的数据源不存在/已更改，请重新绑定',
    propName: 'props.dataSource',
    level: 'ERROR',
    alias: '数据源',
  },
  {
    type: 'object',
    format: FORMAT.dataAssociationCheck,
    description: '绑定数据或组件层级已更改，该组件的上下文数据源已错误',
    propName: 'props.dataSource',
    level: 'ERROR',
    alias: '数据源',
  },
  {
    type: 'object',
    format: FORMAT.dataSourceFilter,
    description: '筛选字段不存在，请重新绑定',
    propName: 'props.dataSource.constraints.filter',
    level: 'ERROR',
    alias: '数据源',
  },
  {
    type: 'object',
    format: FORMAT.dataSourceSort,
    description: '排序字段不存在，请重新绑定',
    propName: 'props.dataSource.constraints.sort',
    level: 'ERROR',
    alias: '数据源',
  },
  {
    type: 'object',
    format: FORMAT.checkDatasourceSort,
    description: '数据源排序约束不合法',
    propName: 'props.dataSource',
    level: 'ERROR',
    alias: '数据源',
  },
  {
    type: 'object',
    format: FORMAT.checkDatasourceRange,
    description: '数据源范围约束不合法',
    propName: 'props.dataSource',
    level: 'ERROR',
    alias: '数据源',
  },
  {
    type: 'object',
    format: FORMAT.checkDatasourceFilter,
    description: '数据源筛选约束不合法',
    propName: 'props.dataSource',
    level: 'ERROR',
    alias: '数据源',
  },
  {
    type: 'object',
    format: FORMAT.contextDataCheck,
    description: '选择的数据不存在/已更改，请重新选择',
    propName: 'props.dataSource',
    level: 'ERROR',
    alias: '数据源',
  },
] as Array<PropRule>;

字段的错误检查

针对字段的错误检查有很多类型，为了减少配置，我们在 src/api 中提供了封装方法 attrRules ，方便对字段的错误检查配置。

示例如下：

import { API_VERSION, Category, attrRules, actionRules, FORMAT } from './api';

export default {
  apiVersion: API_VERSION,
  version: '1.0',
  isContainer: false,
  title: '',
  componentName: 'MobiPcTest',
  category: Category.COMMON,
  icon: 'https://img.alicdn.com/imgextra/i1/O1CN01oufFHB266LbYRkVr3_!!6000000007612-55-tps-20-20.svg',
  configure: [
   // 省略属性配置
  ],
  rules: [
    ...attrRules({ propName: 'props.text', alias: '文本内容' }),
    {
      type: 'object',
      format: FORMAT.emptyCheck,
      description: '文本必须有内容',
      propName: 'props.text',
      level: 'ERROR',
      alias: '文本内容',
    },
  ],
};

attrRules 会返回针对字段的所有配置，减少配置量。

attrRules 定义如下：

interface Props {
  formats?: Array<(FORMAT | FormatObj)>; // 该字段所使用的错误检查函数列表,默认为使用所有
  propName?: string; // 该字段所使用的prop,默认为'props.value'
  alias?: string; // 该字段别名,默认为'配置字段'
  condition?: string; // 该字段错误检查开启条件,如'props.multiple'代表仅当'props.multiple'为true时执行这些错误检查
}

const attrRules : (props: Props) => Array<PropRule> = (props)=> { /* 省略实现 */ }

参数说明：

字段	类型	含义	备注
formats	Array<(FORMAT \| FormatObj)>	要应用的错误检查配置	缺省是所有针对字段的错误检查，包括 contextDataCheck fieldCheck logicResultCheck templateExpressionCheck
propName	string	要检查的字段	格式props.xxx 缺省为props.value
alias	string	要检查的字段别名	缺省为配置字段
condition	string	错误检查生效的条件	缺省一直启用。形式是一个字符串。示例：'arguments[0].multiple' 其中arguments[0]表示props，也就是说props参数multiple为true时启用。

返回值为PropRule 错误检查配置数组。

事件的错误检查

针对事件的错误检查有很多类型，为了减少配置，我们在 src/api 中提供了封装方法 actionRules ，方便对事件的错误检查配置。

示例如下：

import { API_VERSION, Category, attrRules, actionRules, FORMAT } from './api';

export default {
  apiVersion: API_VERSION,
  version: '1.0',
  isContainer: false,
  title: '',
  componentName: 'MobiPcTest',
  category: Category.COMMON,
  icon: 'https://img.alicdn.com/imgextra/i1/O1CN01oufFHB266LbYRkVr3_!!6000000007612-55-tps-20-20.svg',
  configure: [
   // 省略属性配置
  ],
  rules: [
     ...actionRules({ propName: 'props.onClick', alias: '点击' }),
  ],
};

actionRules 会返回针对事件的所有配置，减少配置量。

actionRules 定义如下：

interface Props {
  formats?: Array<(FORMAT | FormatObj)>; // 该事件所使用的错误检查函数列表,默认为使用所有
  propName?: string; // 该事件所使用的prop,默认为'props.eventAction'
  alias?: string; // 该事件别名,默认为'点击触发动作'
  condition?: string; // 该事件错误检查开启条件,如'props.multiple'代表仅当'props.multiple'为true时执行这些错误检查
}

const actionRules : (props: Props) => Array<PropRule> = (props)=> { /* 省略实现 */ }

参数说明：

字段	类型	含义	备注
formats	Array<(FORMAT \| FormatObj)>	要应用的错误检查配置	缺省是所有针对事件的错误检查，包括： logicCheck logicParamsChangeCheck workFlowEnvCheck urlValidCheck logicPageParamCheck eventCustomPathRouterCheck contextDataInsideJumpCheck insideJumpCheck
propName	string	要检查的事件	格式props.xxx。缺省为props.eventAction。
alias	string	要检查的事件别名	缺省为配置字段。
condition	string	错误检查生效的条件	缺省一直启用。形式是一个字符串。示例：'arguments[0].multiple' 其中arguments[0]表示props，也就是说props参数multiple为true时启用。

返回值为PropRule 错误检查配置数组。

isInDataContainer

判断组件是否在数据容器中。

示例：

    {
      type: 'object',
      format: 'isInDataContainer',
      description: '组件放置错误，该组件需放置在数据容器内',
      level: 'ERROR',
      alias: '组件',
    }

emptyCheck

判断属性是否为空。

示例：

    {
      type: 'object',
      format: 'emptyCheck',
      description: '图片必须配置图片地址',
      propName: 'props.src',
      level: 'ERROR',
      alias: '文件类型',
    },

contextDataCheck

判断字段或者数据源使用的数据上下文是否存在。

示例：

    {
      type: 'object',
      format: 'contextDataCheck',
      description: '选择的数据不存在/已更改，请重新选择',
      propName: 'props.text',
      level: 'ERROR',
      alias: '按钮文字',
    },

fieldCheck

判断字段是否和数据容器加载的实体匹配。

示例：

    {
      type: 'object',
      format: 'fieldCheck',
      description: '实体类型或组件层级已更改，该组件绑定的属性已错误',
      propName: 'props.text',
      level: 'ERROR',
      alias: '按钮文字',
    },

logicResultCheck

判断字段是否和逻辑流数据源的返回实体匹配。

示例：

    {
      type: 'object',
      format: 'logicResultCheck',
      description: '逻辑流返回值变化，该绑定字段已失效，请重新绑定父级数据容器的逻辑流',
      propName: 'props.backgroundImage',
      level: 'ERROR',
      alias: '背景图片',
    },

templateExpressionCheck

判断模板字符串是否合法。

示例：

    {
      type: 'object',
      format: 'templateExpressionCheck',
      description: '模板表达式有误，请检查',
      propName: 'props.text',
      level: 'ERROR',
      alias: '文本内容',
    },

logicCheck

判断事件绑定的逻辑流或者工作流是否存在。

示例：

    {
      type: 'object',
      format: 'logicCheck',
      description: '绑定的逻辑流不存在，请重新绑定',
      propName: 'props.eventAction',
      level: 'ERROR',
      alias: '点击触发动作',
    },

logicParamsChangeCheck

判断事件绑定的逻辑流参数和逻辑流模型是否匹配。

示例：

    {
      type: 'object',
      format: 'logicParamsChangeCheck',
      description: '绑定的逻辑流参数有变更，请重新绑定',
      propName: 'props.eventAction',
      level: 'ERROR',
      alias: '点击触发动作',
    },

workFlowEnvCheck

判断事件绑定的工作流和当前数据上下文是否匹配。

示例：

    {
      type: 'object',
      format: 'workFlowEnvCheck',
      description: '绑定的工作流和数据上下文不匹配，请重新绑定',
      propName: 'props.eventAction',
      level: 'ERROR',
      alias: '点击触发动作',
    },

urlValidCheck

判断事件绑定的外部链接是否合法。

示例：

    {
      type: 'object',
      format: 'urlValidCheck',
      description: '绑定的外部链接格式不对，请重新绑定',
      propName: 'props.eventAction',
      level: 'ERROR',
      alias: '点击触发动作',
    },

logicPageParamCheck

判断事件绑定的逻辑流参数和页面实际传递的参数是否匹配。

示例：

    {
      type: 'object',
      format: 'logicPageParamCheck',
      description: '绑定的逻辑流参数和页面传递的参数不匹配，请重新绑定',
      propName: 'props.eventAction',
      level: 'ERROR',
      alias: '点击触发动作',
    },

默认情况下，页面传递的参数就是数据上下文（参考事件参数），但是有时组件会传递更多参数（参考事件参数和返回值），在这种场景下，就需要扩展错误检查参数，让错误检查识别到组件传递的参数。

logicPageParamCheck 错误检查，仅有一个扩展参数 logicPageParamCheckArgs，定义如下：

export enum MOBI_TYPE {
  LIST = 'LIST',
  ENTITY = 'OBJECT'
}

export interface ArgType {
  type: MOBI_TYPE;
  subType?: MOBI_TYPE;
  name?: string;
}

interface logicPageParamCheckArgs {
  inject: Array<ArgType>;
}

字段说明：

字段	类型	含义	备注
inject	Array<ArgType>	组件传递的参数列表	最终传递给逻辑流的参数列表是此列表加上数据上下文。
ArgType.type	string	参数类型	LIST是列表，列表项类型由subType字段决定。 OBJECT表示实体对象，是最近数据上下文的实体类型。
ArgType.subType	string	当参数是列表时，列表项的类型	不能是LIST。
ArgType.name	string	参数名称	错误检查时不使用。

假设组件额外传递了一个当前数据容器的实体对象，示例如下：

    {
      type: 'object',
      format: {
        name: 'logicPageParamCheck',
        args: [
          {
            inject: [{ type: 'OBJECT' }],
          },
        ],
      },
      description: '绑定的逻辑流参数和页面传递的参数不匹配，请重新绑定',
      propName: 'props.eventAction',
      level: 'ERROR',
      alias: '点击触发动作',
    },

eventCustomPathRouterCheck

判断事件绑定的跳转页面是否可用。配置有自定义路由参数的页面不能直接跳转。

示例：

    {
      type: 'object',
      format: 'eventCustomPathRouterCheck',
      description: '绑定的页面有参数要求，无法跳转，请重新绑定',
      propName: 'props.eventAction',
      level: 'ERROR',
      alias: '点击触发动作',
    },

contextDataInsideJumpCheck

判断内部跳转事件携带的数据上下文是否存在。

示例：

    {
      type: 'object',
      format: 'contextDataInsideJumpCheck',
      description: '内部跳转传递的对象不存在，请重新绑定',
      propName: 'props.eventAction',
      level: 'ERROR',
      alias: '点击触发动作',
    },

insideJumpCheck

判断内部跳转事件指定的页面是否存在。

示例：

    {
      type: 'object',
      format: 'insideJumpCheck',
      description: '内部跳转的页面不存在，请重新绑定',
      propName: 'props.eventAction',
      level: 'ERROR',
      alias: '点击触发动作',
    },

dataAssociationCheck

判断上下文数据源外层关联的数据源是否存在。

示例：

    {
      type: 'object',
      format: 'dataAssociationCheck',
      description: '绑定数据或组件层级已更改，该组件的上下文数据源已错误',
      propName: 'props.dataSource',
      level: 'ERROR',
      alias: '数据源',
    },

dataModelCheck

判断数据源的实体模型是否存在。

示例：

    {
      type: 'object',
      format: 'dataModelCheck',
      description: '绑定的数据源不存在/已更改，请重新绑定',
      propName: 'props.dataSource',
      level: 'ERROR',
      alias: '数据源',
    },

dataSourceFilter

判断数据库数据源的过滤字段是否存在。

示例：

  {
    type: 'object',
    format: 'dataSourceFilter',
    description: '筛选字段不存在，请重新绑定',
    propName: 'props.dataSource.constraints.filter',
    level: 'ERROR',
    alias: '数据源',
  },

dataSourceSort

判断数据库数据源的排序字段是否存在。

示例：

  {
    type: 'object',
    format: 'dataSourceSort',
    description: '排序字段不存在，请重新绑定',
    propName: 'props.dataSource.constraints.sort',
    level: 'ERROR',
    alias: '数据源',
  },

checkDatasourceSort

判断数据库数据源的排序配置是否正确。

示例：

  {
    type: 'object',
    format: 'checkDatasourceSort',
    description: '数据源排序约束不合法',
    propName: 'props.dataSource',
    level: 'ERROR',
    alias: '数据源',
  },

checkDatasourceRange

判断数据库数据源的范围配置是否正确。

示例：

  {
    type: 'object',
    format: 'checkDatasourceRange',
    description: '数据源范围约束不合法',
    propName: 'props.dataSource',
    level: 'ERROR',
    alias: '数据源',
  },

checkDatasourceFilter

判断数据库数据源的过滤配置是否正确。

示例：

  {
    type: 'object',
    format: 'checkDatasourceFilter',
    description: '数据源筛选约束不合法',
    propName: 'props.dataSource',
    level: 'ERROR',
    alias: '数据源',
  },