开放未来 - 摹客开放平台

mockplus.showUI()函数可显示插件的用户界面，使用此函数的最简单方法是执行以下操作：

1. 创建一个包含 UI 标记的 HTML 文件；

2. 更改manifest.json, 使其包含"ui": "ui.html", 其中"ui.html"是你的HTML文件的文件名；

3. 在你的插件代码中添加以下调用：

mockplus.showUI(__html__, {
visible: true,
width: 400,
height: 400,
title: '我的摹客DT插件',
});

这会在DT的<iframe>中显示你的 HTML 文件的内容。

1. 从 UI 向插件代码发送消息

需要从 UI 向插件代码发送消息，请在 HTML 中编写以下内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>first-dt-plugin</title>
</head>
<body>
<button id="messageButton">发送消息</button>
</body>
<script>
document.getElementById("messageButton").addEventListener("click", () => {
window.parent.postMessage(
{
pluginMessage: {
type: "pluginMessage",
clickButton: "messageButton",
},
},
"*"
);
});
</script>
</html>

需要接收插件代码中的消息，请编写以下内容：

mockplus.ui.onmessage = (message) => {
const pluginMessage = message.pluginMessage;
const type = pluginMessage?.type;

switch (type) {
case 'pluginMessage': {
console.log('接收到的插件消息', pluginMessage.clickButton);
break;
}
default:
console.log('接收到的其他消息');
break;
}
};

2. 从插件代码向 UI 发送消息

需要从插件代码向UI发送消息，请编写以下内容：

mockplus.ui.onmessage = (message) => {
const pluginMessage = message.pluginMessage;
const type = pluginMessage?.type;

switch (type) {
case 'pluginMessage': {
mockplus.ui.postMessage('接收到了消息', { origin: '*' });
break;
}
default:
console.log('接收到的消息');
break;
}
};

需要接收 UI 中的消息，请在 HTML 中编写以下内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>first-dt-plugin</title>
</head>
<script>
window.onmessage = ({ data }) => {
console.log("接收到的信息", data);
};
</script>
</html>

注：目前不支持发送除基础数据结构以外的对象，如Uint8Array对象, Blob对象、ArrayBuffers 或TypedArray对象。

创建用户界面

1. 从 UI 向插件代码发送消息

2. 从插件代码向 UI 发送消息