Iframe 迷你应用程序

创建迷你应用程序

1. 在发布商帐户中，前往元框架部分。
2. 在自定义区段区块中，单击添加新应用。

3. 如果希望迷你应用程序在创建后立即激活，请将启用开关切换为活动状态。

4. 选择Iframe作为迷你应用程序类型。
5. 输入迷你应用程序的名称。使用复选框，可以选择名称是否显示在打开的迷你应用程序的标题中。
6. 输入将显示在 iframe 中的网站或 web 应用程序的 URL。
7. 上传要在Metaframe菜单中显示的此迷你应用图标。

8. 选择迷你应用程序是在用户登录前还是登录后在元框架中显示。
9. 单击创建。

可以编辑或删除创建的迷你应用程序。

如何配置迷你应用程序关闭

如果在创建迷你应用程序时选中在节标题中显示此名称框，其名称和关闭图标将显示在打开的 iframe 上方。

如果不选中该框，则关闭iframe的逻辑必须在迷你应用程序中执行。 为确保元框架小组件正确处理关闭事件，请向迷你应用程序代码添加一个脚本，该脚本使用@xsolla-Metaframe/mini-app:close类型发送postMessage：

window.parent.postMessage(
  {
    type: '@xsolla-metaframe/mini-app:close',
    payload: null,
  },
  '*',
);

如何更改迷你应用程序高度

要将 iframe 高度与迷你应用程序高度匹配，必须在迷你应用程序中执行调整高度的逻辑。为了确保元框架小部件正确处理高度更改事件，请向迷你应用程序代码添加一个脚本，该脚本发送带有@xsolla-metaframe/mini-app:set-window-height类型的postMessage。当迷你应用程序在其高度更改时自动发送消息时，还可以配置动态高度调整。

注意：

• 迷你应用程序根元素的高度不应定义为父元素高度的百分比。可以将值指定为max-content、auto或固定高度，例如，以像素为单位。
• 迷你应用程序必须在需要调整高度时发送消息。
• 发送的消息数量没有限制。

const setMiniAppWindowHeight = (heightInPixels: number) => {
  window.parent.postMessage(
    {
      type: '@xsolla-metaframe/mini-app:set-window-height',
      payload: {
        heightInPixels: heightInPixels,
      },
    },
    '*',
  );
};

const handleResize = () => {
  setMiniAppWindowHeight(document.body.clientHeight);
};

handleResize();

const observer = new MutationObserver(handleResize);
observer.observe(document.body, { childList: true, subtree: true });