Title: 🎨Interface Engine
Canonical: https://microi.net/en/doc/system-engine/page-engine.html
Page-Modified: 2026-10-12T10:49:46.000Z
Source: published HTML document body; page revision is not a capability verification date.

# 🎨Interface Engine

Visualization capabilities such as custom interface design and ECharts charts

---

## 📸Preview image

[界面引擎预览1: https://file.microi.net/upload/img/csdn/8d07494649c34c7981495bdb28551451.png#pic_center]

[界面引擎预览2: https://file.microi.net/upload/img/csdn/3aae333deaec41a588ed985df5644375.png#pic_center]

## Interface Engine

- in actual project development, often [* * form engine form * *] can not meet the needs of customer leaders, so Microi code interface engine was born

- All controls support data source configuration, which can be provided through interface engine (https://microi.blog.csdn.net/article/details/143968454)

## Trial Address

Microi code interface engine:https://microi.net/page-engine (https://microi.net/page-engine)

## npm component integration mode

npm I microi-pageengine@latest must be a Vue3 Vite project, any page can be integrated, the following code is integrated demo

Expand to view JavaScript code (99 lines)

javascript

```
<template>
  <!-- 页面设计器 -->
  <formDesigner :remoteObj="remoteObj" />
  <!-- 页面渲染器 -->
  <!-- <formRenderer :remoteObj="remoteObj" /> -->
</template>
<script setup>
  
//引入组件
import { formDesigner, EventBus, usePageEngineStore } from 'microi-pageengine' 
//引入样式
import 'microi-pageengine/style.css' 

//本地组件
import { useRouter } from 'vue-router'
import { createPinia } from 'pinia'
import { onMounted, onBeforeUnmount, ref } from 'vue'

//用自己的路由处理组件内部跳转,通过EventBus监听处理内部事件,主打一个自由自在,随心所欲.
const router = useRouter()

//状态机传参,npm包没包把pinia打包进去,正所谓巧妇难为无米之炊,给她传一个完事
const pinia = createPinia()
const pageEngineStore = usePageEngineStore(pinia)

//传入数据,这个数据不知道什么格式,可以在设计器拖拽几个组件查看下页面JSON ,和渲染JSON一毛一样的
const remoteObj = ref({})

//模拟加载远程数据
const loadFormData = () => {}

onMounted(() => {
  
  //如果需要token,设置token,该token一经接收即刻存入pinia状态机,每次调用接口通过拦截器自动处理token头,无需每次手动写,持久化用的localStorage ,可以F12查看
  pageEngineStore.setToken('')
  
  //下面这一大串监听,其实也可以写到一个事件里,通过key value 键值对来区分,暂时先这么着吧
  
  //监听保存页面JSON事件
  EventBus.on('saveFormJson', (saveFormJson) => {
    console.log('saveFormJson', saveFormJson)
  })

  //监听日历选择日期事件
  EventBus.on('calendarSelDate', (data) => {
    console.log('calendarSelDate', data)
  })

  //卡片更多跳转
  EventBus.on('cartMoreLink', (linkurl, linktype) => {
    console.log('cartMoreLink', linkurl, linktype)
    if (linktype == 'router') {
      router.push(linkurl)
    }
  })

  //链接组件跳转
  EventBus.on('linkWidget', (linkurl, linktype) => {
    console.log('linkWidget', linkurl, linktype)
    if (linktype == 'router') {
      router.push(linkurl)
    }
  })

  //鱼骨图跳转
  EventBus.on('fishWidget', (linkurl) => {
    console.log('监听fishWidget', linkurl)
    router.push(linkurl)
  })

  //步骤跳转
  EventBus.on('stepsWidget', (id, linkurl) => {
    console.log('监听stepsWidget', id, linkurl)
    router.push(linkurl)
  })

})

//销毁
onBeforeUnmount(() => {
  EventBus.off('saveFormJson')
  EventBus.off('calendarSelDate')
  EventBus.off('cartMoreLink')
  EventBus.off('linkWidget')
  EventBus.off('fishWidget')
  EventBus.off('stepsWidget')
})
</script>

<style>
.dark {
  background: #252525;
  color: white;
}
.light {
  background-color: white;
  color: black;
}
</style>
```

## integration mode of iframe mode

this mode, to put it bluntly, is versatile. it regards the low-code designer as an online tool. it is stateless, does not rely on any front-end and back-end, has high cohesion and low coupling, and can be integrated into any platform. When there are hundreds of custom extension components in time, you can become the overlord and independent product on your own. Platform integration uses Iframe to embed the page designer into your own page and communicate with the parent page through postMessage means. The parent page can obtain the page JSON generated by the designer or pass token to the designer.

Data communication using postMessage the parent page (docking platform) sends data to the child page through the postMessage, where token is mainly passed, and the child page (page design engine component) uses window.addEventListener to monitor and receive data

javascript

```
//设计引擎调用
<template>
<iframe ref="myIframe" id="iframe" src="https://www.nbweixin.cn/autopage/"  frameborder="0" style="width: 100%; height: 100%"></iframe>
</template>
methods: {
 sendMessageToIframe() {
      const iframe = this.$refs.myIframe;
      // 要发送的数据
      const dataToSend = {
        pageEngineToken: "token 值"
      };
      // 使用 postMessage 发送数据给 iframe
      iframe.contentWindow.postMessage(dataToSend, "*");
  }
 }
```

## The interface engine is lisaisai developed by our team members.

For more complete instructions, see the blog post:https://lisaisai.blog.csdn.net/article/details/143928130 (https://lisaisai.blog.csdn.net/article/details/143928130)