微页面设计开发指南

一、目标实现

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

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

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

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

二、开发设计规范

后台部分

管理后台文件目录结构

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

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

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

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

4. details.vue为整合页面，分别调用左侧的leftComponentsPage.vue组件和右侧的rightConfigPage.vue组件，以及中间预览遍历组件按需加载样式组件

2. 数据流方向

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

computed: {
  imgObject() {
    this.comData.image.items.map((item) => {
      if (item.action !== 'nothing') {
        item.hotAreaStyle = {
          width: (item.actionArea === 'hotArea' ? item.hotAreas.width : item.imageWidth) + 'px',
          height: (item.actionArea === 'hotArea' ? item.hotAreas.height : item.imageHeight) + 'px',
          left: item.actionArea === 'hotArea' ? item.hotAreas.xAxis + 'px' : 0 ,
          top: item.actionArea === 'hotArea' ? item.hotAreas.yAxis + 'px' : 0
        }
      }
    })
    return this.comData.image
  }
}

小程序端

1. 小程序端页面组件开发

小程序端的页面样式和结构可以部分复用viewComponents中的代码，只需将结构标签div改为view，将img改为image，v-if改为wx:if，v-for改为wx:for对应组件放在根目录下的custom-components下的microPage目录里

主页面放在subpackage下面的microPage下

<view class="page-com" wx:for="{{ comData }}" wx:for-item="item" wx:key="index" wx:if="{{ pageStatus === 'ON' && pageDelete === 'NORMAL' }}">
  <!-- 图片组件渲染 -->
  <image-view comData="{{ item.components }}" wx:if="{{ item.comType === 'image' }}" />
  <!-- 按钮组件渲染 -->
  <button-view comData="{{ item.components }}" wx:if="{{ item.comType === 'btn' }}" />
  <!-- 悬浮组件渲染 -->
  <absolute-view comData="{{ item.components }}" showCom="{{ showCom }}" wx:if="{{ item.comType === 'absolute' }}" />
</view>

循环遍历传过来的页面组件数据，渲染不同的组件拿image图片组件举例，它的结构代码

<!-- 组件1：图片组件 -->
<view class="component-wrapper image-component" style="{{ wrapperStyle }}">
  <view class="image-list">
    <view class="image-item" wx:for="{{ imgObject.items }}" wx:for-index="imgIndex" wx:for-item="img"wx:key="imgIndex">
      <image class="image" src="{{ img.imageUrl }}" style="width: {{ img.imageWidth }}px;" wx:if="{{ img.imageUrl }}" mode="widthFix"></image>
      <view class="hotarea" style="{{ img.hotAreaStyle }}" wx:if="{{ img.action !== 'nothing' }}"bindtap="redirectPageTo" data-com="{{ img }}"></view>
    </view>
  </view>
</view>

由于小程序里面不支持动态样式绑定，我们将样式拼接成字符串，加入到组件列表里，另外后台传过来的像素单位是px，需要做转化rpx

attached() {
  this.data.comData.image.items.map((item) => {
    if (this.data.comData.image.action !== 'nothing') {
      let width = item.actionArea === 'hotArea' ? item.hotAreas.width : item.imageWidth
      let height = item.actionArea === 'hotArea' ? item.hotAreas.height : item.imageHeight
      let left = item.actionArea === 'hotArea' ? item.hotAreas.xAxis : 0
      let top = item.actionArea === 'hotArea' ? item.hotAreas.yAxis : 0
      item.hotAreaStyle = 'width: ' + app.pxToRpx(width) + 'rpx;height: ' +
      app.pxToRpx(height) + 'rpx;left: ' + app.pxToRpx(left) + 'rpx;top: ' + app.pxToRpx(top) + 'rpx;'
    }
  })
  this.setData({
    wrapperStyle: 'padding: 0 ' + app.pxToRpx(this.data.comData.image.pageMargin) + 'px',
    imgObject: this.data.comData.image
  })
}

像素单位转化方法封装在app下

pxToRpx(value) {
  return value * (750 / this.globalData.system.windowWidth);
}

三、开发步骤

后台部分

1. 增加组件图标

首先在leftComponentsPage.vue为该组件指定显示的图标

comList(val) {
  val.map((item) = >{
    switch (item.type) {
    case 'image':
      item.icon = 'pic';
      break;
    case 'absolute':
      item.icon = 'absolutebtn';
      break;
    case 'btn':
      item.icon = 'operation';
      break;
    default:
      item.icon = 'pic'
      break;
    }
  }) this.buildComList = val
}

2. 给组件增加配置文件

在configComponents目录下新增 组件名.vue 对应的配置文件，然后在components下的rightConfigPage.vue中引入该组件

<!-- 组件配置 -->
<div v-else-if="activeBtn === 'com'">
<!-- 1、图片组件 -->
<image-config v-if="previewComList[selectedComIndex].type === 'image'"
v-on="$listeners"
              :configData="previewComList[selectedComIndex]"></image-config>
<!-- 2、悬浮按钮组件 -->
<absolute-config v-if="previewComList[selectedComIndex].type === 'absolute'"v-on="$listeners" 
  :configData="previewComList[selectedComIndex]"></absolute-config>
<!-- 3、按钮组件 -->
<btn-config v-if="previewComList[selectedComIndex].type === 'btn'"
v-on="$listeners"
            :configData="previewComList[selectedComIndex]"></btn-config>
</div>

配置文件通过props接收传过来的configData数据，赋值给本地的data里面的configs，配置文件里的input通过v-mode监听改变configs，然后通过监听configs数据调用$emit调用父组件传过来的方法，达到数据从父组件 -> 孙子组件 -> 父组件的响应式

3. 给预览页面增加组件

在viewComponents下新建组件名.vue文件，然后在detail.vue中引入

<div :style="{position: 'relative'}" v-for="(com, comIndex) in previewComList" :key="comIndex">
  <div :class="['com-area', selectedComIndex === comIndex ? 'border-selected' : '']" @click="selectCom(com, comIndex)">
    <!-- 组件1：图片组件 -->
    <image-view :comData="com.configObj" :debugMode="debug" v-if="com.type ==='image'"></image-view>
    <!-- 组件2：悬浮按钮组件 -->
    <absolute-view :comData="com.configObj" :debugMode="debug" v-if="com.type ==='absolute'"></absolute-view>
    <!-- 组件删除按钮 -->
    <div v-if="selectedComIndex === comIndex" class="delete-com-btn" 
    @click="deleteCom(com, comIndex)">
    <i class="el-icon-delete"></i>
  </div>
</div>

小程序端

1. 增加组件对应的视图组件

在根目录custom-components下面的landingPage下新建以组件名命名的目录，里面包含js,json,wxml,wxss文件，在subpackage/landingPage/index.json中引入该组件

"usingComponents": {
  "image-view": "../../custom-components/landingPage/image/index",
  "button-view": "../../custom-components/landingPage/button/index",
  "absolute-view": "../../custom-components/landingPage/absolute/index"
}

在subpackage/landingPage/index.wxml文件中增加组件代码

<!-- 图片组件渲染 -->
<image-view comData="{{ item.components }}" wx:if="{{ item.comType === 'image' }}" />

最终实现

四. 注意事项

1. 小程序端需要做单位转化，将传过来的px统一转成rpx用

2. 小程序中组件中的wxml文件中每个热区的hotarea元素需要增加一个监控的class，命名以hotarea-xxx（xxx为后台定义热区的时候的命名）

---