低代码引擎的 Demo 可以通过如下永久链接访问到：
node 版本推荐 16.18.0。
可以安装 n 来管理和变更 node 版本。
npm install -g nn 14.17.0可以前往 github（https://github.com/alibaba/lowcode-demo）将 DEMO 下载到本地。
需要使用到 git 工具
git clone https://github.com/alibaba/lowcode-demo.git在 以 demo-general 为例：
cd demo-general在 lowcode-demo/demo-general 目录下执行：
npm install在 lowcode-demo/demo-general 目录下执行：
npm run start之后就可以通过 http://localhost:5556/ 来访问 DEMO 了。
低代码编辑器中的区块主要包含这些功能点：
可以查找组件，并在此拖动组件到编辑器画布中
可以调整页面内的组件树结构： 
可以编辑页面级别的 JavaScript 代码和 CSS 配置
【开发者专属】可以编辑页面的底层 Schema 数据。 
它们操作的数据关系是：
- 页面中的 Schema 数据：保存在低代码引擎中的 Schema，点击 Schema 面板中的“保存 Schema”时将修改引擎中的值，此外低代码引擎中的所有操作都可能修改到 Schema
- localStorage 数据：由“保存到本地”保存到 localStorage 中，页面初始化时将读取，预览页面时也会读取
- 默认 Schema：保存在 Demo 项目中的默认 Schema（
public/schema.json），初始化页面时如果不存在 localStorage 数据即会读取，点击“重置页面”时，也会读取
一个常见的表格页面会包含查询框、表格和分页按钮。这些都在 Fusion UI 中进行了相应的封装，我们可以在左侧组件面板处找到他们。
将他们拖到画布之中：
选中刚拖入的“查询筛选”组件，您可以配置此组件：
对于形如 Array 的配置项目，我们可以增删项目、修改常用项、修改顺序。
掌握组件配置功能，我们就可以完成一个常用的查询框的配置：
低代码场景下，我们需要绑定动态的数据。通过左侧的源码编辑面板，我们可以创建动态数据和它的相关处理函数：
如图，我们配入如下自定义值进 state 里：
"companies": [
{ company: '测试公司1', id: 1, createTime: +new Date() },
{ company: '测试公司2', id: 2, createTime: +new Date() },
{ company: '测试公司3', id: 3, createTime: +new Date() },
]定义动态数据以后，我们需要绑定它到组件的属性中，我们找到相关属性的配置：
如图，输入表达式：
this.state.companies再结合上一节的“配置组件”操作，我们已经可以把表格的主体配置出来了：
我们进入代码区块，使用生命周期方法来完成动态数据的请求。假设提供数据的接口是：http://rap2api.taobao.org/app/mock/250089/testCompanies，那么，我们可以在源码面板进行如下配置：
class LowcodeComponent extends Component {
state = {
"text": "outer",
"isShowDialog": false,
"loading": false,
"companies": [
{ company: '测试公司 1', id: 1, createTime: +new Date() },
{ company: '测试公司 2', id: 2, createTime: +new Date() },
{ company: '测试公司 3', id: 3, createTime: +new Date() },
]
}
componentDidMount() {
this.setState({ loading: true })
window.fetch('http://rap2api.taobao.org/app/mock/250089/testCompanies')
.then((res) => res.json())
.then((companies) => {
this.setState({
companies,
})
})
.catch(err => console.error(err))
.then(() => {
this.setState({ loading: false })
})
}
}在 componentDidMount 生命周期，将请求接口并设置 loading 和数据字段。
点击保存或叉关闭源码面板后，我们可以看到代码已经生效了：
我们可以用绑定数据的方法把 loading 绑在加载指示上：
将 Loading 的“是否显示”字段绑定 this.state.loading 后，我们可以看到，这里暴露了一个插槽。插槽是可以任意扩展的预设部分，我们可以把其他的部分拖进插槽：
点击右上角的预览，我们能够看到完整的动态请求效果了：
为了能够让表格里的操作挂钩浮层，我们先拖入一个浮层：
使用大纲树能够临时显示和隐藏此浮层：
我们给表格增加一个数据列：
然后配置它的行为为“弹窗”：
实现的效果如下：
上述功能点中，我们是把操作行为绑定在数据列上的，这一节我们绑定到操作列中。在操作列按钮处，点击下方的“添加一项”：
点击左侧的详情按钮，配置它的事件回调：
代码侧，我们配置这个回调函数：
onClick_new(e, { rowKey, rowIndex, rowRecord }){
window.Next.Message.show(JSON.stringify({ rowKey, rowIndex, rowRecord }))
}保存。预览时我们可以看到效果了：
我们把本例的 schema 保存在云端，您可以自行下载研究：https://mo.m.taobao.com/marquex/lowcode-showcase-table
您可以通过左下角的 Schema 面板直接导入本例子的 Schema。
- 点击弹窗
- 点击右侧面板中的高级
- 找到 refId
这里我们的 refId 是 "pro-dialog-entryl32xgrus"
点击工具栏的隐藏小图标，将弹窗在画布中隐藏
通过下面的代码即可打开弹窗
this.$('pro-dialog-entryl32xgrus').open();设置器，又称为 Setter，主要展示在编辑器的右边区域，如下图： 
- 属性：展示该物料常规的属性
- 样式：展示该物料样式的属性
- 事件：如果该物料有声明事件，则会出现事件面板，用于绑定事件。
- 高级：两个逻辑相关的属性，条件渲染和循环
上述区域中是有多项设置器的，对于一个组件来说，每一项配置都对应一个设置器，比如我们的配置是一个文本，我们需要的是文本设置器，我们需要配置的是数字，我们需要的就是数字设置器。 下图中的标题和按钮类型配置就分别是文本设置器和下拉框设置器。
我们提供了常用的设置器作为内置设置器，也提供了定制能力帮助大家开发特定需求的设置器。
在源码面板中，您可以完成低代码中的代码部分编写。
代码编辑面板允许您书写 JavaScript 代码，并支持 JSX 语法。 由于依赖了 Babel，所以书写的 JSX 和 Chrome 80+ 以后的新语法也会被自动编译：
| 编译前 | 编译后 |
|---|---|
 |
 |
 |
 |
