h5-Dooring

h5-Dooring

开源H5可视化页面编辑器 轻松创建专业落地页

H5-Dooring是一个开源的H5可视化页面编辑器,提供组件拖拽、可视化编辑、多页面管理等功能。用户可以轻松创建专业的H5落地页,适用于营销活动、产品展示等场景。该工具采用React技术栈开发,致力于简化H5页面制作流程,提高开发效率。

H5-Dooring可视化页面配置开源低代码平台ReactGithub开源项目

Make H5 as easy as building blocks!

<p align="center"> <img src="http://cdn.dooring.cn/dr/logo.ff7fc6bb.png" width="260" alt="H5编辑器,H5制作神器,H5 editor,lowcode"> </p> <h1 align="center">Welcome to H5-Dooring 👋</h1> <p> <img alt="Version" src="https://img.shields.io/badge/version-1.2-blue.svg?cacheSeconds=2592000" /> <a href="https://juejin.im/post/6864410873709592584/" target="_blank"> <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" /> </a> <a href="#" target="_blank"> <img alt="license:GPL3.0" src="https://img.shields.io/badge/license-GPL3.0-yellow.svg" /> </a> </p>

H5-Dooring is a powerful, open source, free H5 visual page configuration solution dedicated to providing a simple, convenient, professional and reliable, unlimited set of H5 landing page best practices. The technology stack is mainly react, developed in the background using nodejs.

<img src="http://cdn.dooring.cn/dr/123.png" alt="H5-Dooring编辑器预览图" width="100%" />
home🏠demo✨doc📦tutorialwiki
websiteDemoDocument视频&Videowiki

✨ note: If the official visit is too slow, visit the H5-Dooring for Singapore

English | 简体中文

new doc: private deployment process

website: H5-Dooring

tech blog: sharing of technology

Related products:

Author

👤 alex_xu

Star History Chart

🤝 Contributing and support

Contributions, issues and feature requests are welcome!<br />Feel free to check issues page.

Give a ⭐️ if this project helped you!

Privatization Deployment documentation

Features

  1. editor
    • Guides
    • The underlying component
    • Visual components
    • Media components
    • Product components
    • Dragper
    • Configure the panel
    • Form designer
    • (Multi) Page management (copy, edit, delete, new)
    • Component animation
    • Component interaction
    • Data source management
    • Quick preview
    • Real machine preview
    • Undo and redo
    • WeChat shares
    • shortcut key
    • The template library
    • Desktop software, Dooring-electron, supports offline use
  1. Enhanced features

    • Upload json, convert to H5 with one click
    • Photo gallery
    • Code capability (download source, download dis package)
  2. backend API

    • Create, save, and update your work
    • User management, rights management
    • One-click intelligent analysis
    • Data look
    • Form data collection
    • Form data presentation
    • Form data analysis, one-click export excel, form multi-condition search
    • Preview online
    • QR code preview
    • Template management
    • Code interface

Update the log

  1. Whether the video component adds a full-screen configuration item when playing
  2. Fixes a click failure of the icon component
  3. The editor supports multi-size switching and canvas size customization
  4. Fix multilingual issues with background management analytics forms
  5. The component library supports user-defined selection

Technology Sharing

The back-end section

The back-end part because of the knowledge points involved is more, is not the focus of this article, so here is a few points, you can use completely different technology to achieve back-office services, such as PHP, Java, Python or Egg. The author here is using the "koa" .

Specific code can refer to the full stack development article:

Install

  1. Download the code
git clone https://github.com/MrXujiang/h5-Dooring.git
  1. Go to the project catalog
cd ./h5-Dooring
  1. Install the dependency package
yarn pkg

Usage

Launch the app locally

yarn start or cnpm run start

注意: 如果 window 系统下无法启动, 请移步 dooring-electron

How to run the downloaded code ?

  1. The compression package can be unzipped directly to the server root, and access to the root address is sufficient
  2. 'vscode' installs the Live Server plug-in, unzips the downloaded compression package into a folder, opens with 'vscode', clicks on Live Server, and notes that to remove the 'index .html' of the startup path, change it to '/'

If you find that the local boot component drag and drop encountered strange errors, is the third-party component in the development environment bug, you can take a step to solve:

If you find that the local start-up component drag encountered strange errors, is a bug that should be a third-party component in the development environment, can be resolved in a way:

yarn dev or cnpm run dev

The premise is to install the http-server module first.

