# 自定义微页面文档

**Repository Path**: peanut429/custom_micro_page_document

## Basic Information

- **Project Name**: 自定义微页面文档
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-03
- **Last Updated**: 2021-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<font color="LightBlue"></font>
> ### 项目启动
shop_background 项目中的 .env.development.local 文件中定义 iframe 的地址(h5项目的运行地址)，例如：
```
VUE_APP_IFRAME_URL = 'http://192.168.X.X:8080'
```
在mp_h5 项目中的 .env.development.local 文件中定 CMS 的地址(CMS项目的运行地址)，例如：
```
VUE_APP_CMS_URL = 'http://192.168.X.X:9527'
```
然后启动两个项目，在后台管理系统中的 店铺 -> 店铺装修 -> 微页面 中可以进入。

# CMS 端
<details>

> ### 文件目录
```
src / views / decoration / costumPage
```
index.vue是自定义页面的入口文件，后面所提到的目录都是基于 src / views/ decoration / costumPage

>### 项目结构
- 左侧：component-lib 组件库列表
- 中间：page-view 效果预览（iframe）
- 右侧：coms-list-setting 属性设置

>### <a id="component-data">组件数据定义</a>
数据在 component_lib.json 中定义，字段含义如下：
属性名|用途
:-|:-
**version**|组件版本(默认 1.0)
**name**|组件中文名（会显示在左侧组件库列表中）
**componentName**|组件名称（[组件名称相关说明](#component-name))
**count**|组件在一个页面中可使用的数量
**icon**|组件图标（在左侧组件库列表中显示）
**offsetTop**|组件在页面中的所在位置，给0即可
**options**|组件内部属性

>### setting 目录
1. 存放各个 **<font color="LightBlue">内容组件设置</font>** 相关的组件，在右侧coms-list-setting中展示；
2. 内容设置组件应该直接创建在 **setting** 目录下
3. 向中间拖入组件后会对应加载相关的内容设置组件；
4. 该目录的内容设置组件需要在入口文件 **<font color="LightBlue">index.vue</font>** 中引入，并且必须以 **Setting** 结尾

>### 创建内容设置组件
每个内容设置组件需要引入一个mixins文件 **<font color="LightBlue">settingMixins.js</font>**，它会把外部的传入的 data 属性引入，把 settingWrapper 组件引入，最后定义一个 modifyProperties 函数，用于修改组件内 options 的相关属性，在内容设置组件中的调用方法如下：
```javascript
this.modifyProperties({ options: { targetProperty: value } })
```
对于每个内容设置组件，组件内容都是由 **<font color="LightBlue">settingWrapper</font>** 组件包裹，而 settingWrapper 组件接收一个 **title** 属性用于展示内容设置组件的标题；

> ### setting / common 目录
定义了一些高频使用的组件：[ColorPicker(颜色选择器)](#color-picker)，[RadioGroup(单选控件组)](#radio-group)，[Slider(滑块组件)](#slider)

> ###  <a id="color-picker">ColorPicker</a>
基于 [el-color-picker](https://element.eleme.cn/2.7/#/zh-CN/component/color-picker) 封装  
Props:
属性|类型|说明
:-|:-|:-
value|String|绑定值，支持 v-model
defaultColor|String|默认颜色
> ###  <a id="radio-group">RadioGroup</a>
基于 [el-radio](https://element.eleme.cn/2.7/#/zh-CN/component/radio) 封装  
Props:
属性|类型|说明
:-|:-|:-
value|String/Number/Boolean|绑定值，支持 v-model
data|Array\<object>|展示的内容，结构为[ { label: 显示的文字, tipText: 提示文字, image: 未选中时显示的图片, selectedImage: 选中时显示的图片 } ]
> ###  <a id="slider">Slider</a>
基于 [el-slider](https://element.eleme.cn/2.7/#/zh-CN/component/slider) 封装  
Props:
属性|类型|说明
:-|:-|:-
value|Number|绑定值，支持 v-model
min|Number|最小值
max|Number|最大值
step|Number|步长
precision|Number|绑定值精度

> ### <a id="component-name">组件名相关说明</a>
- 在 **component-lib.json** 中定义的组件名 **componentName** 应与 **setting** 目录下的内容设置组件名称一致(便于维护和寻找)

- 在组件被拖入iframe后，右侧设置组件会自动加载 `${componentName}Setting` 组件,
所以内容设置组件引入时，组件名应该为对应组件的 **<font color="LightBlue">componentName + Setting</font>**

- 将组件拖入iframe区域并触发 drop 事件后，CMS 会向 H5 端发送一条信息通知其添加组件，改信息内容是当前组件的[所有信息](#component-data)，然后 H5 端会根据 **componentName** 引入对应的组件，因此，H5 端定义的 **组件文件名** 和组件引入时定义的 **组件名** 都需要与 **componentName** 一致

</details>

# H5 端
<details open>

> ### 项目入口
CMS 端预览的 H5 页面入口在
```
src / views / preview-page.vue
```

> ### 自定义组件
目录路径：
```
src / components / decoration
```
所有组件应直接创建在该目录下。
所有组件需要定义接收一个名为 **<font color="LightBlue">options</font>** 的props，类型是一个 object，默认值为一个空对象：
```javascript
props: {
    options: {
        type: Object,
        default: () => ({})
    }
}
```
该对象会直接返回组件的详细设置内容。

</details>