一、目标实现

image

左侧：为可用的组件列表，可拖动任一组件到中间的预览区域

中间：为页面预览效果页面，选中任一组件，可在右侧进行参数配置

右侧：为组件的参数配置（选中中间的组件时出现），页面配置（选中页面管理tab按钮时出现），组件管理（选中组件管理tab时出现），更改配置，中间的预览区域立即更新视图

​

对于电商类的小程序，这种微页面有大量的需求，频繁的改动页面样式、结构和内容，以及发布内嵌的H5页面，后台做到灵活可配置。可免去频繁发布小程序的烦恼。

二、开发设计规范

后台部分

管理后台文件目录结构

image

1. 可将以上的页面进行模块拆分：

1. components目录放一些常用的组件，leftComponentsPage.vue和rightConfigPage.vue分别为左侧和右侧的集成组件

2. configComponents目录是右侧显示的对应组件和页面的配置相关的组件，每个组件对应一个配置，封装成对应的组件

3. viewComponents目录放置组件对应的样式结构代码，每个组件封装成一个样式组件，名称和配置组件一一对应

4. 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里增加一项

4. 视图组件结构和对应样式

<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根据组件是否开启点击交互，是默认全区域还是选定区域计算而来

......

更多请移步公众号“太空编程”阅读