插件 / 文档介绍 / 创建用户界面

创建用户界面

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

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

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

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


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

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


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

需要从 UI 向插件代码发送消息,请在 HTML 中编写以下内容:
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>first-dt-plugin</title>
  6.   </head>
  7.   <body>
  8.     <button id="messageButton">发送消息</button>
  9.   </body>
  10.   <script>
  11.     document.getElementById("messageButton").addEventListener("click", () => {
  12.       window.parent.postMessage(
  13.         {
  14.           pluginMessage: {
  15.             type: "pluginMessage",
  16.             clickButton: "messageButton",
  17.           },
  18.         },
  19.         "*"
  20.       );
  21.     });
  22.   </script>
  23. </html>


需要接收插件代码中的消息,请编写以下内容:
  1. mockplus.ui.onmessage = (message) => {
  2.   const pluginMessage = message.pluginMessage;
  3.   const type = pluginMessage?.type;

  4.   switch (type) {
  5.     case 'pluginMessage': {
  6.       console.log('接受到的插件消息', pluginMessage.clickButton);
  7.       break;
  8.     }
  9.     default:
  10.       console.log('接受到的其他消息');
  11.       break;
  12.   }
  13. };


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

需要从插件代码向UI发送消息,请编写以下内容:
  1. mockplus.ui.onmessage = (message) => {
  2.   const pluginMessage = message.pluginMessage;
  3.   const type = pluginMessage?.type;

  4.   switch (type) {
  5.     case 'pluginMessage': {
  6.       mockplus.ui.postMessage('接受到了消息', { origin: '*' });
  7.       break;
  8.     }
  9.     default:
  10.       console.log('接受到的消息');
  11.       break;
  12.   }
  13. };

需要接收 UI 中的消息,请在 HTML 中编写以下内容:
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>first-dt-plugin</title>
  6.   </head>
  7.   <script>
  8.     window.onmessage = ({ data }) => {
  9.       console.log("收到的信息", data);
  10.     };
  11.   </script>
  12. </html>

注:目前不支持发送除了Uint8Array以外的对象,如Blob对象、ArrayBuffers 或TypedArray对象。