模型驱动渲染引擎

引擎部分不包含 UI 逻辑，支持全平台。各个平台的渲染部分通过注册 components 来实现。 在线文档参考： https://yuque.antfin.com/docs/share/65a39ca0-f5a2-49aa-8c0f-3f3287597a67?# 《模型驱动引擎页面如何使用》

直接使用

• pc

import * as Next from '@cainiaofe/cn-ui';
import MDDRenderEngine, {setActions, setComponents} from '@cniot/mdd-render-engine';

import {actions, components} from '@cniot/mdd-render-pc-ftp';
import '@cniot/mdd-ftp-render/build/index.css';

setActions(actions);
setComponents(Next);
setComponents(components);


const schema = {}
<MDDRenderEngine
  // 要渲染的 schema
  schema={schema}
  // 渲染完成
  onReady={(engine)=>{}}
  // 动作处理器 map 可省略
  actions = {actions}
>

• rn

import {View, Text} from 'react-native';
import MDDRenderEngine from '@cniot/mdd-render-engine/';

import {actions, components} from '@cniot/mdd-rn-ftp';

setActions(actions);
setComponents(Next);
setComponents(components);

const schema = {}
<MDDRenderEngine
  // 要渲染的 schema
  schema={schema}
  // 渲染完成
  onReady={(engine)=>{}}
>

module

为了模型驱动页面的可扩展性，我们设计了 module 。项目可以向引擎的全局（或某个实例）注入模块，可以是渲染函数，也可以是自己定义的逻辑处理函数，或者是数据

• 全局注册和获取

import MDDRenderEngine, { RenderEngine } from '@cniot/mdd-render-engine/build/rn/index.es.js';

// 全局输入模块, 每个实例都可以获得这个模块
RenderEngine.setModule("def", function(){
  // todo
})

// 获取 def 函数
const def = RenderEngine.getModule("def")

• 实例注册和获取

import MDDRenderEngine, { RenderEngine } from '@cniot/mdd-render-engine/build/rn/index.es.js';

const engine = new RenderEngine();
// 在示例上添加模块
engine.setModule("def", function(){
  // todo
})

// 自定义4个默认事件
engine.removeModule("dialog");
engine.setModule("dialog", function(){
  // todo
});

<MDDRenderEngine schema={{}} engine={engine}>

处理器

处理器是 schema 定义的 4 个默认动作 ajax/dialog/url/drawer，目前 PC 部分已经包含了默认实现。如果想要自定义实现逻辑可以按照如何方式来覆盖

import MDDRenderEngine, { RenderEngine } from '@cniot/mdd-render-engine/pc';

const engine = new RenderEngine();

// 自定义4个默认事件
// 先删除已注册的module
engine.removeModule("dialog");

// 再注册新的module,注意4个默认动作默认key: ajax, dialog, url, drawer
engine.setModule("dialog", function(){
  // todo
});

<MDDRenderEngine schema={{}} engine={engine}>

国际化

import MDDRenderEngine, { RenderEngine, i18n } from '@cniot/mdd-render-engine/pc';

i18n.setLocaleMessages({
  "查询":"Search"
})

// 组件内部是通过界面配置的值，查询对应国际化语言文案的。所以这里的 key 是中文

更新记录

0.1.1-beta.12

• 支持 extendsModule 中的 onReady 拿到 engine 实例
• 动态取值格式要求必须$加大写字母($[A-Z].+)