如何用积木快速开发H5页面？
时间：2023-03-16 23:37:37
科技观察
2个月前开源的H5编辑器H5-Dooring，现已成功迭代到1.0版本。从最初的基础页面生成框架，到现在支持更丰富的组件资源、交互能力和数据追踪能力，做了很多H5-Dooring的设计和迭代，也得到了很多网友的反馈和启发，还有很多点赞——有心人的加入，让H5-Dooring变得更好更强大。在这里，我们想分享一下我们的最新版本和功能实现。作者的设计初衷当初开发这个项目的主要目的是为个人和企业提高开发H5页面的成本和效率。通过积木，我们可以利用现有的组件库或外部组件资源（设计中）构建适用于不同场景的H5应用。并且支持一键代码下载，技术人员可以轻松的将H5页面部署到自己的服务器上。作者之前做过很多代码生成的小应用，但是都是为了让程序员少写代码，不足以成为一个真正的开源项目，所以作者打算好好的实现H5-Dooring和使它成为一个真正有价值的项目。接下来笔者将介绍最新版H5编辑器的功能和实现思路，以及如何实现所见即所得的解决方案。最新版编辑器效果预览表格数据看板和数据分析：技术栈在笔者的文章中，我还介绍了H5-Dooring使用的技术栈和基础设施。有兴趣的可以参考基于React+Koa页面可视化编辑器实现一个h5最近在用nest重构项目后端部分，后面会介绍一些技术方案。这里简单介绍下项目的技术栈：umi3.0+dva+antd4.0react+react生态巢+mysql+redisnginx+pm2，所以本项目是一个全栈项目。很多核心功能的实现依赖于约定的DSL层、页面渲染层和后端能力。功能点和实现方案在笔者之前的系列文章中有介绍，具体的功能点和实现方案，这里主要介绍1.0版本已经具备的新功能。新增富文本组件、日历组件、按钮交互组件、栏目组件。笔者使用的是国产的braft，预览如下：使用antd4.0开发，所以笔者特地封装了一套适配antd4.0组件的富文本编辑器，支持Form组件的受控模式。有兴趣的可以去github上学习具体的实现方法。日历组件也是最近新增的，主要是为了实现更丰富的H5页面展示，如下：我们可以设置optional选中的时间范围，选中范围的主色，日期等日期组件我主要使用Zarm的Calendar组件，核心如下：importReact,{useState,memo,useEffect,useRef}from'react';import{Calendar}from'zarm';importstylesfrom'./index.less';import{ICalendarConfig}from'./schema';constCalendarPlayer=memo((props:ICalendarConfig&{isTpl:boolean})=>{const{time,范围，颜色，selectedColor，round，isTpl}=props;constrealRange=range.split('-');const[value,setValue]=useState([newDate(`${time}-${realRange[0]}`),newDate(`${time}-${realRange[1]}`)]);const[min]=useState(newDate(`${time}-01`));const[max]=useState(newDate(`${time}-31`));constboxRef=useRef(null);return/(0|6)/.test(date.getDay())}onChange={(value:Date[]|undefined)=>{setValue(值);}}/>
});exportdefaultCalendarPlayer;这也是Dooring组件的一种实现方式。欢迎有兴趣的朋友为Dooring添加更丰富的组件支持。有朋友问我为什么项目在预览H5页面的时候用了那么多组件速度还是很快的。这里我就具体的实现方法进行说明，如下图：所以我们的移动端产品和依赖资源很少，我们对webpack层和server层进行了优化，所以移动端访问H5页面会很方便fast，后面作者会详细介绍这个优化，性能还在优化中。按钮交互组件的作者也写了一篇文章详细介绍了如何实现按钮交互、自定义交互代码和富文本弹窗交互等，有兴趣的可以参考文章Low的核心功能设计-代码开发平台-组件自定义交互的实现。笔者这里展示了具体的交互方式：打开弹窗的交互用户可以自定义弹窗中的内容，如下：此时在手机端预览效果如下：对于自定义代码，作者集成了代码编辑库codemirror，方便我们自定义交互能力，效果如下：接下来是我们的栏目组件，主要是根据业务需要制作的业务组件实现在与基本组件相同的方式。您可以在线体验它们。之所以新增导入导出json文件功能做这个功能，是为了方便H5页面的协同设计。比如一个人设计了一个H5，如果想让其他人参与页面的设计，可以将当前的H5页面导出为JSON，另一个人通过导入这个JSON文件就可以立即渲染同一个H5页面，然后修改或改进它。如下：关于如何实现下载json，笔者在上一篇文章中也介绍过，我们可以使用第三方模块file-saver来实现。我们可以自己实现上传解析json。作者使用Upload+FileReaderAPI。核心代码如下：constuploadprops=useMemo(()=>({name:'file',showUploadList:false,beforeUpload(file,fileList){//解析并提取json数据letreader=newFileReader();reader.onload=function(e){letdata=e.target.result;importTpl&&importTpl(JSON.parse(data))};reader.readAsText(file);}}),[]);新增一键截图生成高清海报图功能。图表方案方便运营或技术人员评估页面效果。从前端实现的角度来看，我们主要是使用canvas来转换DOM。原理如下：之前笔者分享过具体的实现方案，可以参考以下文章：如何实现前端一键截图功能？这里推荐两个好用的canvas截图工具，html2canvas和dom-to-image。Dooring页面截图过程如下：添加右键菜单和自定义快捷键功能，进一步提高用户搭建H5页面的能力为了效率，作者添加了右键菜单，可以方便的复制已经制作好的组件，也可以一键删除，如下：但是对于键盘用户来说，他们更喜欢用键盘来实现所有的功能，所以作者增加了一个键盘快捷键，支持一键复制，粘贴、删除元素，如下：这里有一些好用的右键菜单和快捷键库，react-contexify，keymaster。新的页面配置主要是为了让H5页面有更多的自由度，可以自定义页面标题、SEO关键词、页面背景和背景图等，具体如下：后续会增加更多的页面自定义功能。界面设计优化和0.1版本在界面上做了很大的调整和优化，比如我们的登录页面：预览页面：支持sdk的引入也是笔者之前的一次尝试，让H5-Dooring可以植入任何网页系统通过sdk，并提供自定义功能和展示的api，主要如下：笔者在之前的文章中也介绍过实现原理，如下：
