Skip to content

lzuntalented/lz-h5-edit

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

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

当前正在进行的工作

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

目标

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

预览

手机扫码预览

手机扫描体验

使用

# 首先安装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

开发文档

功能

  • 编辑器功能

    • 拖拽
    • 缩放
    • 旋转
    • 动画
    • 撤销
    • 重做
    • 组合元素
    • 页面管理
    • 层级管理
    • 辅助线显示
  • 物料

    • 文本
    • 图片
    • QQ语言通话
    • 背景
    • 地图
    • 音效
    • 模板
    • 视频
    • 艺术字
  • 示例

    • 示例-端午节
    • 示例-儿童节
    • 示例-高考加油
    • 示例-1024
    • 示例-双十一
    • 示例-感恩节
  • 用户模块

    • 登录
    • 注册
    • 作品列表
    • PV数据统计
    • 表单数据统计

如何新增物料

  • 1.在src/resource目录下新建组件
// index.js 文件的导出需要如下格式
export default {
  edit: 编辑态组件,
  render: 渲染太组件,
  style: 属性面板配置文件(普通对象),
  size: { height: 物料高度 },
  name: 物料名称(层级管理器显示的名字),
};
  • 2.在src/components.js文件中使用 registerComponent 注册物料
// components.js 新增如下调用
import 物料组件 from '../resource/物料组件';

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

后续规划

集中物料仓库建设

  • 字体库建设
  • 形状库建设
  • 艺术字建设(对文字阴影的绘制)
  • 背景图片选择及裁剪
  • 图层名称支持自定义
  • 支持组动画序列播放
  • 作品分享操作
  • 翻页动画支持多种方式

示例模板规划

  • 圣诞节模板
  • 元旦节模板
  • 2019总结模板

交流群

QQ交流群
QQ交流群

Give a ⭐️ if this project helped you!

About

随心秀(react版h5微场景编辑器),一款类似【易企秀】【兔展】的H5微场景编辑器

Resources

Stars

Watchers

Forks

Packages

No packages published