Skip to content

Commit 650c8e9

Browse files
dcloud-wandldcloud-wandl
committed
补充 视图相关的说明文档
1 parent 76ede80 commit 650c8e9

2 files changed

Lines changed: 108 additions & 97 deletions

File tree

‎ExtensionTutorial/_sidebar.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
* [插件说明](/ExtensionTutorial/extension.md)
88
* [如何注册`命令`](/ExtensionTutorial/commands.md)
99
* [如何注册`菜单`](/ExtensionTutorial/menus.md)
10-
* [如何注册一个`视图`](/ExtensionTutorial/views.md)
1110
* [如何编辑文档](/ExtensionTutorial/texteditor.md)
1211
* [如何写一个`校验器`](/ExtensionTutorial/validations.md)
12+
* [如何注册一个`视图`](/ExtensionTutorial/views.md)
1313
* [如何扩展一个`自定义编辑器`](/ExtensionTutorial/customeditor.md)
1414
* 插件发布
1515
* [如何发布插件](/ExtensionTutorial/HowToPublish.md)

‎ExtensionTutorial/views.md‎

Lines changed: 107 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,117 @@
1-
#### 如何扩展一个新的视图？
1+
## 了解视图
2+
3+
HBuilderX支持创建完全自定义的、可以间接和nodejs通信的特殊网页，即视图。
4+
5+
使用视图可以构建复杂的、支持本地文件操作的用户界面。
6+
7+
设计糟糕的视图也很容易让人感觉不舒适，不能让人家一看就觉得你这是一张网页，`好看`、跟`HBuilderX风格统一`的UI也很重要。
28

39

