Home

Awesome

随心秀(react版h5微场景编辑器)

当前正在进行的工作

项目分离,将核心编辑库独立成一个模块,通过npm可以一键引入

目标

打造一款现象级微场景编辑器 演示地址

预览

手机扫码预览

手机扫描体验

使用

# node 版本16+
# npm可使用国内镜像
npm config set registry https://registry.npmmirror.com/
# 首先安装lerna
npm i lerna -g
# 安装依赖
npm run install
# 构建包
npm run build
# 开发
npm start
# 浏览网站
http://localhost:9999/client.html
# 调试核心编辑器
http://localhost:9999/design.html
# 调试作品
http://localhost:9999/opus.html?id=作品编号

# 本地启动服务端
# 先将server/sql下sql文件导入数据库
npm run server

// 构建
npm run webpack

// 新增物料
npm run add

开发文档

功能

如何新增物料

// index.js 文件的导出需要如下格式
export default {
  edit: 编辑态组件,
  render: 渲染太组件,
  style: 属性面板配置文件(普通对象),
  size: { height: 物料高度 },
  name: 物料名称(层级管理器显示的名字),
};

// components.js 新增如下调用
import 物料组件 from '../resource/物料组件';

registerComponent(自定义组件唯一标识字符串, 物料组件);

后续规划

集中物料仓库建设

示例模板规划

交流群

QQ交流群
QQ交流群

Give a ⭐️ if this project helped you!