# h5-block-web

**Repository Path**: visual-development/h5-editor-admin

## Basic Information

- **Project Name**: h5-block-web
- **Description**: react 搭建可视化H5页面，支持PSD导入页面, 埋点上报，错误监控
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: http://landing.ith5.cn
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2021-10-14
- **Last Updated**: 2022-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: 脉迈
 * @Date: 2021-09-15 11:18:38
 * @LastEditors: 脉迈
 * @LastEditTime: 2022-01-18 18:38:08
-->

# H5 移动页面快速搭建，可视化搭建

> 项目预览地址：

http://landing.ith5.cn/editor

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

持续更新中。。。。。

线上网站没有及时更新，需要的可以下载git，本地运行。

技术交流联系🤵‍♂️：

微信：ith5cn

![展示](demo.png)

# 技术点

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

# 原理

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

# 实现功能

√ 文字编辑

√ 图片编辑

√ 模块编辑

√ 导入 PSD

# 待实现功能

## 前端功能

- 预览/上线
- 页面设置
- 微信 sdk 接入
- PC 端搭建编辑

## 后端功能

- 埋点上报
- 错误监控
- 导入 psd
- 素材库
- 字体库

# 项目启动

> 安装依赖

`npm install`

> 后端支持

需要部署后端，地址： https://gitee.com/visual-development/h5-block-server

> 修改项目配置

`src/config/index`

```js
export default {
  RequestBaseUrl: "//192.168.0.86:3001", // 后端启动后地址
  UploadBaseUrl: "//192.168.0.86:3001", // 可以使用cdn上传地址，目前这个是后端启动后地址
};
```

> 启动项目

`npm run start`

> 预览

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