开源低代码平台-Microi吾码  🔥 

    🔸技术框架：.NET8 + MySql/SqlServer/Oracle + Vue2/3 + Element-UI/Element-Plus

    🔸平台始于2014年（基于Avalon.js），2018年使用Vue重构，于2024年10月29日开源

    🔸Vue3试用地址（仅查询）：https://microi.net

    🔸Vue2传统界面试用地址（可操作数据）：https://demo.microi.net/

    🔸更新日志： Loading...

    🔸GitCode开源地址：GitCode - 全球开发者的开源社区,开源代码托管平台

    🔸Gitee开源地址：microi.net: 开源低代码平台-Microi吾码，基于.NET8+Vue3+Element-Plus，始于2014年（基于Avalon.js），2018年使用Vue重构，于2024年10月开源。

1. 开场白 

📢 今天要隆重介绍下这款插件 Microi.Net-界面设计引擎，因为本人有幸受邀参与了Microi吾码-开源低代码平台Vue3版本的开发，今后会与原创团队共同维护和完善该项目。

本人目前主要参与项目两款插件的开发和后续维护工作，一个是  Microi.Net-界面设计引擎 ，另一个是 动态打印引擎 Microi.Net-动态打印引擎 ，目前两个插件主体已基本构建完成，后续会持续更新迭代和完善。目前展示的只是demo版，后续更多功能会集成在平台上,以平台最新发布版本为主。

 预览图-1

2. 插件简介☘️ 

Microi.Net-界面设计引擎 主要解决了低代码平台页面如何快速设计的痛点。

设计引擎分为设计器和渲染器两个核心组件:

🔸设计器: 负责快速构建精美的页面,比如首页,动态看板,大屏等,采用极简的设计理念,傻瓜式操作,对开发人员的技术要求大大降低.

🔸渲染器: 负责渲染,以数据驱动页面展示.以往可能这部分工作都是前端或UI来完成的,现在普通的后端开发人员或者运维和销售角色都可以胜任.大大降低了团队研发的成本.

3. 快速上手 🔑 

 界面引擎内置了一些常用的组件 widget ,所有样式都可以通过参数设置来控制.结构主要包括容器 container 和组件。一个容器可以容纳多个组件,容器和容器可以进拖拽排序,组件和组件可以进行拖拽排序.容器和组件都可以进行宽高拖拽,随意搭配,带用了一些技术解决了栅格系统塌陷的问题,可以完美实现瀑布流式排版.

演示地址：Microi.Net-界面设计引擎 

  3.1 功能菜单介绍

    功能菜单栏位于头部，主要包含收缩侧边栏、查看页面JSON、清空容器、演示模板1、演示模板2、预览、保存、切换主题、清除缓存等功能。

预览图-2

  3.2 组件面板介绍

组件面板主要包括内置组件、自定义组件、容器组件等。

预览图-3

  3.3 属性面板介绍

属性面板位于页面右侧，分为页面参数设置、容器参数设置、组件参数设置三部分。

• 页面参数主要配置页面的基本信息和全局开关。
• 容器参数设置主要配置容器的样式和标题等信息。
• 组件参数设置分为通用配置和特色配置，通用配置主要是控制组件的宽高边距等。

预览图-4

  3.4 拖拽排序介绍

容器和容器可以互相拖拽交换位置，组件和组件可以互相拖拽交换位置。

预览图-5

  3.5 排版原理介绍

采用的ElementPlus UI，整体排版方式用了el-row栅格自适应排版，这里主要为了支持移动端可自适应，同时做了一些骚操作可以实现瀑布流式排版，em~~实在是绝! ,我都佩服自己，哈哈。

 

预览图-6

  3.6 持久化介绍

当大聪明的你设计完一个精美的页面后，如何把该模板保存供下次使用呢？

1. 方式1：保存当前页面JSON到本地，存到JSON文件或者文本文件都可以，下次渲染时直接取出来转成JSON传承给渲染器即可。
2. 方式2：持久化保存到数据库，下次渲染器直接通过webapi接口读取。

 

预览图-7

3.7 动态数据源

所有的自定义组件和内置组件都支持动态数据源，通过webapi接口替换成自己的数据源，注意观察格式，一般分为对象格式和数组格式，如果是数组格式，说明组件内容是可遍历的。组件默认数据可能并不是满足所有用户的需求，自己可以尝试做几个webapi接口来试试看。

格式1：对象（object）下面这种数据格式就是一种典型的对象格式。

格式2：数组（array） 下面这种数据格式就是一种典型的数组格式。

4. 集成方式

设计除了平台内置的常用组件,用户可以自行开发自己的组件,开发组件非常简单,组件内所有业务逻辑和容器都是零耦合的,设计的时候把通用业务和功能全部抽离封装了,主打一个互不干扰,距离产生美.插件目前采用的UI框架是 element plus , 有丰富的第三方组件库和完善的文档体系支撑二次开发.

4.1 npm包集成

• 优点：可以自定义扩展组件，随心所欲设计自己的页面，不用写任何额外业务逻辑。
• 缺点：要求必须基于vue3+vite+elementplus+echarts框架，不支持Vue2和其它前端框架。

 4.1.1 表结构

不管哪种方式集成,如果要持久化,那必须准备一张数据表,格式如下

