一、目标实现
image
左侧：为可用的组件列表，可拖动任一组件到中间的预览区域
中间：为页面预览效果页面，选中任一组件，可在右侧进行参数配置
右侧：为组件的参数配置（选中中间的组件时出现），页面配置（选中页面管理tab按钮时出现），组件管理（选中组件管理tab时出现），更改配置，中间的预览区域立即更新视图
对于电商类的小程序，这种微页面有大量的需求，频繁的改动页面样式、结构和内容，以及发布内嵌的H5页面，后台做到灵活可配置。可免去频繁发布小程序的烦恼。
二、开发设计规范
后台部分
管理后台文件目录结构
image
1. 可将以上的页面进行模块拆分：
-
components目录放一些常用的组件，leftComponentsPage.vue和rightConfigPage.vue分别为左侧和右侧的集成组件
-
configComponents目录是右侧显示的对应组件和页面的配置相关的组件，每个组件对应一个配置，封装成对应的组件
-
viewComponents目录放置组件对应的样式结构代码，每个组件封装成一个样式组件，名称和配置组件一一对应
-
details.vue为整合页面，分别调用左侧的leftComponentsPage.vue组件和右侧的rightConfigPage.vue组件，以及中间预览遍历组件按需加载样式组件
2. 数据流方向
image
3. 组件数据格式
以图片组件为例：
{
"image":{
"showMethod":"YHYG", // 显示的排列方式，一行一个
"borderWidth":0,
"pageMargin":0,
"maxImageNum":10,
"cornerType":"ZJ",
"imageType":"normal",
"showNum":6,
"indicator":"style1",
"items":[
{
"title":"",
"imageUrl":"",
"imageWidth":345,
"imageHeight":241,
"action":"webview",
"maAppid":"",
"maPagePath":"",
"extLink":"",
"actionArea":"hotArea",
"hotAreas":{
"width":100,
"height":100,
"xAxis":128,
"yAxis":63
}
}
]
}
}
image下面为组件的属性，由云端接口直接返回，items下面的每一项对应单个图片属性，右侧配置区域可对每个属性进行配置，每上传一张图片，往items里增加一项
- 视图组件结构和对应样式
<template>
<!-- 组件1：图片组件 -->
<div class="component-wrapper image-component" :style="wrapperStyle">
<div class="image-list">
<div :style="imgItemStyle" class="image-item" v-for="(img, imgIndex) in imgObject.items" :key="imgIndex">
<img class="image" :src="img.imageUrl ? img.imageUrl : defaultImg">
<div :class="['hotarea', debugMode ? 'debug' : '' ]" :style="img.hotAreaStyle"
@click="redirectPageTo(img.action, img.extLink, img.maAppid, img.maPagePath)" v-if="img.action !== 'nothing'">
</div>
</div>
</div>
</div>
</template>
类名为component-wrapper的图层为最外层，宽度为屏幕宽度100%（后台预览页面宽度定为375px），为这个图层设置左右padding值为组件传过来的pageMargin的大小
computed: {
wrapperStyle() {
return {
padding-left: this.comData.image.pageMargin + 'px',
padding-right: this.comData.image.pageMargin + 'px'
}
}
}
通过传入组件数据items数组数据，动态计算相关图层样式动态绑定到对应的元素上热区hot-area图层样式对象hotAreaStyle根据组件是否开启点击交互，是默认全区域还是选定区域计算而来
......
更多请移步公众号“太空编程”阅读
网友评论