Browsers support

Modern browsers does not support IE browser

<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" /></br>IEdge<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /></br>Firefox<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /></br>Chrome<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /></br>Safari
Edgelast 2 versionslast 2 versionslast 2 versions

Contact us

<img src="http://next-admin.com/tech.png" alt="line" width=120 />

Twitter Account:@H5Dooring

Partner project

Sponsored

Open source is not easy, with your sponsorship, we will do better

<img src="http://cdn.dooring.cn/dr/WechatIMG2.jpeg" width="180px" />

Technical feedback and communication

wechat:beautifulFront

<img src="http://cdn.dooring.cn/dr/qtqd_code.png" width="180px" />

编辑推荐精选

Refly.AI

Refly.AI

最适合小白的AI自动化工作流平台

无需编码,轻松生成可复用、可变现的AI自动化工作流

酷表ChatExcel

酷表ChatExcel

大模型驱动的Excel数据处理工具

基于大模型交互的表格处理系统,允许用户通过对话方式完成数据整理和可视化分析。系统采用机器学习算法解析用户指令,自动执行排序、公式计算和数据透视等操作,支持多种文件格式导入导出。数据处理响应速度保持在0.8秒以内,支持超过100万行数据的即时分析。

AI工具酷表ChatExcelAI智能客服AI营销产品使用教程
TRAE编程

TRAE编程

AI辅助编程,代码自动修复

Trae是一种自适应的集成开发环境(IDE),通过自动化和多元协作改变开发流程。利用Trae,团队能够更快速、精确地编写和部署代码,从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能,是提升开发效率的理想工具。

AI工具TraeAI IDE协作生产力转型热门
AIWritePaper论文写作

AIWritePaper论文写作

AI论文写作指导平台

AIWritePaper论文写作是一站式AI论文写作辅助工具,简化了选题、文献检索至论文撰写的整个过程。通过简单设定,平台可快速生成高质量论文大纲和全文,配合图表、参考文献等一应俱全,同时提供开题报告和答辩PPT等增值服务,保障数据安全,有效提升写作效率和论文质量。

AI辅助写作AI工具AI论文工具论文写作智能生成大纲数据安全AI助手热门
博思AIPPT

博思AIPPT

AI一键生成PPT,就用博思AIPPT!

博思AIPPT,新一代的AI生成PPT平台,支持智能生成PPT、AI美化PPT、文本&链接生成PPT、导入Word/PDF/Markdown文档生成PPT等,内置海量精美PPT模板,涵盖商务、教育、科技等不同风格,同时针对每个页面提供多种版式,一键自适应切换,完美适配各种办公场景。

AI办公办公工具AI工具博思AIPPTAI生成PPT智能排版海量精品模板AI创作热门
潮际好麦

潮际好麦

AI赋能电商视觉革命,一站式智能商拍平台

潮际好麦深耕服装行业,是国内AI试衣效果最好的软件。使用先进AIGC能力为电商卖家批量提供优质的、低成本的商拍图。合作品牌有Shein、Lazada、安踏、百丽等65个国内外头部品牌,以及国内10万+淘宝、天猫、京东等主流平台的品牌商家,为卖家节省将近85%的出图成本,提升约3倍出图效率,让品牌能够快速上架。

iTerms

iTerms

企业专属的AI法律顾问

iTerms是法大大集团旗下法律子品牌,基于最先进的大语言模型(LLM)、专业的法律知识库和强大的智能体架构,帮助企业扫清合规障碍,筑牢风控防线,成为您企业专属的AI法律顾问。

SimilarWeb流量提升

SimilarWeb流量提升

稳定高效的流量提升解决方案,助力品牌曝光

稳定高效的流量提升解决方案,助力品牌曝光

Sora2视频免费生成

Sora2视频免费生成

最新版Sora2模型免费使用,一键生成无水印视频

最新版Sora2模型免费使用,一键生成无水印视频

Transly

Transly

实时语音翻译/同声传译工具

Transly是一个多场景的AI大语言模型驱动的同声传译、专业翻译助手,它拥有超精准的音频识别翻译能力,几乎零延迟的使用体验和支持多国语言可以让你带它走遍全球,无论你是留学生、商务人士、韩剧美剧爱好者,还是出国游玩、多国会议、跨国追星等等,都可以满足你所有需要同传的场景需求,线上线下通用,扫除语言障碍,让全世界的语言交流不再有国界。

下拉加载更多