ly525 / luban-h5

[WIP]en: web design tool || mobile page builder/editor || mini webflow for mobile page. zh: 类似易企秀的H5制作、建站工具、可视化搭建系统.

📖中文文档 || 📖English Docs | README(en) || 论坛/社区

鲁班 H5

可视化搭建，拖拽生成移动端页面

Mobile Page Builder&Generator with Drag&Drop

目录

• 鲁班H5是什么？
• Demo
• Features
• 快速开始
• 更多说明
  • 前端组件说明
  • 技术栈（当前）
• 👨🏻‍💻👩🏻‍💻交流群

鲁班H5是什么？

1. 鲁班H5是基于Vue2.0开发、通过拖拽快速生成页面的平台
2. 类似 易企秀、Maka、百度 H5 等平台

Demo

在线访问地址

🔗Links/相关链接

源码	文档	教程	社区
GitHub	中文文档	视频-快速开始(哔哩哔哩)	论坛/社区(官方推荐)
Gitee (国内镜像)	English Docs	自定义组件教程(WIP)	Gitter
	README(En)	核心实现原理	中文社区/论坛(腾讯吐个槽)

🔗生态

后端集成	官方组件库	支撑/辅助组件	自定义组件	RoadMap
Strapi.js (官方后端API)	轮播图	图片库	自定义组件开发脚手架	RoadMap/开发计划
SpringBoot2-JPA	普通按钮	文本对齐	自定义组件开发教程
SpringBoot2-Mybatis-plus			视频教程(WIP)

快速体验

以下方式，任选其中一种即可

一、一键脚本（推荐！）

git clone https://github.com/ly525/luban-h5 && cd luban-h5
# 安装依赖，构建前后端（安装依赖会耗时略长，请耐心等待）
./luban-h5.sh init

# 启动项目访问 http://localhost:1337 即可
./luban-h5.sh start

# ./luban-h5.sh stop

二、本地安装了 Node、Yarn

git clone https://github.com/ly525/luban-h5
cd luban-h5 # 项目根目录

# 后端
cd back-end/h5-api && yarn && yarn dev

# 前端
# 新开一个终端，在项目根目录执行如下命令
cd front-end/h5 && yarn && yarn build:engine && yarn dev

# 启动项目访问 http://localhost:1337 即可

• 更多细节，请参照 鲁班H5-在线文档 的 快速开始 章节，进行配置即可

• 如果遇到接口 403 问题，请参照 快速开始 章节，搜索关键字：403 即可

交流群

钉钉群	微信公众号	微信
		请备注：鲁班H5交流

更多细节请阅读在线文档

Features

1. 编辑器

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

2. 组件系统

   • 文字
   • 普通按钮
   • 表单按钮
   • 表单输入框
   • 普通图片
   • 背景图
   • 背景音乐
   • 视频（Iframe形式）

3. 增强功能

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

4. 后端 API

   • 创建、保存、更新作品
   • 表单数据收集
   • 表单数据展示
   • 在线预览
   • 二维码预览

技术栈（当前）

1. 前端：Vue.js
2. 后端：Strapi
3. 存储：Sqlite

如何贡献

所有合理的改动、优化、修正，新的组件，或者文档的修正、更新 相关的提交都会被接受

捐赠作者

如果你觉得这个项目对你有用或者有所启发，可以请作者喝杯果汁：

微信捐赠	支付宝捐赠

luban-h5's Issues

feat(plugin): Tabs

简单的动作系统：点击跳转、打电话等

复制页面

多页面预览

#!zh: 支持删除页面 #!en: supportdelete page

feat: 使用 animate.css 添加动画

see more https://github.com/ly525/luban-h5/releases/tag/v1.4.0

形状插件库

图床/Image Backup

编辑器模块

作品列表

基础数据统计（PV、UV 统计未完成）

表单统计

模板

feat: plugin/component generator cli

提供

1. 插件快速生成脚手架
2. 插件可视化生成工具，能够及时预览集成在鲁班H5中的效果

添加为何添加 class 的原因：与 handleClickCanvas 配合

luban-h5/front-end/h5/src/components/core/editor/canvas/edit.js

Lines 24 to 29 in eecd655

	class: 'element-on-edit-canvas', // TODO 添加为何添加 class 的原因：与 handleClickCanvas 配合
	props: element.pluginProps, // #6 #3
	nativeOn: {
	// 高亮当前点击的元素
	// click: () => this.handleClickElementProp(element)
	}

---