注：因为编译结果会被
@babel/runtime干扰，目前面板不支持async await或{ ...arr }形态的语法编译。如果您需要此类编译，您可以考虑在读取 schema 中的originCode之后自己手动通过 babel 编译。
在代码中，您可以通过 window 来引用全局变量。资产包中的 packages 都是通过 UMD 方式引入的对应内容，如果您引入了 Fusion Next（Demo 中默认引入），那么可以通过此方法直接唤起 Fusion Next 的内容，如弹窗提示：
window.Next.Message.success('成功')
您可以在成员函数中访问到如下变量：
this.statethis.setStatethis.context.appHelper.utilsthis.context.appHelper.constantsthis.context.appHelper.requestHandlerMapthis.context.components
- 读取：每次打开面板时，都会尝试读取 schema 中的 originCode 字段，如果没有，则从 schema 上的字段还原代码；
- 写入：在关闭代码编辑面板（主动点击叉或者点击非代码编辑区块的被动关闭都算）时，将自动写入到 schema 中；您也可以在编辑过程中点击“保存”按钮手动保存；
| 源码面板中 | Schema 中 |
|---|---|
本地数据初始值设置： |
 |
生命周期方法： |
 |
自定义函数： |
 |
编译前全量代码： |
 |
- 异常处理：如果代码解析失败，它将无法被正常保存到 schema 中，此时编辑器会弹层提示：
您可以在这里书写 CSS 内容。它对应 schema 中的 css 字段：
| 源码面板中 | Schema 中 |
|---|---|
 |
 |
