博客

bpmn js 生成json_超给力 Vue.js 可视化H5拖拽编辑器Quark-H5

  • Post author:
  • Post category:vue


前两天有分享一个鲁班H5移动端页面生成器。今天再给大家推荐一款超优秀的Vue H5可视化布局编辑器QuarkH5。

aeba03eb336e8662e5e4b32cdebd21d9.png

luban-h5拖拽式页面生成器


quark-h5

基于 vue.js 开源的H5可视化拖放编辑器，

star高达1.7K+

。支持

拖拽组件并配置属性，支持动画及效果预览

，轻松快速上手制作h5页面。

72179ef0db71e98ade3612359df1bcda.gif

技术栈

  • Vue2.x + Vuex + Vue-Router
  • Element-UI饿了么pc组件库
  • Sass css预设编译器
  • Loadsh 工具类
  • Koa 基于Node.js的web开发框架
  • Mongodb 基于分布式存储数据库
86f3320b332b3df8031418f02dacf3c9.png

工程目录结构

5a40434b7a6f65c59980732f74434d0a.png

安装使用

# 下载项目git clone https://github.com/huangwei9527/quark-h5.git# 进入目录cd quark-h5# 安装依赖包npm install# 启动前端工程npm run dev-client# 启动服务器npm run dev-server# 编译engine.js模板引擎npm run lib:h5-swiper
1d7d8f81889f0ee56f99b0568af3b2be.png

编辑器实现思路

编辑器生成页面JSON数据，服务端负责存取JSON数据，渲染时从服务端取数据JSON交给前端模板处理。

c0e35ff85cc368224ccfa8b279c3c2a4.png

psd设计图导入生成h5页面

将psd每个设计图中的每个图层导出成图片保存到静态资源服务器中。 

# 安装psd依赖$ npm install psd --save
var PSD = require('psd');router.post('/psdPpload',async ctx=>{    const file = ctx.request.files.file; // 获取上传文件    let psd = await PSD.open(file.path)    var timeStr = + new Date();    let descendantsList = psd.tree().descendants();    descendantsList.reverse();    let psdSourceList = []    let currentPathDir = `public/upload_static/psd_image/${timeStr}`    for (var i = 0; i < descendantsList.length; i++){        if (descendantsList[i].isGroup()) continue;        if (!descendantsList[i].visible) continue;        try{            await descendantsList[i].saveAsPng(path.join(ctx.state.SERVER_PATH, currentPathDir + `/${i}.png`))            psdSourceList.push({                ...descendantsList[i].export(),                type: 'picture',                imageSrc: ctx.state.BASE_URL + `/upload_static/psd_image/${timeStr}/${i}.png`,            })        }catch (e) {            // 转换不出来的图层先忽略            continue;        }    }    ctx.body = {        elements: psdSourceList,        document: psd.tree().export().document    };})


*


注意

  • psd源文件大小最好不要超过30M，过大会导致浏览器卡顿甚至卡死
  • 尽可能合并图层，并栅格化所有图层
  • 较复杂的图层样式，如滤镜、图层样式等无法读取
2b8f0696295b69ed6af211db015ab55d.png
838a0ffd28b11af27186d7d4f1f5e9b3.png
6317b0461bb9866ee22885cfa7d2b849.png
ff88ada38f2b3250e1566d901489686b.png

市面上有很多优秀的可视化h5编辑器，如

MAKA

、

易企秀

等，不过都不是免费的。这款夸克H5免费开源使用，想技术提升的同学不可错过哟！ 

# 示例地址http://47.104.247.183:4000/# 仓库地址https://github.com/huangwei9527/quark-h5

ok，就分享到这里。感兴趣的同学可以自己去尝试下哈！