Vue3 界面设计插件 microi-pageengine 入门教程一

系列文章目录

一、Vue3空项目快速集成 microi-pageengine 插件

---

---

一、前言

上一篇文章介绍了 vue3 空项目如何快速集成 microi-pageengine 插件，这一章节主要介绍 microi-pageengine 的 设计思路 和 原理 ，以及后续的升级计划。至于具体的 内置组件 介绍要到后面章节来一一详细介绍。

二、排版布局

主要介绍设计界面整体的排版布局，当然这些布局后续可能会有变动，但暂时是这个样子的。

2.1 功能导航区

功能按钮：

• 查看json : 当前页面渲染内容会保存在一个大的 json 里，可以将设计好的json 持久化保存起来，比如保存到一个 json 文件或者存到数据库。反之，可以使用该 json 渲染页面。
• 清空容器：当设计面板区域容器组件过多且想重新设计，则可以使用该功能重置清空面板。
• 内置模板：内置模板主要给用户以参考，放一些常用排版格式和组件用法。
• 预览：在设计过程中可以通过预览来查看实际效果。
• 保存 : 该功能用于做持久化的，可以通过 【保存】将页面 json 通过事件透传给指定的方法，可以将自己的保存逻辑写在该方法体内。
• 主题 : 内置了明亮 和 暗黑 两种主题。
• 初始化：初始化主要用于清除缓存、引导提示等。

2.2 组件容器区

组件容器区主要存放容器和组件库，界面设计主要包括三大元素：

• 页面：页面在这里指整体设计面板区域，包含页面信息、页面默认通用配置和开关等。
• 容器：容器类似于包装器，主要用来排版布局。
• 组件：组件就是最小单元了，组件依附在容器里，一个容器可以包含多个组件。

2.3 属性面板区

属性面板区主要用来参数配置，通过参数调节实现界面样式和效果的变换。

• 页面参数：页面参数全局唯一且固定。
• 容器参数：容器参数针对每个容器配置，参数也是固定不变的。
• 组件参数：组件参数分为通用配置和特色配置，通用配置适用于每个组件，一般记录组件的信息和样式控制，特色配置可能就不尽相同了，毕竟每个组件都有不同的特性。

三、数据来源配置

数据来源配置分为两种，一种是JSON数据源，数据源一般为对象和数组。另一种是HTML代码，这种数据格式主要用于超文本组件。

3.1 json数据源

我们就拿工作台组件举个例子:

当我们修改 json 数据后，关闭窗口会实时同步渲染修改后的展示效果。如果我们需要动态数据，则可以在数据来源内容框输入 webapi 的远程接口地址，返回内容格式如上图即可。

注意：请注意接口地址和界面引擎 跨域 的问题，还一个就是 https 的问题。

接口内置了 token 参数，在我们集成页面把 token 参数设置后，后面无需关心token 问题，请求接口会自动带上 token 。

3.2 html数据源

这种 html 数据源格式仅限于【超文本】组件：

如果我们需要非常复杂的界面，没有组件能满足，那么我们可以直接写HTML代码来实现自己想要的效果。

四、事件穿透

当我们想在组件内想实现点击某个区域来进行事件回调，也是可以实现的，目前已整理事件类型如下：

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)})//地图marker点击事件EventBus.on('mapMarkerClick', (item) => {console.log('监听mapMarkerClick', item)})
})//销毁
onBeforeUnmount(() => {EventBus.off('saveFormJson')EventBus.off('calendarSelDate')EventBus.off('cartMoreLink')EventBus.off('linkWidget')EventBus.off('fishWidget')EventBus.off('stepsWidget')EventBus.off('mapMarkerClick')
})

我们只需在集成页面做好事件监听即可。

五、数据保存持久化

当我们想把设计的页面 json 持久化保存，以便后续用渲染引擎渲染出来，可以在头部【保存按钮】监听事件内写自己的业务逻辑。

 //监听保存页面JSON事件EventBus.on('saveFormJson', (saveFormJson) => {console.log('监听saveFormJson', saveFormJson)})

json内容格式如下：

//传入数据,这个数据不知道什么格式,可以在设计器拖拽几个组件查看下页面JSON ,和渲染JSON一毛一样的
const remoteObj = ref({Id: '', //自定义页面IDTitle: '', //自定义页面标题Number: '', //自定义页面编号Desc: '', //自定义页面描述JsonObj: {} | '', //对象或者字符串
})

六、总结

通过这张介绍，我们大致就了解了界面设计引擎的基本构成和原理，后续会详细介绍每个内置组件的功能和用法，还有自定义组件如何集成。

对了，把集成页面的代码再贴出来一遍让大家再看下。

<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: '', //自定义页面IDTitle: '', //自定义页面标题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)})//地图marker点击事件EventBus.on('mapMarkerClick', (item) => {console.log('监听mapMarkerClick', item)})
})//销毁
onBeforeUnmount(() => {EventBus.off('saveFormJson')EventBus.off('calendarSelDate')EventBus.off('cartMoreLink')EventBus.off('linkWidget')EventBus.off('fishWidget')EventBus.off('stepsWidget')EventBus.off('mapMarkerClick')
})
</script><style>
.dark {background: #252525;color: white;
}
.light {background-color: white;color: black;
}
</style>