## 表结构,不管哪种方式集成,如果要持久化,那必须准备一张数据表,格式如下

{
  Id: '', //页面ID
  Title: '',//页面标题
  Number: '',//页面编号
  Desc: '',//页面描述
  JsonObj: {}|'' //对象或者字符串,这里主要存储页面JSON
}

 4.1.2 图标库

npm install @element-plus/icons-vue

 4.1.3 全局注册图标

// main.js
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

  4.1.4 暗黑主题设置

// main.js 引用暗黑模式样式
import 'element-plus/theme-chalk/dark/css-vars.css'

 4.1.5 npm包依赖

# 页面设计引擎
npm i microi-pageengine@latest

 这里是所有的第三方依赖包，但不必全部安装第三方组件，npm包内置了一些，只需依赖如下即可。

   // 我打包时排除了这些，所以你们集成时必须要有这些依赖包
      external: [
        'vue',
        'axios',
        'echarts',
        'element-plus',
        '@element-plus/icons-vue',
        'pinia',
        'sass',
        'sass-loader',
        'vue-router',
      ],

 4.1.6 完整demo

到这里基本前置条件就配置完成了，下面只需新建一个vue页面，参考下面代码就能跑起来了，是不是很简单。

<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({
  Id: '', //自定义页面ID
  Title: '',//自定义页面标题
  Number: '',//自定义页面编号
  Desc: '',//自定义页面描述
  JsonObj: {}|'' //对象或者字符串
})


//模拟加载远程数据
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')
})
</scrip>

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

4.2 iframe外挂形式集成

任何前端框架都可以集成，这种模式说白了就是百搭，它是无状态的,不依赖任何前端和后端,高内聚低耦合,可集成任意平台。

• 优点：可以对接任何平台，无状态，无侵染，零耦合，方便快捷。
• 缺点：只能使用内置组件，不能自定义组件。

4.2.1 核心原理

平台集成使用frame，把页面设计器嵌入到自己页面中,通过postMessage方式与父页面进行通信,父页面可以获取到设计器生成的页面JSON,也可以把token传给设计器。

4.2.2 完整demo

### Vue3组合式 集成demo

```vue
<template>
  <div v-loading="loading" class="iframe-container">
    <iframe
      ref="myIframe"
      id="iframe"
      :src="src"
      frameborder="0"
      width="100%"
      height="730px"
      @load="onIframeLoad"
    ></iframe>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
const loading = ref(true)
const src = ref('https://www.nbweixin.cn/autopage/')

const myIframe = ref(null)

//模拟数据库数据
const demoObj = {
  Id: 31908,
  Title: '测试标题',
  Number: 'page_31908',
  Desc: '这是一个空的页面模板',
  JsonObj: {} //对象或者字符串
}

// 监听 iframe 是否加载完成
const onIframeLoad = () => {
  console.log('Iframe 已加载完成')
  loading.value = false
  sendMessageToIframe()
}

const sendMessageToIframe = () => {
  // 要发送的数据
  const dataToSend = {
    iframeToken: 'token_test', //自定义token
    iframeFormData: JSON.stringify(demoObj), //页面JSON，新增的话JsonObj留空就行
  }
  // 使用 postMessage 发送数据给 iframe
  myIframe.value.contentWindow.postMessage(dataToSend, '*')
}

//监听iframe 内部透传事件
let pageengineEvent = null
pageengineEvent = function (event) {
  if (event.data) {
    switch (event.data.key) {
      //保存页面json
      case 'saveFormJson':
        console.log('已接到到来自iframe消息,saveFormJson', event.data.value)
        let obj = JSON.parse(event.data.value)
        console.log(obj)
        break
      //监听日历选择日期事件
      case 'calendarSelDate':
        console.log('已接到到来自iframe消息,calendarSelDate', event.data.value)
        break
      //监听日历选择日期事件
      case 'calendarSelDate':
        console.log('已接到到来自iframe消息,calendarSelDate', event.data.value)
        break
      //卡片更多跳转
      case 'cartMoreLink':
        console.log(
          '已接到到来自iframe消息,cartMoreLink 监听',
          event.data.value
        )
        break
      //链接组件跳转
      case 'linkWidget':
        console.log('已接到到来自iframe消息,linkWidget', event.data.value)
        break
      //鱼骨图跳转
      case 'fishWidget':
        console.log('已接到到来自iframe消息,fishWidget', event.data.value)
        break
      //步骤跳转
      case 'stepsWidget':
        console.log('已接到到来自iframe消息,stepsWidget', event.data.value)
        break
      default:
        break
    }
  }
}
window.addEventListener('message', pageengineEvent)
onMounted(() => {})

onBeforeUnmount(() => {
  window.removeEventListener('message', pageengineEvent)
})
</script>

<style lang="scss" scoped></style>

5. 页面效果图

6. 其它

好了，到这里已经介绍完了，至于自定义组件下篇再介绍。另外打个广告，目前我是吾码合伙人，如果想购买Microi吾码开源框架会员版，可以报我的CSDN 名 “三天不学习” 或者 报我的姓名“李赛赛” 即可享受减免优惠。

演示地址：Microi.Net-界面设计引擎  

吾码CSDN：开源低代码平台-Microi吾码-成为合伙人-CSDN博客