如何搭积木式的快速开发H5页面?
2个月前开源的H5编辑器 H5-Dooring 目前已经成功迭代到1.0版本, 从最开始的基本的页面生成框架到现在的支持更丰富的组件资源,交互能力和数据追踪能力, 期间做了很多的设计和迭代,也收获了很多网友的反馈和启发, 也有很多志同道合的朋友加入进来一起让 H5-Dooring 变的更好更强大, 在此特意分享一下我们最新的版本和功能实现.
设计初衷
笔者最开始开发这个项目的主要目的是提高个人和企业开发 H5 页面的成本和效率, 可以通过搭积木的方式, 利用已有组件库或外部组件资源(正在设计)搭建出适合不同场景的 H5 应用, 并且支持一键下载代码, 让技术人员轻松将H5页面部署到自己的服务器中. 笔者之前也做过很多代码生成的小应用, 但是都是为程序员少写代码而设计的, 不足以成为一个真正的开源项目, 所以笔者打算把H5-Dooring好好落地, 做成一个真正有价值的项目.
笔者接下来将介绍最新版H5编辑器的功能和实现思路, 以及如何实现所见即所得的方案尝试.
最新版编辑器效果预览
表单数据看板和数据分析:
技术栈
之前在笔者的文章中也介绍过H5-Dooring使用的技术栈和基础架构实现了, 感兴趣的可以参考 基于React+Koa实现一个h5页面可视化编辑器
最近我们在用nest重构项目的后端部分, 后期会做一定的技术方案介绍. 这里简单介绍一下项目实现的技术栈:
umi3.0 + dva + antd4.0
react + react生态
nest + mysql + redis
nginx + pm2
所以这个项目属于一个全栈项目, 很多核心功能的实现取决的约定好的DSL层, 页面渲染层和后端能力.
功能点和实现方案
笔者之前的系列文章中有介绍具体功能点和实现方案, 这里我们主要介绍1.0版本已有的新功能.
新增富文本组件, 日历组件, 按钮交互组件, 专栏组件
富文本组件笔者采用的是国产的braft, 预览如下: 因为项目用antd4.0开发的, 所以笔者专门封装了一套适配antd4.0组件的富文本编辑器, 支持Form组件的受控模式. 感兴趣的可以在github上学习具体的实现方式.
日历组件也是最近刚加的, 主要是为了实现更丰富的H5页面展示, 如下: 我们可以设置选择的时间范围, 被选择范围的主色, 日期等. 日期组件笔者主要采用的zarm的Calendar组件, 核心如下:
import React, { useState, memo, useEffect, useRef } from 'react';
import { Calendar } from 'zarm';
import styles from './index.less';
import { ICalendarConfig } from './schema';const CalendarPlayer = memo((props: ICalendarConfig & { isTpl: boolean }) => {const { time, range, color, selectedColor, round, isTpl } = props;const realRange = range.split('-');const [value, setValue] = useState<Date[] | undefined>([new Date(`${time}-${realRange[0]}`), new Date(`${time}-${realRange[1]}`)]);const [min] = useState(new Date(`${time}-01`));const [max] = useState(new Date(`${time}-31`));const boxRef = useRef<any>(null);return <div className={styles.calenderWrap} style={{borderRadius: round + 'px', pointerEvents: isEditorPage ? 'none' : 'initial'}} ref={boxRef}><Calendarmultiple={!!range}value={value}min={min}max={new Date(max)}disabledDate={(date:any) => /(0|6)/.test(date.getDay())}onChange={(value:Date[] | undefined) => {setValue(value);}}/></div>
});export default CalendarPlayer;
这也是实现Dooring组件的一种方式, 感兴趣的朋友欢迎为Dooring添加更多丰富组件支持.
之前还有个朋友问过我为什么项目使用了这么多组件在预览H5页面的时候速度还是很快, 这里我说明一下具体的实现方式, 如下图: 所以说我们移动端的产物和依赖的资源非常少, 并且在webpack层和服务器层做了优化, 所以移动端访问H5页面会非常快, 这块优化笔者后期会详细介绍, 目前对性能这块还在持续优化.
按钮交互组件笔者之前也写过文章专门详细的介绍过如何实现按钮交互, 自定义交互代码以及富文本弹窗交互等, 感兴趣的可以参考文章 低代码开发平台核心功能设计——组件自定义交互实现.
笔者这里展示一下具体的交互方式: 打开弹窗的交互用户可以自定义弹窗中的内容, 如下: 此时在手机端的预览效果如下: 对于自定义code
这块, 笔者集成了代码编辑库codemirror
, 这样我们就可以自定义实现交互能力了, 如下效果:
接下来是我们的专栏组件, 这块主要是基于业务需求做的业务组件, 实现方式和基础组件一样, 大家可以在线体验一下.
新增导入导出json文件功能
之所以会做这个功能主要是为了方便协作设计H5页面的, 比如说一个人设计了一个H5页面想让其他人一起参与设计, 可以将当前H5页面导出为JSON
, 另一个人通过导入这个JSON文件就可以立马渲染成一模一样的H5页面, 进而做修改或者完善. 如下:
关于如何实现下载json
, 笔者在之前的文章中也介绍过, 我们可以采用file-saver
这个第三方模块来做. 上传解析json
我们完全可以自己实现, 笔者采用的是 Upload + FileReader API
实现的, 核心代码如下:
const uploadprops = useMemo(() => ({name: 'file',showUploadList: false,beforeUpload(file, fileList) {// 解析并提取json数据let reader = new FileReader();reader.onload = function(e) {let data = e.target.result;importTpl && importTpl(JSON.parse(data))};reader.readAsText(file);}}), []);
新增一键截图并生成高清海报图功能
这块主要是为H5页面提供一个快速成图方案, 方便运营或者技术人员做页面效果评估用的, 在前端实现角度上我们主要采用canvas
对dom进行转化, 原理如下: 笔者之前也分享过具体的实现方案, 可以参考如下文章:
前端如何实现一键截图功能?
这里笔者推荐两个好用的canvas
截图工具, html2canvas
和 dom-to-image
. Dooring页面的截图过程如下:
新增右键菜单和自定义键盘快捷键功能
为了进一步提高用户搭建H5页面的效率, 笔者添加了右键菜单, 可以轻松的复制已制作好的组件, 也可以一键删除, 如下: 但是对于键盘控们来说更希望通过键盘来实现所有功能, 所以个笔者添加了键盘快捷键, 支持一键复制, 粘贴,删除元素, 如下: 这里推荐几个还好用的右键菜单和键盘快捷键的库, react-contexify
, keymaster
.
新增页面配置
这块主要是让H5页面有更多的自由度, 可以自定义页面标题, SEO
关键字, 页面背景和背景图等, 如下: 后续会添加更多页面自定义的能力.
界面设计优化
和0.1版本比界面上做了很大的调整和优化, 比如说我们的登录页面: 预览页面:
支持sdk引入
这块也是笔者之前做的一个尝试, 让H5-Dooring能通过sdk
的方式被植入到任何web
系统中,并且提供了定制功能和展示的api
, 主要如下: 实现原理笔者之前也在文章中介绍过了, 如下: 感兴趣的可以参考笔者的以下文章:
如何快速将你的应用封装成js-sdk?
后期规划
后期主要做的事情是继续丰富高质量业务组件, 重构github
上已有代码的设计架构, 做好视图, 数据, 逻辑的分层, 抽离页面渲染器和表单渲染器, 提供组件开放能力, 增强后台服务能力等, 欢迎感兴趣的朋友提出宝贵的建议和issue
, 持续迭代和优化.
github地址: https://github.com/MrXujiang/h5-Dooring
欢迎大家fork和star.
轻松一刻
如何搭积木式的快速开发H5页面?相关推荐
- 【微信小程序】如何搭积木式开发?
文章目录 一,宿主环境 二,通信模型 三,运行机制 四,组件组件 五,API 上文我们对项目的代码构成进行了讲解,了解了各文件的作用以及语言类型与web网页开发语言的区别. 那么今天就来和大家探讨一下 ...
- 竞赛无人机搭积木式编程(三)---用户自定义航点自动飞行功能(全局定位,指哪打哪)
竞赛无人机搭积木式编程(三)---用户自定义航点自动飞行功能(全局定位,指哪打哪) 无名小哥 2023年6月10日 用户通过对前面两讲中全国大学生电子设计竞赛真题植保无人机(2021).送货无人机(2 ...
- 5_竞赛无人机搭积木式编程——以2021年电赛G题植保无人机国奖标准完整复现为例学习
竞赛无人机搭积木式编程 --以2021年电赛G题植保无人机国奖标准完整复现为例学习 首先我们需要了解下自动飞行任务执行过程几组关键变量的用法与实际作用效果: flight_subtask_cnt用于控 ...
- 竞赛无人机搭积木式编程——以2022年TI电赛送货无人机一等奖复现为例学习(7月B题)
在学习本教程前,请确保已经学习了前4讲中无人机相关坐标系知识.基础飞行控制函数.激光雷达SLAM定位条件下的室内定点控制.自动飞行支持函数.导航控制函数等入门阶段的先导教程. 同时用户在做二次开发自定 ...
- Stark 组件:快速开发神器 —— 页面显示
说道 Stark 你是不是不会想到他--Tony Stark,超级英雄钢铁侠,这也是我的偶像. 不过我们今天要开发的 Stark 组件,倒是跟他的人工智能助手 JARVIS 有些类似,是帮助我们快速开 ...
- 企业微信开发H5页面授权 使用接口的问题
企业微信 h5踩坑指南 企业微信开发H5页面授权 使用接口的问题 开发企业微信的时候 h5页面需要获取登录用户的信息,这个时候就需要jsdk里面的 [开发文档] (https://work.weixi ...
- 移动端h5文字长按复制_移动端开发 H5 页面在 iOS手机上无法实现 长按复制文本 求解决...
移动端开发 H5 页面在 iOS手机上无法实现 长按复制文本 百度谷歌搜索的答案是 iOS手机系统自带 需要设置禁用 我们需求是要实现此功能 可是我在手机测试 并没有实现长按复制文本 之前这样设置可以 ...
- 如何快速开发H5列表页面
小编最近在做一个任务:要求实现一个在微信公众号里面的H5列表页面.拿到这个任务我们首先要进行需求分析,由于是在微信公众号也就是手机里面的H5列表,所以就不可能像PC上的列表页面那样进行分页处理,应该按 ...
- python搭积木_从零实现”搭积木式实现策略“的回测系统 part VI
本篇我们将对比经典量化回测框架pyalgotrade与ailabx,二者同时实现均线策略. 先看pyalgotrade的代码实现: from pyalgotrade import strategy f ...
最新文章
- 百度搜索_如何打开Intellij IDEA的代码提示功能?
- 关于 Delphi 中流的使用(6) 用流读写结构化文件
- 提取网页中的链接并生成xml
- 小程序获取form_id 与 小程序获取openid
- boost::hana::is_embedded用法的测试程序
- HDU - 3987 Harry Potter and the Forbidden Forest(最小割最少边数)
- aspen二元体系共沸组分_超详细 | 手把手教你组分结构预测
- UCenter 表结构
- java重定向cookie_response请求转发和重定向,cookie
- 第四:SpringBoot生成Api管理mysql内保存的测试数据(接口自动化平台扩展)
- 如何让Jython自动加载一个Jar包
- 2018-07-20
- [Swift]LeetCode921.使括号有效的最少添加 | Minimum Add to Make Parentheses Valid
- 基于Java的webapp_第一个 JAVA WEB 应用
- react学习笔记--一--移动端项目搭建
- ZYNQ PL开发流程
- Mock Server介绍
- cs61b实验记录(一)Lab2、Lab3
- C语言C++,dirent自创ddir结构体,实现更便捷的文件夹操作
- 解决Tortoise git没有红色、绿色勾勾的问题
热门文章
- be服务器未正常运行2.6.43,绝地求生be服务器未正常运行2.6.43怎么解决?
- 虚拟机服务器双通道和四通道,双通道和四通道区别
- 智慧城市的发展动力、推动因素、负面影响、挑战与应对
- TCP标志位syn,ack,fin以及序列号(seq),响应号(ack)
- 鸿蒙系统比安卓快,华为自研的鸿蒙系统比安卓快60%
- Unity 报错处理
- InetAddress类中的getHostName()方法的坑
- C++模板学习与粗浅理解
- c语言画笔的使用方法,新手必看:Photoshop笔刷画笔工具基本使用教程
- 微信上的文件怎样用计算机打出来,微信上的文件传到电脑上怎么打印出来