低代码开发平台（LCDP）是一种以低代码或无代码的方式快速构建和配置应用程序，以完成其开发和上线。可视化低代码是一种可视化DSL，它的优势更多来自于可视化，相对而言，它的局限性也来自于可视化，复杂的业务逻辑用低代码可能更复杂。低代码应该是对特定领域问题的简化和抽象，单纯将原来的编码工作转换成GUI模式意义不大。

一

背景

随着京东微信域名业务与腾讯的合作不断加深，小程序作为流量载体的需求越来越大。从2017年开始，C-1、C-2、C-3等部门都有了自己的业务小程序，至今集团内已有上万个微信小程序。这么多小程序，有没有共性？能不能相互赋能？答案是肯定的。基于多方面的考虑，我们开始了对小程序建设的研究和规划。

二

架构设计

1.思考

建设的本质是为了提高效率，是学习成本低、快速上手、垂直于某一业务线比较好，还是通用到可以满足任何业务场景，但学习成本高比较好？

太笼统：接入成本高、学习成本高、开发成本高

太垂直：访问效率高，学习成本低，扩展性差

2. 功能

1. 零代码或低代码快速生成应用程序

2.提供可视化的开发界面

3.通过拖放+配置构建项目

3、分层架构+iOC架构

分层：系统水平分为若干层，每层都有明确的角色和分工，不需要知道其他层的细节，各层之间通过接口和协议进行通信。

IOC，简单来说就是把一个复杂的系统分解成相互协作的对象，这些对象类被封装起来之后，内部实现对外界透明，从而降低解决问题的复杂性，并且能够灵活地重用和扩展。IOC理论提出的思想大体是这样的：借助“第三方”来实现有依赖关系的对象解耦。

4. 流程编排

理想的流程编排节点应该是更加抽象、更有凝聚力的业务节点，来表达业务流程的流动。然而，这些节点的设计和开发其实是一项非常具有挑战性的任务。

5. 约定优于配置

前端在整个研发流程中处于下游，如果上游的需求描述、UI 设计、后端接口协议没有统一的规范，很多工作都是规范不一致导致的各种兼容性处理，没有复用和抽象。为了简化构建流程，降低构建成本，达到开箱即用的效果，需求规范、设计规范、组件规范、接口规范缺一不可。未来整个前端的效率和开发都会更加先进。

6. 建筑要求的权衡

做平台要做的是减法，要思考什么不做。平台本身不要求支持 100% 的需求，如果那样做，就是把代码转成 GUI，这样的平台没有价值，还不如直接开发代码。我们要解决的是 80% 的通用业务场景，剩下的 20% 我们有两种方式去支持。

1、代码输出：构建的产品以源代码形式交付，以供二次开发。

2、业务组件：对于组件类的复杂交互或者数据处理，可以开发业务组件并与平台结合，完成整个需求的构建。

三

平台介绍

即时设计平台是C端楼层即时搭建的开发平台，支持导入设计稿URL在此基础上完成前端可视化搭建，还支持完成一句话需求，搭建好的楼层自动同步ihub楼层市场，提供给、等搭建平台使用。

01

功能

即时设计提供画布内容类型（、、文本、列表）的添加、删除、层级调整、复制等，样式配置、数据接口配置、状态管理配置、内容与数据绑定、点击交互与曝光交互、设计稿导入及转化为包含样式的画布内容、画布内容即时预览、画布内容二维码小程序预览、代码查看并支持二次编辑、自然语言对话操作页面功能调整等。

页面结构主要由上下两层结构组成，分为顶部菜单区和主区域。主题区为四栏结构，分别为“选择与绘制工具”区域，“结构、楼层、、我的”水平标签区，“画布与预览”区域，“元素样式、交互、绑定功能”垂直标签区。

02‍

顶部菜单区

菜单分为左、中、右布局

页面标题区域

页面标题内容为“即时设计”

操作按钮区

操作按钮包括以下内容：