4-
5-
[扩展一个新的 TreeView](#TreeView)
6-
710
[扩展一个新的 WebView](#WebView)
11+
12+
[扩展一个新的 TreeView](#TreeView)
13+
14+
## WebView
15+
16+
`从HBuilderX 2.8.1及以上版本开始支持`
17+
18+
扩展一个新的 WebView `视图`（view）通过以下2个步骤：
19+
20+
- 通过 <a href="/ExtensionDocs/ContributionPoints/README?id=viewscontainers" target="_blank">viewContainers</a> 和 <a href="/ExtensionDocs/ContributionPoints/README?id=views" target="_blank">views</a>配置扩展点声明要扩展的`视图`
21+
22+
23+
``` json
24+
//package.json；
25+
//...NOTE：package.json不支持注释，以下代码使用时需要将注释删掉
26+
"contributes": {
27+
"viewsContainers": {
28+
"rightside": [{
29+
"id": "WebViewcontainerId",
30+
"title": "webview 展示"
31+
}]
32+
},
33+
"views": {
34+
"WebViewcontainerId": [{
35+
"id": "extension.WebView",
36+
"title": "webview - 展示"
37+
}]
38+
},
39+
...
40+
}
41+
```
42+
43+
- 在插件激活时通过API：<a href="/ExtensionDocs/Api/README?id=createwebview" target="_blank">window.createWebView</a>实现上面扩展的`视图`
44+
45+
``` javascript
46+
const hx = require('hbuilderx');
47+
48+
/**
49+
* @description 显示webview
50+
*/
51+
function showWebView(webviewPanel) {
52+
let webview = webviewPanel.webView;
53+
54+
var background = '';
55+
56+
let config = hx.workspace.getConfiguration();
57+
let colorScheme = config.get('editor.colorScheme');
58+
if (colorScheme == 'Monokai') {
59+
background = 'rgb(39,40,34)'
60+
} else if (colorScheme == 'Atom One Dark') {
61+
background = 'rgb(40,44,53)'
62+
} else {
63+
background = 'rgb(255,250,232)'
64+
};
65+
66+
webview.html =
67+
`
68+
<body style="background-color:${background};border:1px solid ${background};">
69+
<div style="max-width:200px;">
70+
<img src="https://download1.dcloud.net.cn/uploads/images/hbuilderx/hx_desc@1x.png" style="position: absolute;bottom: 0;left: 0;right: 0;width: 100%;margin: auto;">
71+
</div>
72+
<script>
73+
// 以下两种写法等同
74+
hbuilderx.onDidReceiveMessage((msg) => {});
75+
window.addEventListener("message", (msg) => {});
76+
hbuiderx.postMessage({
77+
command: 'alert',
78+
text: 'HelloWorld'
79+
});
80+
</script>
81+
</body>
82+
`;
83+
84+
// 插件发送消息(可以被JSON化的数据)到webview
85+
webview.postMessage({
86+
command: "test"
87+
});
88+
89+
// 插件接收webview发送的消息(可以被JSON化的数据)
90+
webview.onDidReceiveMessage((msg) => {
91+
if (msg.command == 'alert') {
92+
hx.window.showInformationMessage(msg.text);
93+
}
94+
});
95+
};
96+
97+
98+
module.exports = {
99+
showWebView
100+
}
101+
```
102+
103+
> 扩展后的`视图`可通过菜单`视图`-`显示扩展视图`打开
104+
105+
#### 效果图
106+
107+
<img src="/static/snapshots/webview.png" style="zoom:50%" />
8108

9-
##### TreeView
109+
## TreeView
10110
`从HBuilderX 2.7.12及以上版本开始支持`
11111

12112
扩展一个新的 TreeView `视图`（view）通过以下2个步骤：
13113

14-
- 通过 [viewContainers](/ExtensionDocs/ContributionPoints/README.md#viewContainers) 和 [views](/ExtensionDocs/ContributionPoints/README.md#views) 配置扩展点声明要扩展的`视图`
114+
- 通过 <a href="/ExtensionDocs/ContributionPoints/README?id=viewscontainers" target="_blank">viewContainers</a> 和 <a href="/ExtensionDocs/ContributionPoints/README?id=views" target="_blank">views</a>配置扩展点声明要扩展的`视图`
15115

16116

17117
``` json
@@ -34,7 +134,7 @@
34134
}
35135
```
36136

37-
- 在插件激活时通过API：[window.createTreeView](/ExtensionDocs/Api/README.md#createTreeView)实现上面扩展的`视图`
137+
- 在插件激活时通过API：<a href="/ExtensionDocs/Api/README?id=createtreeview" target="_blank">window.createTreeView</a>实现上面扩展的`视图`
38138

39139
``` javascript
40140
// extension.js
@@ -118,92 +218,3 @@ module.exports = {
118218

119219
<img src="/static/snapshots/view@2x.png" style="zoom:50%" />
120220

121-
##### WebView
122-
`从HBuilderX 2.8.1及以上版本开始支持`
123-
124-
扩展一个新的 WebView `视图`（view）通过以下2个步骤：
125-
126-
- 通过 [viewContainers](/ExtensionDocs/ContributionPoints/README.md#viewContainers) 和 [views](/ExtensionDocs/ContributionPoints/README.md#views) 配置扩展点声明要扩展的`视图`
127-
128-
129-
``` json
130-
//package.json；
131-
//...NOTE：package.json不支持注释，以下代码使用时需要将注释删掉
132-
"contributes": {
133-
"viewsContainers": {
134-
"rightside": [{
135-
"id": "WebViewcontainerId",
136-
"title": "webview 展示"
137-
}]
138-
},
139-
"views": {
140-
"WebViewcontainerId": [{
141-
"id": "extension.WebView",
142-
"title": "webview - 展示"
143-
}]
144-
},
145-
...
146-
}
147-
```
148-
149-
- 在插件激活时通过API：[window.createWebView](/ExtensionDocs/Api/README.md#createWebView)实现上面扩展的`视图`
150-
151-
``` javascript
152-
const hx = require('hbuilderx');
153-
154-
/**
155-
* @description 显示webview
156-
*/
157-
function showWebView(webviewPanel) {
158-
let webview = webviewPanel.webView;
159-
160-
var background = '';
161-
162-
let config = hx.workspace.getConfiguration();
163-
let colorScheme = config.get('editor.colorScheme');
164-
if (colorScheme == 'Monokai') {
165-
background = 'rgb(39,40,34)'
166-
} else if (colorScheme == 'Atom One Dark') {
167-
background = 'rgb(40,44,53)'
168-
} else {
169-
background = 'rgb(255,250,232)'
170-
};
171-
172-
webview.html =
173-
`
174-
<body style="background-color:${background};border:1px solid ${background};">
175-
<div style="max-width:200px;">
176-
<img src="https://download1.dcloud.net.cn/uploads/images/hbuilderx/hx_desc@1x.png" style="position: absolute;bottom: 0;left: 0;right: 0;width: 100%;margin: auto;">
177-
</div>
178-
<script>
179-
// 以下两种写法等同
180-
hbuilderx.onDidReceiveMessage((msg) => {});
181-
window.addEventListener("message", (msg) => {});
182-
hbuiderx.postMessage({
183-
command: 'alert',
184-
text: 'HelloWorld'
185-
});
186-
</script>
187-
</body>
188-
`;
189-
webview.postMessage({
190-
command: "test"
191-
});
192-
webview.onDidReceiveMessage((msg) => {
193-
if (msg.command == 'alert') {
194-
hx.window.showInformationMessage(msg.text);
195-
}
196-
});
197-
};
198-
199-
200-
module.exports = {
201-
showWebView
202-
}
203-
```
204-
205-
> 扩展后的`视图`可通过菜单`视图`-`显示扩展视图`打开
206-
207-
#### 效果图
208-
209-
<img src="/static/snapshots/webview.png" style="zoom:50%" />

0 commit comments

Comments
 (0)