低代码引擎的 Demo 可以通过如下永久链接访问到:
node 版本推荐 16.18.0。
可以安装 n 来管理和变更 node 版本。
npm install -g n
n 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”时将修改引擎中的值,此外低代码引擎中的所有操作都可能修改到 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.state
this.setState
this.context.appHelper.utils
this.context.appHelper.constants
this.context.appHelper.requestHandlerMap
this.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目录,在这目录下产出打包后的结果。