微页面设计开发指南

2022-05-18 200

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

一、目标实现

[ZI)79X%EK)_KT9B4P8NIUA.png

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

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

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

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

二、开发设计规范

后台部分

管理后台文件目录结构

X_0FW4L@L6RKVT~AG56@)G9.png

image

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

components目录放一些常用的组件，leftComponentsPage.vue和rightConfigPage.vue分别为左侧和右侧的集成组件
configComponents目录是右侧显示的对应组件和页面的配置相关的组件，每个组件对应一个配置，封装成对应的组件
viewComponents目录放置组件对应的样式结构代码，每个组件封装成一个样式组件，名称和配置组件一一对应
details.vue为整合页面，分别调用左侧的leftComponentsPage.vue组件和右侧的rightConfigPage.vue组件，以及中间预览遍历组件按需加载样式组件

2. 数据流方向

926D@VE]W}_T@K70G$9X%ZY.png

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
        }
      }
    ]
  }
}

下面为组件的属性，由云端接口直接返回，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'
    }
  }
}