This issue was generated by todo based on a TODO comment in eecd655. It's been assigned to @ly525 because they committed the code.

#!en: collect and show form data #!zh:表单数据统计

从 editor 中抽取 简单的渲染引擎

通过属性编辑器，配置脚本参数

修改画布上节点的层级

置顶、置底

feat: 多页面

素材库

发布模块

85b6cf6

改进【当前选中元素】的样式/ improve the style for editingElement

fixme: update plugin props in vuex with dispatch

luban-h5/front-end/h5/src/components/core/editor/edit-panel/props.js

Lines 34 to 39 in 25dbd43

	// TODO fixme: update plugin props in vuex with dispatch
	editingElement.pluginProps[propKey] = e.target ? e.target.value : e
	}
	}
	}
	return (

---

This issue was generated by todo based on a TODO comment in 25dbd43. It's been assigned to @ly525 because they committed the code.

生成预览二维码

复制、删除画布上的节点

复制画布上的节点

#!zh: 增强插件属性的编辑器 #!en: enhance prop editor

将 插件的 EditorConfig.components 添加到 this.$options.components 上即可

表单提交按钮

fixed toolbar for scale canvas

#!zh: 基本版本 Editor(#!en: basic editor): init editor

实现思路：

点击插件 -> 添加到画布上 -> 点击画布上的插件 -> 右侧编辑面板显示可以编辑的属性、修改属性值 -> 更新画布

• 1. 通过 Vue.extends 集成核心编辑器
• 2. 通过 npm install 的形式集成各种插件，如按钮、图片等 #100
• 3. 点击插件列表中某个插件的时候，
  • 1. 获取该插件的可以配置的 props，设置默认值
  • 2. 将其映射到 Props Editor Panel，不同的prop 调用不同的编辑器即可
  • 3. 执行 currentPage.elements.push(new Element({ pluginName} = pluginMeta, defaultProps))
• 6. vueInstance.render('div', {}, currentPage.elements)，将该插件绘制到 中间画布上

[feature] 拖动改变插件形状

使用 mixin，支持自定义脚本 step1

add comment

luban-h5/front-end/h5/src/components/core/support/shape.js

Lines 127 to 132 in eecd655

	// TODO add comment
	return true
	},
	handleMousedown (e) {
	if (this.handleMousedownProp) {
	this.handleMousedownProp()

---

This issue was generated by todo based on a TODO comment in eecd655. It's been assigned to @ly525 because they committed the code.

关于箭头函数中的this：这里不能写成箭头函数，否则 this 为 undefined，为何？

luban-h5/front-end/h5/src/views/Editor.vue

Lines 206 to 211 in 9e8e89f

	// TODO 关于箭头函数中的this：这里不能写成箭头函数，否则 this 为 undefined，为何？
	// http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/
	// https://tangxiaolang101.github.io/2016/08/01/%E6%B7%B1%E5%85%A5%E6%8E%A2%E8%AE%A8JavaScript%E7%9A%84%E6%89%A7%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%92%8C%E6%A0%88%EF%BC%88What%20is%20the%20Execution%20Context%20&%20Stack%20in%20JavaScript%EF%BC%89/
	get () {
	return this.value
	},

---

This issue was generated by todo based on a TODO comment in 9e8e89f. It's been assigned to @ly525 because they committed the code.

表单输入框

we can show the plugins shortcuts here

luban-h5/front-end/h5/src/components/core/editor.js

Lines 226 to 231 in 8b43fd9

	{/* TODO we can show the plugins shortcuts here
	<a-menu
	theme="dark"
	mode="horizontal"
	defaultSelectedKeys={['2']}
	style={{ lineHeight: '64px', float: 'left', marginLeft: '30%', background: 'transparent' }}

---

This issue was generated by todo based on a TODO comment in 8b43fd9. It's been assigned to @ly525 because they committed the code.

#!zh: 优化代码

luban-h5/front-end/h5/src/components/core/editor/canvas/edit.js

Lines 9 to 14 in c305946

	// TODO #!zh: 优化代码
	// generate vertical line
	drawVLine (newLeft) {
	this.editingElement.commonStyle.left = newLeft
	this.vLines = [{ left: newLeft }]
	},

---

This issue was generated by todo based on a TODO comment in c305946. It's been assigned to @ly525 because they committed the code.

删除画布上的节点

通过 ref 实现 自定义脚本中 method的调用

feat: 放大、缩小画布

feat(plugin)：轮播图

feat(plugin): background

perf(picture plugin) #!zh: 更新 Picture 插件的默认占位图 #!en: using local image replace origin online image

#!zh: 使用相对路径的图片 替换原来的 网络图片地址。防止因为网络延迟打开速度过慢，用户以为点击图片插件无效
#!en: using local image replace origin online image. Sometimes, user don't see the picture after they clicked the picture plugin, just because the network is very slow and it takes too much time to load image from network

we can show the plugins shortcuts here */}

luban-h5/front-end/h5/src/components/core/editor/index.js

Lines 64 to 67 in 25dbd43

	{/* TODO we can show the plugins shortcuts here */}
	<a-menu
	theme="dark"
	mode="horizontal"

---

This issue was generated by todo based on a TODO comment in 25dbd43. It's been assigned to @ly525 because they committed the code.

#!zh: 在编辑面板编辑属性，并同步到中间画布 #!en: edit plugin props at the right panel

#!zh

1. 获得编辑器的配置
2. 使用 Plugin的 Props 的 defaultValue 初始化 Element
3. 当点击画布元素的时候，设置其为 editingElement
4. 在右边属性编辑器部分，遍历所有可以编辑的的属性
5. 渲染属性对应的编辑器

$createElement(prop.editorType,  // 比如 el-input、el-input-number
  {
     props: 编辑器的一些props, // 比如编辑器的一些配置，比如el-range 需要max、min，
     value: 属性的对应初始值 // 一般取自 element  对应的 props 的值,
     on: { input: handler } // v-model 处理用户在编辑器改变了属性值
  }
}

6. 最重要就是在v-model 对应的 @input 事件中，改变了对应prop值之后，重新渲染canvas即可，不过这一步会自动执行，因为 renderCanvas 会根据 elements 的变化自动更新画布

#!en

1. getEditorConfigOfPlugin({name}}
2. new Element({name, editorConfig})
3. init Element with editorConfig(props default value)
4. set editing element when clicking some element
5. loop editable props of the editingElement
6. render the prop editor with {propEditorType, propEditorProps, propValue, @input} = plugin.editorConfig.propsConfig
7. when the value of prop is changed by editor, the canvas will be updated again.

#!zh: 在 string template 中取值

需要在 v-for 的时候，取值，绘制对应的icon

错误写法

如下的写法会报错，因为此时的 ${item.value} 取的是在 Editor.vue 中声明的变量，而非v-for="(item, index) in textAlignTabs"中的 item

     template: `
          <div class="wrap">
            <el-radio-group v-model="value_" size="small">
              <el-tooltip effect="dark" :content="item.label" placement="top" :key="index" v-for="(item, index) in textAlignTabs">
                <el-radio-button :label="item.value">
                  <i :class="['fa', 'fa-align-${item.value}']" aria-hidden="true"></i>
                </el-radio-button>
              </el-tooltip>
            </el-radio-group>
          </div>
  `,

正确写法

template: `
          <div class="wrap">
            <el-radio-group v-model="value_" size="small">
              <el-tooltip effect="dark" :content="item.label" placement="top" :key="index" v-for="(item, index) in textAlignTabs">
                <el-radio-button :label="item.value">
                  <i :class="['fa', 'fa-align-'+item.value]" aria-hidden="true"></i>
                </el-radio-button>
              </el-tooltip>
            </el-radio-group>
          </div>
`,

视频插件（iFrame 形式）

#!zh将插件该类别分组 #!en: group plugins with type

commit dcf9c06

feat(plugin): city selector

上传图片至OSS

• 七牛

• 阿里云

• 腾讯云

• AWS

#!zh: 将plugin的props放到element.pluginProps 上，而非直接添加到element上

主要目的是防止 plugin 的props 和 new Element() 的 属性冲突，造成this上的值被覆盖

why logogram for color does't work?

https://github.com/ly525/luban-h5-open/blob/d04cf043b7558729a15123456fbc2a0025f08c3e/front-end/h5/src/views/Editor.vue#L122-L125

---

This issue was generated by todo based on a TODO comment in d04cf04. It's been assigned to @ly525 because they committed the code.

feat(plugin) music

plugin的prop中是 name 的，会覆盖 element.name

https://github.com/ly525/luban-h5-open/blob/d04cf043b7558729a15123456fbc2a0025f08c3e/front-end/h5/src/views/Editor.vue#L288-L293

---

This issue was generated by todo based on a TODO comment in d04cf04. It's been assigned to @ly525 because they committed the code.