Skip to content

Commit a097542

Browse files
liujupingJackLian
authored andcommitted
docs: add faq024
1 parent 014834a commit a097542

File tree

2 files changed

+134
-0
lines changed

2 files changed

+134
-0
lines changed

docs/docs/faq/faq024.md

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
title: workspace 模式常见问题
3+
sidebar_position: 23
4+
tags: [FAQ]
5+
---
6+
7+
#### 如何判断是否开启了IDE模式?
8+
9+
- **通过官方API判断**:您可以通过访问 [workspace.isActive](/site/docs/api/workspace#isactive) 来判断当前是否处于IDE模式。这是阿里低代码引擎提供的一个官方API,专门用于确认是否处于集成开发环境。
10+
11+
12+
13+
#### 如何使用插件的ctx来做判断在哪个模式下?
14+
15+
- **插件是否为应用级别**:可以通过 **ctx.isPluginRegisteredInWorkspace** 方法来判断一个插件是否是应用级别的插件。这有助于理解插件在阿里低代码引擎中的作用域和潜在的使用场景。
16+
- **插件的注册级别**:您可以使用 **ctx.registerLevel** 属性来判断插件处于哪个级别。插件级别的值包括:
17+
- **Default**:默认级别。非 IDE 模式下的值
18+
- **Workspace**:应用级别。
19+
- **Resource**:资源级别。
20+
- **EditorView**:编辑视图级别。 这些级别代表了插件可能的作用域和使用场景,有助于在开发和管理低代码应用时对插件进行更精确的控制和配置。
21+
22+
23+
24+
#### 如何在IDE模式下设置资源列表?
25+
26+
- **设置资源列表API**:在IDE模式下,可以通过访问 [workspace.setResourceList](/site/docs/api/workspace#setresourcelist) 来设置或更新IDE中的资源列表。这确保您在编辑器窗口中打开的资源是最新且可访问的。
27+
28+
29+
30+
#### 如何打开视图窗口?
31+
32+
- **使用推荐的方法**:使用 `openEditorWindow(resource: Resource, sleep?: boolean): Promise<void>;` 来打开视图窗口。这里的 **resource** 参数指的是您要打开的特定资源,可通过 [workspace.resourceList](/site/docs/api/workspace#resourcelist) 获取。
33+
- **不推荐使用的过时方法**:有一个过时的方法 `openEditorWindow(resourceName: string, id: string, extra: Object, viewName?: string, sleep?: boolean): Promise<void>;` 也用于打开视图窗口。虽然仍然可用,但官方不推荐使用此方法,并计划在后续版本中废弃,因为它在维护和可扩展性方面存在限制。
34+
35+
36+
37+
#### 如何在全局插件中获取视图的上下文?
38+
39+
- 在阿里低代码引擎的全局插件中获取视图的上下文,可以通过使用 **ProvideViewPluginContext** 函数实现。这个函数来自 **@alilc/lowcode-utils** 库,它使得您的 React 组件能够接收 **pluginContext** 作为 props,进而访问和操作当前视图的状态和属性。
40+
41+
**步骤**
42+
43+
**引入依赖**:首先,确保您的插件文件中已经引入了 **ProvideViewPluginContext** 以及其他必要的依赖。
44+
45+
```
46+
import { ProvideViewPluginContext } from '@alilc/lowcode-utils';
47+
```
48+
49+
**定义 React 组件**:创建一个 React 组件,它将使用来自 **ProvideViewPluginContext****pluginContext**
50+
51+
```typescript
52+
const MyComponent = (props) => {
53+
const { pluginContext } = props;
54+
// 组件逻辑
55+
return <div>/* 组件内容 */</div>;
56+
};
57+
```
58+
59+
**定义全局插件**:定义一个函数,这个函数会在插件被注册时调用。这个函数通常接受一个上下文对象 **ctx**,它提供了对引擎功能的访问。
60+
61+
```javascript
62+
const globalPlugin = (ctx) => {
63+
const { skeleton } = ctx;
64+
65+
skeleton.add({
66+
type: 'PanelDock',
67+
name: 'datapool',
68+
content: ProvideViewPluginContext((props) => {
69+
// 组件内容
70+
return (
71+
<MyComponent {...props} />
72+
)
73+
}),
74+
// 其他配置
75+
contentProps: {
76+
// 需要提供 pluginContext 作为参数
77+
pluginContext: ctx,
78+
}
79+
});
80+
};
81+
```
82+
83+
通过这些步骤,您的全局插件中的 React 组件就能够获取并使用视图的上下文了。这为您在插件中实现更复杂的功能和交互提供了基础。
84+
85+
86+
87+
**注意事项**
88+
89+
- **组件重渲染**:正常情况下,**pluginsContext** 是视图的上下文。当视图切换时,组件会重新渲染。如果需要在组件中处理视图切换导致的重新渲染,可以利用 React 的 **key** 属性。
90+
91+
**示例代码**
92+
93+
```typescript
94+
ProvideViewPluginContext(props => {
95+
return (
96+
<DataPoolPane
97+
{...props}
98+
key={props.pluginContext?.editorWindow?.id}
99+
);
100+
});
101+
```
102+
103+
通过这种方式,当视图切换时,组件会根据视图的不同进行重新渲染,确保组件状态与当前视图的上下文保持一致。这对于在低代码平台上开发复杂插件和交互功能是非常有用的。
104+
105+
106+
107+
#### 如何判断插件是否在 Workspace 模式下注册?
108+
109+
**使用** **ctx.isPluginRegisteredInWorkspace()** **方法**:
110+
111+
通过 **ctx.isPluginRegisteredInWorkspace()** 方法,可以判断一个插件是否在 Workspace 级别注册。以下是一个示例代码片段:
112+
113+
```javascript
114+
if (ctx.isPluginRegisteredInWorkspace('pluginName')) {
115+
console.log('插件已在 Workspace 模式下注册。');
116+
} else {
117+
console.log('插件未在 Workspace 模式下注册。');
118+
}
119+
```
120+
121+
注意:此方法目前在 beta 版本中,可能会有 TypeScript 提示显示已移除。
122+
123+
**检查** **ctx.registerLevel** **的值**:
124+
125+
可以通过比较 **ctx.registerLevel** 的值来判断插件的注册级别。示例代码如下:
126+
127+
```javascript
128+
if (ctx.registerLevel !== IPublicEnumPluginRegisterLevel.Workspace) {
129+
console.log('插件未在 Workspace 模式下注册。');
130+
} else {
131+
console.log('插件已在 Workspace 模式下注册。');
132+
}
133+
```

docs/docs/faq/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ tags: [FAQ]
1515
- [如何通过 this.utils 使用第三方工具扩展](/site/docs/faq/faq005)
1616
- [设置面板中的高级 tab 如何配置](/site/docs/faq/faq007)
1717
- [插件面板如何调整位置](/site/docs/faq/faq010)
18+
- [workspace 模式常见问题](/site/docs/faq/faq024)
1819

1920
## 源码和依赖
2021
- [某某 npm 包对应的源码在哪里?](/site/docs/faq/faq008)

0 commit comments

Comments
 (0)