跳到主要内容

试用低代码引擎 Demo

访问地址

低代码引擎的 Demo 可以通过如下永久链接访问到:

设计器 demo

注意我们会经常更新 demo,所以您可以通过上述链接得到最新版地址。

低代码引擎 Demo 功能概览

我们可以从 Demo 的项目中看到页面中有很多的区块:

image.png

它主要包含这些功能点:

image.png

顶部:操作区

  • 右侧:撤回和重做、保存到本地、重置页面、预览、异步加载资源

左侧:面板与操作区

  • 大纲面板:可以调整页面内的组件树结构
  • 物料面板:可以查找组件,并在此拖动组件到编辑器画布中
  • 源码面板:可以编辑页面级别的 JavaScript 代码和 CSS 配置
  • 提交 Issue:可以给引擎开发提 bug
  • Schema 编辑:可以编辑页面的底层数据
  • 中英文切换:可以切换编辑器的语言

中部:可视化页面编辑画布区域

  • 点击组件在右侧面板中能够显示出对应组件的属性配置选项
  • 拖拽修改组件的排列顺序
  • 将组件拖拽到容器类型的组件中
  • 复制组件:点击组件右上角的复制按钮
  • 删除组件:点击组件右上角的 X 或者直接使用 Delete

右侧:组件级别配置

  • 选中的组件:从页面开始一直到当前选中的组件位置,点击对应的名称可以切换到对应的组件上
  • 选中组件的配置:当前组件的大类目选项,根据组件类型不同,包含如下子类目:
    • 属性:组件的基础属性值设置
    • 样式:组件的样式配置
    • 事件:绑定组件对外暴露的事件
    • 高级:循环、条件渲染与 key 设置

深入使用低代码引擎 Demo

我们在低代码引擎 Demo 中直接内置了产品使用文档,对常见场景中的使用进行了向导,它的入口如下:

image.png

如果暂时没有看到对应的产品使用文档,可以通过此永久链接直接访问:https://lowcode-engine.cn/site/docs/demoUsage/intro