如果您书写了视图相关的声明周期方法，那么对应的方法会在视图的特定周期被调用。支持的生命周期函数在《阿里巴巴中后台前端搭建协议规范》中被定义，包含：
{
componentDidMount(): void;
constructor(props: Record<string, any>, context: any);
render(): void;
componentDidUpdate(prevProps: Record<string, any>, prevState: Record<string, any>, snapshot: Record<string, any>): void;
componentWillUnmount(): void;
componentDidCatch(error: Error, info: any): void;
}书写完了函数 / state 后，您可以在右侧的设置器面板中配置对代码的部分。
通常书写代码是为了对接低代码配置中的“变量绑定”、“事件回调”、“条件判断”和“循环”部分的。
{
"componentName": "NextBlockCell",
"id": "node_ockzmje8tf5",
"props": {
"bodyPadding": {
"type": "JSExpression",
"value": "this.state.text",
"mock": ""
}
}
}
{
"componentName": "Filter",
"id": "node_ockzmj0cl11w",
"props": {
"__events": {
"eventDataList": [
{
"type": "componentEvent",
"name": "onSearch",
"relatedEventName": "closeDialog"
}
]
},
"onSearch": {
"type": "JSFunction",
"value": "function(){this.onSearch.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
}
}
}
{
"componentName": "Filter",
"id": "node_ockzmj0cl11w",
"condition": {
"type": "JSExpression",
"value": "this.state.text",
"mock": true
}
}
{
"componentName": "Filter",
"id": "node_ockzmj0cl11w",
"loop": {
"type": "JSExpression",
"value": "this.state.text",
"mock": true
}
}数据源面板主要负责管理低代码中远程数据源内容，通过可视化编辑的方式操作低代码协议中的数据源 Schema，配合 数据源引擎 即可实现低代码中数据源的生产和消费；
数据源面板
面板内包含了数据源创建、删除、编辑、排序、导入导出、复制以及搜索等能力，内置支持了
fecth&JSONP两种常用远程请求类型；
三步创建数据源
// 请求 userList（userList 在数据源面板中定义）
this.dataSourceMap['userList'].load({
data: {}
}).then(res => {})
.catch(error => {});const { userList } = this.state;// 获取数据源面板中定义的值
const { user } = this.state;
// 修改 state 值
this.setState({
user: {}
});fetch函数模版
async onSearchById(value) {
var url = "";
console.log(value.getById)
if (value.getById) {
url = 'http://localhost:5050/Test/GetByIdController/id' + '?id=' + value.getById;
} else {
url = 'http://localhost:5050/test/getcontroller';
}
const { info } = this.state;
const response = await fetch(url, {
method: 'POST', //GET, POST, PUT, DELETE, etc.
mode: 'cors',// no-cors, *cors, same-origin
cache: 'no-cache',// default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin',// include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow',// manual, *follow, error
referrerPolicy: 'no-referrer',// noreferrer, *no-refrrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin,
//请求体
body: JSON.stringify({
id: value.getById
})
});
response.json().then((data) => {
console.log(data);
if (data) {
this.setState({
info: data.data
})
Next.Notification.success({
title: "成功",
style: {
width: 600,
marginLeft: -255
}
});
}
else {
Next.Notification.error({
title: "失败",
style: {
width: 600,
marginLeft: -255
}
})
}
})
}对于高级表格的数据源必须是数组形式的，每个数组元素对应表格中的一行。在表格中所遍历的数组元素中的字段必须为基本数据类型，不可为数组等其他类型。这里我将响应的数据进行了提取操作，JavaScript不支持内部类，我用的JavaScript中的函数进行保存的（也可以在LowcodeComponent类外面再声明一个类进行映射操作）。
Robot(uuid, ip, current_map, current_group, dispatchable, current_order_id, current_order_state, battery_level, confidence, locked, reloc_status, procBusiness) {
return {
"uuid": uuid,
"ip": ip,
"current_map": current_map,
"current_group": current_group,
"dispatchable":dispatchable,
"current_order_id": current_order_id,
"current_order_state": current_order_state,
"battery_level": battery_level,
"confidence": confidence,
"locked": locked,
"reloc_status": reloc_status,
"procBusiness": procBusiness
};
错误提示是在main.scss这个文件里有一行代码错误了。
所以直接找到这个文件对应的这行，然后把这行删掉
@media #{$query} { @content; }高级对话框和高级表单联用会报错
解决方案：手动编辑schema，删除红框处的“段落”可修复
点击出码按钮后会得到一个压缩包，对其进行解压并切换到该目录后，执行命令npm run build将会直接进行打包。
命令:
npm run build
作用：用vue-cli内部集成的webpack，把 .vue, .less, .js 等打包成浏览器可直接执行的代码 html，css，js。
结果：会在项目根目录下创建 /build目录，在这目录下产出打包后的结果。
编辑index.html源码,在引用css与js的地方删除第一个斜杠
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent