Quark H5 – HTML5 页面可视化编辑器 _生活知道

随着技术的发展，H5网页以其更为强大的表现能力，成为更加广泛的互联网内容展示技术。一些H5页面站点生成工具，能够制作出炫酷的 H5 页面，实现内容丰富的活动页、展示页、落地页等。Quark H5，实现了一个可视化的 H5 页面编辑器，能够通过简单的拖拽实现 H5 页面。
Quark H5
简介
Quark-h5，是 huangwei9527 在 Github 上开n源的 H5 页面可视化编辑器，仓库位于
，目前版本为 v1.0.0 。
Quark-h5 使用 Vue2 + koa2 开发，让不会写代码的人也能轻松快速上手制作H5页面，制作网站。Quark-h5 实现了一个基于前后端架构的可视化编辑器，同时，提供了详细的开发过程和思路，展示了从零开始实现一个H5编辑器项目完整设计思路和主要实现步骤。
Quark-h5
使用
Quark-h5 使用前后端分离架构，前端技术栈包括：
服务端技术栈包括：
要在本地进行开发，首先需要准备 mongodb 服务，配置文件位于 /server/config/index.js 。然后启动前端：
npm run dev-client
启动服务端：
npm run dev-server
要在本地部署，需要在全局安装 pm2：
npm install pm2 -g
使用 npm 启动：
npm run start
Quark-h5 项目的目录结构如下：
|-- client--------前端项目界面代码|--common--------前端界面对应静态资源|--components--------组件|--config--------配置文件|--eventBus--------eventBus|--filter--------过滤器|--mixins--------混入|--pages--------页面|--router--------路由配置|--store--------vuex状态管理|--service--------axios封装|--App.vue--------App|--main.js--------入口文件|--permission.js--------权限控制|-- server--------服务器端项目代码|--confog--------配置文件|--controller--------数据库链接相关|--extend--------框架扩展|--model-------Schema和Model|--middleware--------中间件|--core--------Koa MVC实现自动加载核心文件|--views--------ejs页面模板|--public--------静态资源|--router.js--------路由|--app.js--------服务端入口|-- common--------前后端公用代码模块（如加解密）|-- engine-template--------页面模板引擎，使用webpack打包成js提供页面引用|-- docs--------预留编写项目文档目录|-- config.json--------配置文件
Quark-h5 在前端编辑器生成页面 JSON 数据，服务端负责存取 JSON 数据，渲染时从服务端拉取数据交由前端模板处理。

文章插图
Quark-h5
一个 Quark-h5 单页面的数据格式定义如下：

{	title: '', // 标题	description: '', //描述	coverImage: '', // 封面	auther: '', // 作者	script: '', // 页面插入脚本	width: 375, // 高	height: 644, // 宽	pages: [], // 多页页面	shareConfig: {}, // 分享配置	pageMode: 0, // 渲染模式，用于扩展多种模式渲染，翻页h5/长页/PC页面等等}

而对于多页面而言，其中一页的数据结构如下：

{	name: '',	elements: [], // 页面元素	commonStyle: {backgroundColor: '',backgroundImage: '',backgroundSize: 'cover'	},	config: {}}

而一个页面 UI 元素的而数据结构如下：
【Quark H5 – HTML5 页面可视化编辑器】

{	elName: '', // 组件名	animations: [], // 图层的动画,可以支持多个动画	commonStyle: {}, // 公共样式 ， 默认样式	events: [], // 事件配置数据，每个图层可以添加多个事件	propsValue: {}, // 属性参数	value: '', // 绑定值	valueType: 'String', // 值类型	isForm: false // 是否是表单控件，用于表单提交时获取表单数据}

Quark-h5 提供了一个功能完善的可视化编辑器，包括：
Quark-h5
用户在左侧组件区域选择组件添加到页面上，编辑区域通过动态组件特性渲染出每个元素组件。
Quark-h5编辑器左侧选择组件区域可以通过一个配置文件定义可选组件新建一个 ele-config.js 配置文件：

export default [	{title: '基础组件',components: [{elName: 'qk-text', // 组件名，与组件库名称一致title: '文字',icon: 'iconfont iconwenben',// 给每个组件配置默认显示样式defaultStyle: {height: 40}}]	},	{title: '表单组件',components: []	},	{title: '功能组件',components: []	},	{title: '业务组件',components: []	}]

公共方法中提供一个function 通过组件名和默认样式获取元素组件JSON，getElementConfigJson(elName, defaultStyle)方法。
Quark-h5 支持包 psd 设计图导入 h5 页面，将psd每个设计图中的每个图层导出成图片保存到静态资源服务器中。服务端安装psd依赖
cnpm install psd --save
把获取的数据转义并返回给前端，前端获取到数据后使用系统统一方法，遍历添加统一图片组件。
Quark-h5 使用模板渲染，在engine-template目录下新建swiper-h5-engine页面组件，这个组件接收到页面JSON数据就可以把页面渲染出来。跟编辑预览画板实现逻辑差不多。然后使用vue-cli库打包命令将组件打包成engine.js库文件。ejs模板引入该页面组件配合json数据渲染出页面。
Quark-h5
总结
Quark-h5 基于 vue2 + koa2 实现可视化的 H5 制作工具代码编辑器有哪些，让不会写代码的人也能轻松快速上手制作H5页面，是一个优秀的H5制作、建站工具。其使用方便，上手即用代码编辑器有哪些，同时，还提供了详尽的开过步骤和过程，为相关工具的开发者和学习者提供了一个优秀的示范。
Quark-h5
本文到此结束，希望对大家有所帮助！

Quark H5 &#8211; HTML5 页面可视化编辑器

猜你喜欢

Quark H5 – HTML5 页面可视化编辑器