项目预览地址:
目前只是支持,图片、文字、按钮的编辑;
持续更新中。。。。。
线上网站没有及时更新,需要的可以下载git,本地运行。
技术交流联系🤵♂️:
微信:ith5cn
==================================================================================================================================================================================================================================================================================================================================
技术点
- Typescript
- Recoil 状态管理
- React 前端框架
- antdDesign UI 框架
======================================================================
原理
- 通过
position
进行页面定位,考虑到分模块,这里引入了一个模块的改变,组件全部都在模块中定位 - 页面的搭建都是由数据组成,然后进行遍历,点击
组件
把数据添加到数据列表
中,从而实现数据保存; - 通过
Recoil
状态管理工具,对列表进行数据管理操作 - 列表数据进行渲染遍历
=================================================================================================================================================================
实现功能
√ 文字编辑
√ 图片编辑
√ 模块编辑
√ 导入 PSD
====================================
待实现功能
前端功能
- 预览/上线
- 页面设置
- 微信 sdk 接入
- PC 端搭建编辑
=================================================
后端功能
- 埋点上报
- 错误监控
- 导入 psd
- 素材库
- 字体库
================================================
项目启动
安装依赖
npm install
后端支持
需要部署后端,地址: gitee.com/visual-deve…
修改项目配置
src/config/index
export default {
RequestBaseUrl: "//192.168.0.86:3001", // 后端启动后地址
UploadBaseUrl: "//192.168.0.86:3001", // 可以使用cdn上传地址,目前这个是后端启动后地址
};
启动项目
npm run start
预览
http://localhost:3000/editor
==========================================================================================================================================================================================================================================================================================================================================================================================================================