火星网校
如何通过搭积木的方式快速开发H5页面？
发布时间：2024-08-06 12:21:29 浏览量：169次
去年推出的H5编辑器 H5-Dooring已经升级到2.0版本，从最初的基本页面生成框架到现在支持更丰富的组件资源、交互能力和数据追踪能力。通过搭积木的方式，利用已有组件库或外部资源，构建适合不同场景的H5应用，支持一键下载代码，轻松部署到服务器中。
设计初衷
H5-Dooring的主要目的是提高个人和企业开发H5页面的成本和效率，通过搭积木的方式实现快速开发，支持一键下载部署。新功能包括富文本组件、日历组件、按钮交互组件和专栏组件。
项目采用umi3.0、dva、antd4.0、react等技术栈，是一个全栈项目，核心功能是基于约定的DSL层、页面渲染层和后端能力实现的。
功能点和实现方案
新增功能包括富文本组件、日历组件、按钮交互组件和专栏组件，还支持自定义代码编辑和弹窗交互。具体实现方式包括国产富文本组件braft及日历组件zarm的应用。
项目同时封装了适配antd4.0的富文本编辑器，支持Form组件的受控模式。另外，新增日历组件可以自定义时间范围、主色和日期。
新增一键截图并生成高清海报图功能
为了提供快速成图方案，项目采用canvas对DOM进行转化，支持一键截图并生成高清海报图的功能。
推荐使用html2canvas和dom-to-image这两个canvas截图工具。H5-Dooring页面的截图过程可以参考项目实现。
新增右键菜单和自定义键盘快捷键功能
新增右键菜单功能，支持复制和删除元素；同时增加键盘快捷键支持，实现一键复制、粘贴、删除等操作。
推荐使用react-contexify和keymaster库实现右键菜单和键盘快捷键功能。
界面设计优化
通过优化界面设计，登录页面和预览页面得到大幅调整和优化，提升用户体验。
支持SDK引入
通过SDK引入的方式，H5-Dooring可以灵活植入到任何web系统中，定制功能和展示的API展示了项目提供的能力。
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