功能输入按钮区

包含“数据源”、“导入”、“预览”图标功能入口按钮。

数据源

数据源页面级弹窗内容包括数据请求和状态管理两部分。

数据请求包含三列：请求列表、请求信息配置、响应信息配置。

状态管理支持全局数据的配置，支持字符串、数字、布尔值、数组、对象类型的数据，方便数据接口、绑定、交互，并支持导出到样式、材质区域。

03‍

左侧的绘图工具区域（画布）

该区域是区域支持的绘图工具类型，包括“()”、“()”、“()”、“text(text)”、“list(list)”五种。

04‍

左侧标签页

当前区域包含4个水平标签，分别是“结构”、“楼层”、“窗口小部件”和“我的”。

结构（画布）

这个结构是与画布区域中的元素对应的树结构的分层列表。

楼层（已公布公共楼层）

楼层是展示保存并发布到市场的公共楼层组件，按照建立的一级分类（图片、广告、商品、导航、权益）和二级分类（平铺、横滑、轮播、嵌套、浮层、无限下拉、吸顶、底部、侧边栏、未分类）展示，一级分类以水平标签的方式分组展示，二级分类以每级一级分类下方两列平铺展示，展示楼层的预览图和名称。

小部件（已发布的公共小部件）

是已经保存并发布到市场的公共，按照建立的一级分类（图片、文字、广告、商品、导航、权利）、图片二级分类（图片、文字、按钮、蒙版）、商品二级分类（商品卡片、商品图片、商品名称、商品价格、商品标签、商品按钮）、权利二级分类（优惠券、精斗、红包）进行展示。一级分类通过水平Tab进行分组，二级分类在每个一级分类下以两列Tile展示，展示的预览图和名称。

矿

“我的”选项卡显示当前登录用户保存的楼层和小部件列表。

05‍

中央画布区域

该区域分为两个区域：顶部功能按钮区域、画布区域。

顶部功能按钮区为水平居中的按钮区域，该区域包括：

画布分为编辑区和预览区，有左右结构。

画布编辑区

当前区域是通过导入或者手动选择画布工具在画布区域绘制的内容区域。

在此区域，您可以执行以下操作：

画布预览区域

当前区域是画布区域内的内容模拟PC端实际渲染的显示区域，用于即时预览、生成预览图。

特征：

06

右丝带

功能区包括样式配置区、交互配置区、绑定配置区、素材配置区，以右侧垂直标签的形式展示。

样式（配置区域）

样式配置区显示选中节点元素的主要样式信息配置列表及导出配置按钮。

导出配置按钮位于“样式”标题右侧，点击后展开抽屉，显示所有样式列表（无分组），支持勾选和编辑别名，当选择Root或组件节点时，样式区域会显示勾选的导出配置项，方便快速修改指定配置值。

样式列表内容以实用的分组方式展示，包括：

交互（配置区）

交互区显示选中节点元素的点击交互/曝光交互功能及导出配置按钮。

导出配置按钮位于“交互”标题右侧，点击可展开抽屉显示所有跳转列表，无需分组，支持勾选、编辑别名，当选择Root或组件节点时，交互区域会显示勾选的导出配置项，方便快速修改指定配置值。

其中点击交互和曝光交互采用水平标签形式布局，点击交互和曝光交互均支持添加事件，可同时添加的事件包括前置条件、跳转、接口调用、状态管理、重新渲染等，只有点击交互才可以添加的事件为点击追踪点，只有曝光交互才可以添加的事件为曝光追踪点。

绑定（配置区域）

绑定区的内容包括数据绑定、数据处理、显式绑定和隐式绑定。

物料（配置区）

素材区在选择Root节点时显示，可点击展开，其内容显示数据源或状态管理配置中勾选的导出项的配置项，对于某些高频变化的值，单独显示在此区域，方便快速修改。

07

08

问答助手

创建楼层

修改设置

结尾

上一则评论