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

231 阅读1分钟

项目预览地址:

landing.ith5.cn/editor

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

持续更新中。。。。。

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

技术交流联系🤵‍♂️:

微信:ith5cn

展示

==================================================================================================================================================================================================================================================================================================================================

技术点

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

======================================================================

原理

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

=================================================================================================================================================================

实现功能

√ 文字编辑

√ 图片编辑

√ 模块编辑

√ 导入 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

==========================================================================================================================================================================================================================================================================================================================================================================================================================