Make H5 as easy as building blocks!

Welcome to H5-Dooring 👋

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.

H5-Dooring编辑器预览图

home🏠	demo✨	doc📦	tutorial	wiki
website	Demo	Document	视频&Video	wiki

✨ 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

Author

👤 alex_xu

Website: http://h5.dooring.cn
Github: @MrXujiang
new tech share: Dooring2.7+最新技术分享&复盘

Star History

🤝 Contributing and support

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Give a ⭐️ if this project helped you!

Privatization Deployment documentation

address: http://h5.dooring.cn/docz
⭐️ lowcode component list: http://h5.dooring.cn/docz/components/intro
List of answers: http://h5.dooring.cn/docz/source-list/H5-Dooring/guide
gitee mini code: https://gitee.com/lowcode-china/h5_-dooring

Features

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

2) Enhanced features

Upload json, convert to H5 with one click
Photo gallery
Code capability (download source, download dis package)

3) 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

Whether the video component adds a full-screen configuration item when playing
Fixes a click failure of the icon component
The editor supports multi-size switching and canvas size customization
Fix multilingual issues with background management analytics forms
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

Download the code

git clone https://github.com/MrXujiang/h5-Dooring.git

Go to the project catalog

cd ./h5-Dooring

Install the dependency package

yarn pkg

Usage

Launch the app locally

yarn start
or
cnpm run start

local visit:

http://localhost:port/h5_plus

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

How to run the downloaded code ?

The compression package can be unzipped directly to the server root, and access to the root address is sufficient
‘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: