鲁班H5,一款前后端均开源的H5快速制作工具,可以理解为开源版本的易企秀、 人人秀或百度H5

6,462 阅读4分钟

本文中提到的“H5”均指代“基于移动端传播的可交互(不限于播放影音,页面滑动,擦除,页内动画,表单收集等方式)的轻量网站”)。相当于微信上的PPT,主要用于品牌方传播和推广的载体 - 摘自一个Geek范的H5页面制作工具

鲁班H5是什么?

  1. 是基于Vue2.0开发的,通过拖拽的形式,生成页面的工具,类似易企秀、百度 H5 等工具
  2. Github 地址:github.com/ly525/luban… ,欢迎关注与交流!

一些截图

动图

编辑器模块

image

image

作品列表

image

基础数据统计(PV、UV 统计未完成)

image

表单统计

image

工具诞生的目的

  1. 自己的工作:自己大部分时间在做的都是 ToB 端的项目,也就是大家通常认为的各种管理后台等等,确实是的。
  2. 三年的经历:在从事前端工作的三年时间中,在前面两年时间里,是没有产品经理、交互设计师、UI 设计师的,大部分时间是老大说需求,自己和后端同事商量,向运营、后端了解学习业务,上线,上线之后,有不合适的,再修改。第三年的时候,有了产品经理,流程并没有太大的区别,因为没有接触到交互设计师,产品同学在开始有一些并没有考虑到的需求,我们做了一个版本之后,发现又要改回在另外一个平台的交互,有些痛苦。
  3. 一些挥之不去的想法
  4. 可不可以做一个根据 JSON 或者 拖拽生成 管理后台的东西呢,这样的话,再有这样的需求,我们可以快速弄出来一个带有交互的原型,让产品同学自己去试用,或者说让产品同学自己去快速做一个出来(有的同学说,为何产品不用axure做一个,😄,不太会😂)
  5. 做不到啊:在研究拖拽生成管理后台的时候,慢慢的发现技术难度略大,自己的能力不足以支持这么大的一个架构。
  6. 那把想法向移动端偏移点吧:心想:如果以后有简单的移动端的需求,就可以让产品或者设计师同学自己去拖拖拽拽生成了。有复杂的需求,技术同学再做支持,甚至可以考虑支持脚本编程,这样在产品或者设计师同学做的基础上,我们直接补充业务逻辑就OK了(后面研究了下,发现确实可行,有兴趣的同学,我们可以一起交流)
  7. 到现在的结果: 在业余时间的研究(找了GitHub的很多demo,以及请教了网路上的很多厉害的同学,最后会提到),发现技术上确实可行。经过了两三个月的调研,阅读资料,加上两个月左右的 coding。终于有了一个略微能拿出手的小项目了,也就是标题中提到的:[鲁班H5],一款前后端都开源的H5开发工具,可以理解为开源版本的易企秀或人人秀。

相关地址和链接:

  1. GitHub 地址:github.com/ly525/luban…

  2. 前端和后端都已经开源,更多的细节和详情,请阅读 GitHub的 README,如果有任何不清楚的地方,please open an issue

  3. 具体的技术栈和本地开发的步骤,在 README 中已经提及,前往阅读即可

    技术栈(当前):前端:Vue.js + 后端:Strapi.js (带有管理后台) + 存储:Sqlite (or Mysql)

  4. 在线预览地址:ly525.github.io/luban-h5/ (该预览版本不太完整,因为无法和后端API 结合,最好在本地进行dev 预览)

鲁班H5 的功能列表

前端

  1. 编辑器

    • 参考线
    • 吸附线、组件对齐
    • 拖拽改变组件形状
    • 元素: 复制(画布)
    • 元素: 删除(画布)
    • 元素: 编辑(画布)
    • 页面:新增
    • 页面:复制
    • 页面:删除
    • 快速预览
    • 撤销、重做
  2. 组件系统

    • 文字
    • 普通按钮
    • 表单按钮
    • 表单输入框
    • 普通图片
    • 背景图
    • 视频(Iframe形式)
  3. 增强功能

    • 上传 PSD,一键转换为 H5(已经调研,可以实现)
    • 图片库
    • 第三方无版权图片搜索
    • 自定义脚本(已经调研,可以实现)
    • 动画(已经调研,可以实现)

后端

- [x] 创建、保存、更新作品
- [x] 表单数据收集
- [x] 表单数据展示
- [x] 在线预览
- [x] 二维码预览
- [ ] PV、UV 统计(已经调研,可以实现)

本地开发

本地开发请参照 readme

目前仍然在不断迭代中,如果大家有任何的建议和建议,可以加入钉钉群、QQ群(微信群有二维码问题就不放了)和我反馈、交流。当然在GitHub 提 issue 也是非常欢迎的

交流群


因为微信群二维码会过期,所以 微信群和QQ群 的二维码请前往查看鲁班-H5 微信群和QQ群 查看


钉钉讨论组(推荐, 对代码排版相对友好)