# h5-editor-admin

**Repository Path**: sync-github/h5-editor-admin

## Basic Information

- **Project Name**: h5-editor-admin
- **Description**: react 搭建可视化H5页面编辑后台
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2021-10-27
- **Last Updated**: 2021-10-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: 脉迈
 * @Date: 2021-09-15 11:18:38
 * @LastEditors: 脉迈
 * @LastEditTime: 2021-10-27 18:40:59
-->

# H5 可视化搭建

目前只是支持，图片、文字、按钮的编辑；

![展示](demo.png)

# 技术点

- Typescript
- Recoil 状态管理
- React 前端框架
- antdDesign UI 框架

# 原理

1. 通过`position`进行页面定位，考虑到分模块，这里引入了一个模块的改变，组件全部都在模块中定位
2. 页面的搭建都是由数据组成，然后进行遍历，点击`组件`把数据添加到`数据列表`中,从而实现数据保存；
3. 通过`Recoil` 状态管理工具，对列表进行数据管理操作
4. 列表数据进行渲染遍历

# 难点

1. 移动端页面计算单位，这里使用的是`rem`单位，在渲染的时候，需要通过计算转换；
2. (待实现)转换`PSD`文件，这里通过`PSD.js`库进行解码，然后`Node`将图片文件传到服务器，返回图片地址和处理渲染数据

# 项目启动

> 安装依赖

`npm install`

> 启动项目

`npm run start`

> 预览

```
http://localhost:3000/editor
```