mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-10 18:03:01 +00:00
docs: replace yuque links (#1332)
This commit is contained in:
林熠
GitHub
parent
6ae7c1bee5
commit
c314c952eb
@ -33,7 +33,7 @@ sidebar_position: 2
|
||||
### 不同优先级的示例
|
||||
#### 【支持快】通过线上 Demo 地址 + 控制台输入 API 可复现。
|
||||
**示例**
|
||||
|
||||
|
||||
复现步骤：
|
||||
|
||||
- 打开线上 demo
|
||||
@ -70,13 +70,13 @@ window.AliLowCodeEngine.project.openDocument('docl4xkca5b')
|
||||
#### 【支持稍慢】通过线上 demo + 完整操作步骤可复现
|
||||
**示例**
|
||||
1.使用 antd 组件
|
||||
|
||||
|
||||
|
||||
2.拖拽这个组件
|
||||
|
||||
|
||||
|
||||
3.配置该属性值为 100
|
||||
|
||||
|
||||
|
||||
期望效果：
|
||||
|
||||
@ -84,26 +84,26 @@ window.AliLowCodeEngine.project.openDocument('docl4xkca5b')
|
||||
|
||||
#### 【支持稍慢】通过线上 demo + 变更代码可复现，并清楚的说明变更代码的位置和内容
|
||||
**示例**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 【支持慢】有完整的项目地址，下载下来可直接安装依赖并启动复现的
|
||||
由于完整的项目中有很多冗余的信息，这部分排查起来十分耗时且困难。不推荐使用改方式。
|
||||
|
||||
#### 【不保证提供支持】其他
|
||||
##### 只有标题没有复现步骤
|
||||
|
||||
|
||||
|
||||
##### 复现步骤不清晰
|
||||
|
||||
|
||||
|
||||
##### 和引擎无关的
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar_position: 0
|
||||
|
||||
引擎直接提供 9 大类 API，以及若干间接的 API，具体如下图：
|
||||
|
||||
|
||||
|
||||
|
||||
### API 设计约定
|
||||
一些 API 设计约定：
|
||||
|
||||
@ -135,4 +135,4 @@ init({
|
||||
```
|
||||
|
||||
在引擎中即可这样使用。
|
||||
|
||||
|
||||
|
||||
@ -151,7 +151,7 @@ material.addBuiltinComponentAction({
|
||||
condition: true,
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
### removeBuiltinComponentAction
|
||||
移除设计器辅助层的指定 action
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar_position: 3
|
||||
# 模块简介
|
||||
引擎编排模块中包含多种模型，包括[项目模型（project）](#DADnF)、[文档模型（document-model）](#lp7xO)、[节点模型（node）](#m0cJS)、[节点孩子模型（node-children）](#W8seq)、[属性集模型（props）](#IJeRY)以及[属性模型（prop）](#w1diM)。
|
||||
他们的依赖关系如下图：
|
||||
|
||||
|
||||
在文档模型内部，又有一些引申模型，比如[历史操作（history）](#xvIKj)、[画布节点选中（selection）](#GtFkP)、[画布节点悬停（detecting）](#Tjt05)等。
|
||||
|
||||
整个模型系统，以项目模型为最顶层的模型，其他模型实例均需要通过 project 来获得，比如 project.currentDocument 来获取当前的文档模型，project.currentDocument.nodesMap 来获取当前文档模型里所有的节点列表。
|
||||
|
||||
@ -5,10 +5,10 @@ sidebar_position: 1
|
||||
## 模块简介
|
||||
面板 API 提供了面板扩展和管理的能力，如下图蓝色内容都是扩展出来的。
|
||||
|
||||
|
||||
|
||||
|
||||
页面上可以扩展的区域共 5 个，具体如下：
|
||||
|
||||
|
||||
### 基本概念
|
||||
#### 扩展区域位置 (area)
|
||||
##### topArea
|
||||
|
||||
@ -3,28 +3,28 @@ title: 1. 试用低代码引擎 Demo
|
||||
sidebar_position: 0
|
||||
---
|
||||
低代码编辑器中的区块主要包含这些功能点：
|
||||
|
||||
|
||||
|
||||
## 分区块功能介绍
|
||||
### 左侧：面板与操作区
|
||||
#### 物料面板
|
||||
可以查找组件，并在此拖动组件到编辑器画布中
|
||||
|
||||
|
||||
|
||||
#### 大纲面板
|
||||
可以调整页面内的组件树结构：
|
||||
|
||||
|
||||
可以在这里打开或者关闭模态浮层的展现：
|
||||
|
||||
|
||||
|
||||
|
||||
#### 源码面板
|
||||
可以编辑页面级别的 JavaScript 代码和 CSS 配置
|
||||
|
||||
|
||||
|
||||
#### Schema 编辑
|
||||
【开发者专属】可以编辑页面的底层 Schema 数据。
|
||||
|
||||
|
||||
搭配顶部操作区的“保存到本地”和“重置页面”功能，可以实验各种 schema 对低代码页面的改变。
|
||||
|
||||
它们操作的数据关系是：
|
||||
@ -36,45 +36,45 @@ sidebar_position: 0
|
||||
#### 中英文切换
|
||||
可以切换编辑器的语言；注：需要组件配置配合。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 中部：可视化页面编辑画布区域
|
||||
|
||||
点击组件在右侧面板中能够显示出对应组件的属性配置选项
|
||||
|
||||
|
||||
|
||||
拖拽修改组件的排列顺序
|
||||
|
||||
|
||||
|
||||
将组件拖拽到容器类型的组件中，注意拖拽时会在右侧提示当前的组件树。
|
||||
|
||||
|
||||
|
||||
## 右侧：组件级别配置
|
||||
|
||||
### 选中的组件
|
||||
从页面开始一直到当前选中的组件位置，点击对应的名称可以切换到对应的组件上。
|
||||
|
||||
|
||||
|
||||
### 选中组件的配置
|
||||
当前组件的大类目选项，根据组件类型不同，包含如下子类目：
|
||||
|
||||
#### 属性
|
||||
组件的基础属性值设置
|
||||
|
||||
|
||||
|
||||
#### 样式
|
||||
组件的样式配置，如文字：
|
||||
|
||||
|
||||
|
||||
#### 事件
|
||||
绑定组件对外暴露的事件。
|
||||
|
||||
|
||||
|
||||
#### 高级
|
||||
循环、条件渲染与 key 设置。
|
||||
|
||||
|
||||
|
||||
## 顶部：操作区
|
||||
|
||||
### 撤回和重做
|
||||
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ sidebar_position: 0
|
||||
|
||||
|
||||
将他们拖到画布之中：
|
||||
|
||||
|
||||
### 配置组件
|
||||
|
||||
选中刚拖入的“查询筛选”组件，您可以配置此组件：
|
||||
@ -21,7 +21,7 @@ sidebar_position: 0
|
||||
|
||||
|
||||
掌握组件配置功能，我们就可以完成一个常用的查询框的配置：
|
||||
|
||||
|
||||
|
||||
### 绑定数据
|
||||
|
||||
@ -98,7 +98,7 @@ class LowcodeComponent extends Component {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
将 Loading 的“是否显示”字段绑定 `this.state.loading` 后，我们可以看到，这里暴露了一个插槽。插槽是可以任意扩展的预设部分，我们可以把其他的部分拖进插槽：
|
||||
|
||||
@ -110,16 +110,16 @@ class LowcodeComponent extends Component {
|
||||
### 列挂钩浮层
|
||||
|
||||
为了能够让表格里的操作挂钩浮层，我们先拖入一个浮层：
|
||||
|
||||
|
||||
|
||||
使用大纲树能够临时显示和隐藏此浮层：
|
||||
|
||||
|
||||
|
||||
我们给表格增加一个数据列：
|
||||
|
||||
|
||||
然后配置它的行为为“弹窗”：
|
||||
|
||||
|
||||
|
||||
实现的效果如下：
|
||||
|
||||
@ -127,10 +127,10 @@ class LowcodeComponent extends Component {
|
||||
### 事件回调
|
||||
|
||||
上述功能点中，我们是把操作行为绑定在数据列上的，这一节我们绑定到操作列中。在操作列按钮处，点击下方的“添加一项”：
|
||||
|
||||
|
||||
|
||||
点击左侧的详情按钮，配置它的事件回调：
|
||||
|
||||
|
||||
|
||||
代码侧，我们配置这个回调函数：
|
||||
```javascript
|
||||
|
||||
@ -5,18 +5,18 @@ sidebar_position: 1
|
||||
## 组件操作
|
||||
### 画布操作
|
||||
点击组件在右侧面板中能够显示出对应组件的属性配置选项
|
||||
|
||||
|
||||
|
||||
拖拽修改组件的排列顺序
|
||||
|
||||
|
||||
|
||||
拖拽时会在右侧提示当前的组件树。
|
||||
|
||||
|
||||
|
||||
### 组件控制
|
||||
点击组件右上角的复制按钮，或者按下 `ctrl + c` 再按下 `ctrl + v`，可以将其复制；
|
||||
点击组件右上角的删除按钮，或者直接使用 `Delete` 键，可以将其删除。
|
||||
|
||||
|
||||
|
||||
### 选择组件切换
|
||||
|
||||
@ -28,7 +28,7 @@ sidebar_position: 1
|
||||
- `→` 向右选择组件
|
||||
|
||||
可以 hover 到组件操作辅助区的第一项来选中组件的父级节点：
|
||||
|
||||
|
||||
|
||||
### 可扩展项简述
|
||||
|
||||
@ -37,12 +37,12 @@ sidebar_position: 1
|
||||
## Slot 区块
|
||||
|
||||
React 中，可以定义一个 prop 选项为 `JSXElement` 或 `(...args) => JSXElement` 的形式，这个形式在低代码画布中，被定义为 Slot，允许往其内部拖入组件，进行符合直觉的操作。
|
||||
|
||||
|
||||
|
||||
### 锁定 Slot
|
||||
|
||||
您可以对 Slot 进行锁定操作，锁定后内部内容无法选中；
|
||||
|
||||
|
||||
|
||||
在组件树可以解除操作。
|
||||
|
||||
@ -54,7 +54,7 @@ React 中，可以定义一个 prop 选项为 `JSXElement` 或 `(...args) => JSX
|
||||
|
||||
- 侵入型：组件编辑态下，会往组件内传入 `__designMode: 'design'`，可以在组件中进行相应处理；
|
||||
|
||||
|
||||
|
||||
|
||||
- 双入口型：通过配置物料的 editUrls，加载专属于编辑态组件的物料。pro-layout 使用的是这种方式
|
||||
```json
|
||||
|
||||
@ -6,7 +6,7 @@ sidebar_position: 3
|
||||
|
||||
## 面板功能拆解
|
||||
|
||||
|
||||
|
||||
|
||||
### 代码编辑面板
|
||||
|
||||
@ -15,8 +15,8 @@ sidebar_position: 3
|
||||
|
||||
| 编译前 | 编译后 |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
|
||||
> 注：因为编译结果会被 `@babel/runtime` 干扰，目前面板不支持 `async await`或 `{ ...arr }` 形态的语法编译。如果您需要此类编译，您可以考虑在读取 schema 中的 `originCode` 之后自己手动通过 babel 编译。
|
||||
@ -28,7 +28,7 @@ sidebar_position: 3
|
||||
```typescript
|
||||
window.Next.Message.success('成功')
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### 局部变量引用
|
||||
|
||||
@ -48,18 +48,18 @@ window.Next.Message.success('成功')
|
||||
| 源码面板中 | schema 中 |
|
||||
| --- | --- |
|
||||
| 本地数据初始值设置：
|
||||
 |  |
|
||||
 |  |
|
||||
| 生命周期方法：
|
||||
 |  |
|
||||
 |  |
|
||||
| 自定义函数：
|
||||
 |  |
|
||||
 |  |
|
||||
| 编译前全量代码：
|
||||
 |  |
|
||||
 |  |
|
||||
|
||||
|
||||
- 异常处理：如果代码解析失败，它将无法被正常保存到 schema 中，此时编辑器会弹层提示：
|
||||
|
||||
|
||||
|
||||
|
||||
### 样式编辑面板
|
||||
|
||||
@ -67,7 +67,7 @@ window.Next.Message.success('成功')
|
||||
|
||||
| 源码面板中 | Schema 中 |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
|
||||
## 对接代码
|
||||
@ -92,8 +92,8 @@ window.Next.Message.success('成功')
|
||||
通常书写代码是为了对接低代码配置中的“变量绑定”、“事件回调”、“条件判断”和“循环”部分的。
|
||||
|
||||
#### 变量绑定
|
||||
|
||||
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
"componentName": "NextBlockCell",
|
||||
@ -110,8 +110,8 @@ window.Next.Message.success('成功')
|
||||
|
||||
|
||||
#### 事件回调
|
||||
|
||||
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
"componentName": "Filter",
|
||||
@ -135,8 +135,8 @@ window.Next.Message.success('成功')
|
||||
```
|
||||
|
||||
#### 条件判断
|
||||
|
||||
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
"componentName": "Filter",
|
||||
@ -150,8 +150,8 @@ window.Next.Message.success('成功')
|
||||
```
|
||||
|
||||
#### 循环
|
||||
|
||||
|
||||
|
||||
|
||||
```json
|
||||
{
|
||||
"componentName": "Filter",
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar_position: 0
|
||||
## 概述
|
||||
组件面板顾名思义就是承载组件的面板，组件面板会获取并解析传入给低代码引擎的资产包数据 (数据结构[点此查看](https://lowcode-engine.cn/assets))，得到需要被展示的组件列表，并根据分类、排序规则对组件进行排列，同时也提供了搜索功能。
|
||||
|
||||
|
||||
|
||||
## 组件信息
|
||||
组件面板承载的组件信息有：
|
||||
|
||||
@ -19,7 +19,7 @@ sidebar_position: 0
|
||||
|
||||
其中标题和截图是我们能够看到的，schema 片段则是拖拽到设计器时会自动插入页面 schema 中，面板会根据分组、分类来对组件进行排列；
|
||||
这些组件信息均通过资产包数据获取，字段对应关系如下图所示：
|
||||
|
||||
|
||||
## 组件分组、分类排序
|
||||
组件面板会把相同分组的组件放在同一个 tab 下，相同分类的组件放在同一个 collapse 中，同时也支持对 tab 和 collapse 进行排序；
|
||||
由于是整体性的排序，组件自身的信息无法决定此排序，因此在资产包数据根节点新增了 sort 字段用于指定分组和分类的排序，具体定义在[《低代码引擎资产包协议规范》](https://lowcode-engine.cn/assets)2.4 sort 章节；
|
||||
|
||||
@ -5,14 +5,14 @@ sidebar_position: 4
|
||||
## 🪚 概述
|
||||
数据源面板主要负责管理低代码中远程数据源内容，通过可视化编辑的方式操作低代码协议中的数据源 Schema，配合 [数据源引擎](/site/docs/guide/design/datasourceEngine) 即可实现低代码中数据源的生产和消费；
|
||||
|
||||
|
||||
|
||||
|
||||
数据源面板
|
||||
## ❓如何使用
|
||||
> 面板内包含了数据源创建、删除、编辑、排序、导入导出、复制以及搜索等能力，内置支持了 `fecth` & `JSONP`两种常用远程请求类型；
|
||||
|
||||
### 三步创建一个数据源
|
||||
|
||||
|
||||
三步创建数据源
|
||||
|
||||
### 参数详解
|
||||
|
||||
@ -5,7 +5,7 @@ sidebar_position: 2
|
||||
# 设置器介绍
|
||||
## 展示区域
|
||||
设置器，又称为 Setter，主要展示在编辑器的右边区域，如下图：
|
||||
|
||||
|
||||
其中包含 属性、样式、事件、高级
|
||||
|
||||
- 属性：展示该物料常规的属性
|
||||
@ -18,7 +18,7 @@ sidebar_position: 2
|
||||
## 设置器
|
||||
上述区域中是有多项设置器的，对于一个组件来说，每一项配置都对应一个设置器，比如我们的配置是一个文本，我们需要的是文本设置器，我们需要配置的是数字，我们需要的就是数字设置器。
|
||||
下图中的标题和按钮类型配置就分别是文本设置器和下拉框设置器。
|
||||
|
||||
|
||||
我们提供了常用的设置器作为内置设置器，也提供了定制能力帮助大家开发特定需求的设置器。
|
||||
# 内置设置器
|
||||
| **预置 Setter** | **用途** |
|
||||
|
||||
@ -6,28 +6,28 @@ tags: [FAQ]
|
||||
渲染唯一标识（key）和 React 中组件的 key 属性的原理是一致的，都是为了在渲染场景或者组件切换的场景中唯一标识一个组件。
|
||||
|
||||
你可以在组件右侧配置面板的「高级」中看到此配置项，该配置项一般配合「是否渲染」和「循环」功能使用。
|
||||
|
||||
|
||||
|
||||
## 以下场景必需设置「渲染唯一标识」
|
||||
#### 场景一：同类组件切换
|
||||
以下场景中，当「爱好」选择「游戏」时显示「最喜欢的游戏」，选择「运动」时显示「最喜欢的运动」
|
||||
|
||||
|
||||
|
||||
配置方式如下：
|
||||
|
||||
1. 增加变量数据源：hobby
|
||||
2. 「最喜欢的游戏」表单标识设置为 game，「是否渲染」绑定变量「state.hobby === '游戏'」
|
||||
|
||||
|
||||
|
||||
|
||||
3. 「最喜欢的运动」表单标识设置为 sport，「是否渲染」绑定变量「state.hobby === '运动'」
|
||||
4. 「爱好」设置 onChange 动作
|
||||
|
||||
|
||||
|
||||
|
||||
5. 「提交」按钮绑定 onClick 动作
|
||||
|
||||
|
||||
|
||||
|
||||
按以上配置（不配置渲染唯一标识），确实可以实现切换爱好时下方的文本框切换，但在提交数据时会发现，即使选择了「运动」，提交的时候 sport 字段是「最喜欢的游戏」的值。
|
||||
|
||||
|
||||
@ -7,14 +7,14 @@ tags: [FAQ]
|
||||
|
||||
- [Antd Table 下 button 点击事件怎么拿到行数据？](https://github.com/alibaba/lowcode-engine/issues/341)
|
||||
## 方式 1
|
||||
|
||||
|
||||
|
||||
参考 fusion protable，将操作列直接耦合 button 组件，因为 col.render 函数能拿到 行数据 record，那么 pro-table 组件封装的时候，就可以在渲染操作列按钮的时候，将 col.render 参数透传给 button 组件
|
||||
|
||||
## 方式 2
|
||||
slot + 扩展参数
|
||||
|
||||
|
||||
|
||||
|
||||
将扩展参数写成：
|
||||
```json
|
||||
|
||||
@ -9,13 +9,13 @@ tags: [FAQ]
|
||||
|
||||
### 通过资产包
|
||||
|
||||
|
||||
|
||||
|
||||
就可以在引擎代码中访问到 moment
|
||||
|
||||
|
||||
|
||||
PS：需要在 packages 中有相关的资源配置，例如：
|
||||
|
||||
|
||||
|
||||
否则在画布中可能会访问不到对应的资源。
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ title: 设置面板中的高级 tab 如何配置
|
||||
sidebar_position: 7
|
||||
tags: [FAQ]
|
||||
---
|
||||
|
||||
|
||||
|
||||
默认这个 tab 下的内容为引擎内置，如需要定制，可以使用以下 API
|
||||
[https://lowcode-engine.cn/docV2/mu7lml#lIK37](https://lowcode-engine.cn/docV2/mu7lml#lIK37)
|
||||
[https://lowcode-engine.cn/site/docs/api/material#物料元数据管道函数](https://lowcode-engine.cn/site/docs/api/material#物料元数据管道函数)
|
||||
|
||||
@ -19,7 +19,7 @@ AliLowCodeEngine.material.componentsMap
|
||||
```
|
||||
查看物料配置是否正常。
|
||||
|
||||
|
||||
|
||||
|
||||
如果正常继续。
|
||||
LowCodeEngine 需要升级到 1.0.10
|
||||
|
||||
@ -15,4 +15,4 @@ AliLowCodeEngine.skeleton.add({
|
||||
});
|
||||
```
|
||||
这里设置 index 为负数，可以将其调整到第一的位置。
|
||||
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ tags: [FAQ]
|
||||
---
|
||||
## 简单场景
|
||||
可以利用 props.__designMode
|
||||
|
||||
|
||||
|
||||
设计态中，__designMode 值为 "design"
|
||||
|
||||
@ -13,11 +13,11 @@ tags: [FAQ]
|
||||
|
||||
## 复杂场景
|
||||
在资产包里定义 editUrls
|
||||
|
||||
|
||||
|
||||
### editUrls
|
||||
在 lowcode/xx/ 下新建一个 view.tsx
|
||||
|
||||
|
||||
|
||||
再执行
|
||||
```json
|
||||
@ -26,4 +26,4 @@ npm run lowcode:build
|
||||
|
||||
之后，build/lowcode 目录下既有 view.js，可作为 editUrls 配置在资产包中。
|
||||
|
||||
|
||||
|
||||
|
||||
@ -61,7 +61,7 @@ condition: () => false,
|
||||
|
||||
### 配置没有生效
|
||||
查看组件中的 schema，对应的配置是否已经正确设置。
|
||||
|
||||
|
||||
|
||||
没有正确设置上可能的原因是
|
||||
1.snippets 中没有默认值
|
||||
|
||||
@ -12,7 +12,7 @@ tags: [FAQ]
|
||||
在项目的 externals 配置里加[一行配置](https://github.com/alibaba/lowcode-demo/blob/f8afad0df3190565caccc0a1dfd750dbf84c680f/build.json#L16)
|
||||
|
||||
## 其他项目
|
||||
[相关文档](https://lowcode-engine.cn/docV2/start-with-lce#OMRA2)
|
||||
[相关文档](/site/docs/guide/create/useEditor#引入-umd-包资源)
|
||||
### webpack
|
||||
[https://webpack.docschina.org/configuration/externals/](https://webpack.docschina.org/configuration/externals/)
|
||||
|
||||
|
||||
@ -5,6 +5,6 @@ tags: [FAQ]
|
||||
---
|
||||
低代码引擎在架构上是和具体语言无关的，通过一定的扩展和插件是可以生成 Vue 页面代码的。
|
||||
如果只是用现有的基于 React 的 fusion 物料来搭建，只是在最终出码的时候生成 Vue 页面代码，那您需要准备一套和 fusion 兼容的 vue 物料，并定制个出码方案，将[下面的一些出码插件](https://github.com/alibaba/lowcode-engine/blob/main/modules/code-generator/src/solutions/icejs.ts)替换成生成 Vue 框架的即可：
|
||||
|
||||
详细定制方案可以参考下[《自定义出码》](https://lowcode-engine.cn/docV2/cplfv0#857ba793)。
|
||||
如果您希望在搭建的时候也使用 Vue 的物料，则还需要扩展定制入料、画布和渲染器等模块，详细方案请参考下[《扩展低代码编辑器》](https://lowcode-engine.cn/docV2/srdo3s)
|
||||
|
||||
详细定制方案可以参考下[《自定义出码》](/site/docs/guide/expand/runtime/codeGeneration#5自定义出码)。
|
||||
如果您希望在搭建的时候也使用 Vue 的物料，则还需要扩展定制入料、画布和渲染器等模块，详细方案请参考下[《扩展低代码编辑器》](/site/docs/guide/expand/editor/summary)
|
||||
|
||||
@ -5,7 +5,7 @@ tags: [FAQ]
|
||||
---
|
||||
如果您是自己配置的引擎打包，那么可能会遇到这个问题。
|
||||
|
||||
|
||||
|
||||
|
||||
问题的根源是 code-editor 插件运行时直接依赖了 babel 来完成 jsx 编译，babel 从 7.17.0 开始依赖了使用 ESM 编写的 @ampproject/remapping@2.1.0。如果打包工具无法正确处理 ESM，则可能报错。
|
||||
|
||||
|
||||
@ -32,7 +32,6 @@ create 接收三个参数，第一个是 DataSource，对于运行时渲染和
|
||||
```typescript
|
||||
/**
|
||||
* 数据源对象--运行时渲染
|
||||
* @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#XMeF5
|
||||
*/
|
||||
export interface DataSource {
|
||||
list: DataSourceConfig[];
|
||||
@ -41,7 +40,6 @@ export interface DataSource {
|
||||
|
||||
/**
|
||||
* 数据源对象
|
||||
* @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#XMeF5
|
||||
*/
|
||||
export interface DataSourceConfig {
|
||||
id: string;
|
||||
@ -96,7 +94,6 @@ export interface RuntimeDataSourceConfig {
|
||||
|
||||
/**
|
||||
* 数据源对象
|
||||
* @see https://yuque.antfin-inc.com/mo/spec/spec-low-code-building-schema#XMeF5
|
||||
*/
|
||||
export interface RuntimeDataSource {
|
||||
list: RuntimeDataSourceConfig[];
|
||||
|
||||
@ -194,7 +194,7 @@ ReactDOM.render((
|
||||
画布的渲染和预览模式的渲染的区别在于，画布的渲染和设计器之间是有交互的。所以在这里我们新增了一层 `Simulator` 作为设计器和渲染的连接器。
|
||||
`Simulator` 是将设计器传入的 `DocumentModel` 和组件/库描述转成相应的 Schema 和 组件类。再调用 Render 层完成渲染。我们这里介绍一下它提供的能力。
|
||||
##### 整体架构
|
||||
|
||||
|
||||
|
||||
- `Project`：位于顶层的 Project，保留了对所有文档模型的引用，用于管理应用级 Schema 的导入与导出。
|
||||
- `Document`：文档模型包括 Simulator 与数据模型两部分。Simulator 通过一份 Simulator Host 协议与数据模型层通信，达到画布上的 UI 操作驱动数据模型变化。通过多文档的设计及多 Tab 交互方式，能够实现同时设计多个页面，以及在一个浏览器标签里进行搭建与配置应用属性。
|
||||
@ -207,7 +207,7 @@ ReactDOM.render((
|
||||
- 通用交互模型：内置了拖拽、活跃追踪、悬停探测、剪贴板、滚动、快捷键绑定。
|
||||
|
||||
##### 模拟器介绍
|
||||
|
||||
|
||||
|
||||
- 运行时环境：从运行时环境来看，目前我们有 React 生态、Rax 生态。而在对外的历程中，我们也会拥有 Vue 生态、Angular 生态等。
|
||||
- 布局模式：不同于 C 端营销页的搭建，中后台场景大多是表单、表格，流式布局是主流的选择。对于设计师、产品来说，是需要绝对布局的方式来进行页面研发的。
|
||||
|
||||
@ -123,7 +123,7 @@ console.log(result); // 出码结果 (默认是递归结构描述的，可以传
|
||||
|
||||
### 5）自定义出码
|
||||
前端框架灵活多变，默认内置的出码方案很难满足所有人的需求，好在此代码生成器支持非常灵活的插件机制 -- 内置功能大多都是通过插件完成的（在 `src/plugins`下），比如：
|
||||
|
||||
|
||||
所以您可以通过添加自己的插件或替换掉默认内置的插件来实现您的自定义功能。
|
||||
为了方便自定义出码方案，出码模块还提供自定义出码方案的脚手架功能，即执行下面脚本即可生成一个自定义出码方案：
|
||||
```shell
|
||||
|
||||
@ -19,7 +19,7 @@ sidebar_position: 2
|
||||
几点要求：
|
||||
|
||||
1. commit message 格式遵循 [ConvensionalCommits](https://www.conventionalcommits.org/en/v1.0.0/#summary)
|
||||
|
||||
|
||||
2. 请按照一个 bugfix / feature 对应一个 commit，假如不是，请 rebase 后再提交 MR，不要一堆无用的、试验性的 commit。
|
||||
|
||||
好处：从引擎的整体 commit 历史来看，会很清晰，**每个 commit 完成一件确定的事，changelog 也能自动生成**。另外，假如因为某个 commit 导致了 bug，也很容易通过 rebase drop 等方式快速修复。
|
||||
|
||||
@ -841,7 +841,7 @@ props 数组下对象字段描述：
|
||||
| extraProps.setValue | setter 内容修改时调用，开发者可在该函数内部修改节点 schema 或者进行其他操作 | Function | (target: SettingTarget, value: any) => void; |
|
||||
|
||||
|
||||
根据属性值类型 propType，确定对应控件类型 (setter) ，详见 [https://lowcode-engine.cn/docV2/grfylu](https://lowcode-engine.cn/docV2/grfylu)
|
||||
根据属性值类型 propType，确定对应控件类型 (setter) 。
|
||||
|
||||
|
||||
###### 2.2.2.4.2 通用扩展面板支持性配置 supports (AA)
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
{
|
||||
// 本例是一个非常简单的 Hello world 页面
|
||||
// Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
|
||||
version: '1.0.0',
|
||||
componentsMap: [
|
||||
{
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
{
|
||||
// 本例是一个比较复杂的，带有循环和条件渲染的，以及有各种事件处理函数的页面
|
||||
// Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
|
||||
version: '1.0.0',
|
||||
componentsMap: [
|
||||
{
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
{
|
||||
// 本例是一个路由测试页面，里面有几个页面，相互之间有跳转关系的
|
||||
// Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
|
||||
version: '1.0.0',
|
||||
componentsMap: [
|
||||
{
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
{
|
||||
// 这是一个关于国际化的 schema 示例
|
||||
// Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
|
||||
version: '1.0.0',
|
||||
componentsMap: [
|
||||
{
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
{
|
||||
// 这是一个关于国际化的 schema 示例
|
||||
// Schema 参见：https://yuque.antfin-inc.com/mo/spec/spec-materials#eNCJr
|
||||
version: '1.0.0',
|
||||
componentsMap: [
|
||||
{
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
本模块负责物料接入，能自动扫描、解析源码组件，并最终产出一份符合《中后台搭建组件描述协议》的 **JSON Schema**。
|
||||
|
||||
详见[文档](https://lowcode-engine.cn/docV2/yhgcqb)。
|
||||
详见[文档](https://lowcode-engine.cn/site/docs/guide/design/materialParser)。
|
||||
|
||||
## demo
|
||||
|
||||
|
||||
@ -123,7 +123,7 @@ const VALID_ENGINE_OPTIONS = {
|
||||
description: '自定义 simulatorUrl 的地址',
|
||||
},
|
||||
/**
|
||||
* 与 react-renderer 的 appHelper 一致， https://lowcode-engine.cn/docV2/nhilce#appHelper
|
||||
* 与 react-renderer 的 appHelper 一致， https://www.yuque.com/lce/doc/nhilce#appHelper
|
||||
*/
|
||||
appHelper: {
|
||||
type: 'object',
|
||||
@ -247,7 +247,7 @@ export interface EngineOptions {
|
||||
enableFilterReducerInRenderStage?: boolean;
|
||||
};
|
||||
/**
|
||||
* 与 react-renderer 的 appHelper 一致， https://lowcode-engine.cn/docV2/nhilce#appHelper
|
||||
* 与 react-renderer 的 appHelper 一致， https://www.yuque.com/lce/doc/nhilce#appHelper
|
||||
*/
|
||||
appHelper?: {
|
||||
/** 全局公共函数 */
|
||||
|
||||
@ -319,7 +319,7 @@ export default function (metadata: TransformedComponentMetadata): TransformedCom
|
||||
title: {
|
||||
label: '渲染唯一标识（key）',
|
||||
tip: '搭配「条件渲染」或「循环渲染」时使用，和 react 组件中的 key 原理相同，点击查看帮助',
|
||||
docUrl: 'https://lowcode-engine.cn/docV2/qm75w3',
|
||||
docUrl: 'https://www.yuque.com/lce/doc/qm75w3',
|
||||
},
|
||||
setter: [
|
||||
{
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user