mrxujiang / h5-dooring Goto Github PK

H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台.

Home Page: https://dooring.vip

License: GNU General Public License v3.0

JavaScript 53.43% TypeScript 27.86% CSS 12.36% HTML 3.30% Less 2.92% Dockerfile 0.01% EJS 0.12%

react react-router javascript h5 react-dnd h5-editor typescript drag-and-drop site-generator lowcode

h5-dooring's Introduction

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.

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

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

Enhanced features
- Upload json, convert to H5 with one click
- Photo gallery
- Code capability (download source, download dis package)
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

注意: 如果 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:

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

IEdge	Firefox	Chrome	Safari
Edge	last 2 versions	last 2 versions	last 2 versions

Contact us

Twitter Account：@H5Dooring

Partner project

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

Technical feedback and communication

wechat：beautifulFront

h5-dooring's People

Contributors

Stargazers

Watchers

Forkers

furholeder martinadamsdev sje410 conlearning ihaust lihuan-bot jonesatom haoyufan zevfung nickshui xuezechao2012 ideas-design simplezn lichengtao1989 masdude wukongtime keyzf oldeng bytongroup fightingbamboo hi-noikiy lovey6658428 superchenwb inier wangyunlong0418 yezhu219 tianmiao simplemd wpyaa yehuozhili xuych fucheng830 fangyiting woshilyy springmvc2006 low-code hanzicn doudouma duanguang yezzle cnx2016 wagnlinzh metal88888 liuyu-fred linbaijin gpsbird joncv sharklet erdongjun baishuiz nemophoenix sucresk junsong channing-huang msxiehui arthasdragon zuoguangcheng gxkai wgl878420 wangytbest feigehenmang jee-zh martin4chen yaowenbin abeet winglau14 chenrui2014 blackcatpolice tchigher newbit13 kidzhy bonevidy baobao12356 hhhgame delfws zhangtong1993 luoguoxiong lymanlai assassindesign gail9527 dystudio bobo553 isgasho zenghongqing henry0249 newued inwikipedia woshi555bin chengyu2333 shine977 letear gugegev5 houcy kedu liuyunl jiyawei5241521 407257625 yuezhaogushan liuabo gengjf

h5-dooring's Issues

拖拽左下角秒懂Dooring图片（一下子弹出很多框）

拖拽了左下角的秒懂Dooring，不断弹出好几个弹框。

可以商用么

如题.

目前会持续更新么

制作可视化大屏是否有规划？

预览页滚动条处理

H5-Dooring更新日志

1.98

编辑器功能区添加更多折叠下拉框, 优化头部界面
添加数据源入口和界面
模版库优化, 剔除无用模版, 累计60+模版
入口页添加赞助墙
升级视频组件, 支持弹幕, 截屏, 模式设置等功能
文件上传路径兼容window服务器本地化部署

1.96

修复首页推荐项目外链地址和站内文案
替换Dooring网站logo
优化ios8以下访问H5时可能出现的页面卡顿问题
图片上传组件添加svg, gif图片格式支持
后台管理系统添加一键跳编辑器按钮
服务端编辑侧路由加固
文件上传组件添加自定义上传文档，支持七牛云，腾讯云，阿里oss等第三方图床方式

1.95

dooring文档添加更新日志模块
dooring增报错监控函数, 提供一键清空缓存按钮和自动重载功能
新增电商商品H5模版
页面配置增加背景模式和背景重复
表单添加字段名配置项

1.94

转盘组件支持转盘交互功能(跳转链接/打开弹窗/自定义代码)
添加网站拦截, 防止页面误关导致页面无法保存
优化页面控制条组件样式
按钮组件添加组件动画
图片组件添加组件动画
媒体组件icon优化
全局错误监控组件添加一键清除缓存功能

1.93

上线源码下载功能
服务端支持下载源码服务和下载次数限制
界面部分文案优化
出码基座优化
抽奖组件支持抽奖后自定义交互(弹窗/链接/自定义代码)

1.92

修复背景图预览适配问题
转盘组件支持中奖后自定义交互/弹窗/自定义代码
界面局部调整
后台管理表单数据支持多键查询
可视化大屏柱状图组件支持实时数据请求

后续会考虑增加在线扩展代码不

一些复杂场景通过扩展代码实现

yarn run build && serve ./server 页面报错

umi.js:1 Uncaught TypeError: e is not a function
at umi.js:1
at Array.map ()
at umi.js:1
at u (umi.js:1)
at an (umi.js:1)
at Object.d (umi.js:1)
at Object.c [as start] (umi.js:1)
at x.render (umi.js:1)
at nu (umi.js:1)
at tu (umi.js:1)

yarn run start 正常

[BUG]主界面支付宝按钮隐藏了

** 问题 **
主界面支付宝二维码的按钮隐藏了

** 重现步骤 **

PC edge浏览器打开http://io.nainor.com/h5_plus
即可看到下方按钮展示不全

** 截图 **

制作和预览h5页面时移动端组件铺满整个屏幕

使用表格组件添加表单控件，选择下拉列表后，下拉选择项铺满整个屏幕，预览页面也是同样的问题

当前版本是1.3.0

点击下载但未实际下载也会消耗次数

每天只能下载一次吗？并且弹出下载框的时候，没有确认下载，也消耗了次数，感觉并不合理。

表单控件和日历控件重叠问题

首先我从左边拖拽了表单控件，然后我又添加日期控件，发现两者重叠了。

本地运行时可能出现的拖拽报错问题解决方案

如发现本地启动后组件拖拽遇到奇怪的报错, 是应为第三方组件在开发环境的bug, 可以采用一下方式解决:

yarn dev
or 
cnpm run dev

前提是先安装http-server模块.

后端的服务需要自己开发？

目前源码包含后端的代码了？本地跑的时候能够保存模板？

h5编辑器h5-dooring功能迭代说明

新增进度条组件
修复轮播图拖拽问题
新增轮播图组件自动播放控制
调整拖拽源和拖拽目标架构方式
添加实时保存功能

Welcome to preview online, address: h5可视化编辑器

启动之后无法引用styles

WARNING Compiled with 5 warnings
warning in ./src/components/BasicShop/VisualComponents/XProgress/index.tsx
"export 'default' (imported as 'styles') was not found in './index.less?modules'
warning in ./src/components/BasicShop/BasicComponents/Text/index.tsx
"export 'default' (imported as 'styles') was not found in './index.less?modules'
warning in ./src/components/BasicShop/BasicComponents/LongText/index.tsx
"export 'default' (imported as 'styles') was not found in './index.less?modules'
warning in ./src/components/BasicPcShop/BasicComponents/Text/index.tsx
"export 'default' (imported as 'styles') was not found in './index.less?modules'
warning in ./src/components/BasicPcShop/BasicComponents/LongText/index.tsx
"export 'default' (imported as 'styles') was not found in './index.less?modules'

yarn build打包后遇到这样的错误,yarn start下则没有问题，尝试过修改了umi配置并没有效果

TypeError: t is not a function
    at redux.js:642
    at Array.map (<anonymous>)
    at redux.js:641
    at u (redux.js:79)
    at an (index.esm.js:291)
    at Object.d (index.esm.js:1092)
    at Object.c [as start] (index.esm.js:195)
    at O.render (dva.ts:67)
    at Ie (react-dom.production.min.js:104)
    at rh (react-dom.production.min.js:103)
Me @ react-dom.production.min.js:125
react-dom.production.min.js:161 Uncaught TypeError: t is not a function
    at redux.js:642
    at Array.map (<anonymous>)
    at redux.js:641
    at u (redux.js:79)
    at an (index.esm.js:291)
    at Object.d (index.esm.js:1092)
    at Object.c [as start] (index.esm.js:195)
    at O.render (dva.ts:67)
    at Ie (react-dom.production.min.js:104)
    at rh (react-dom.production.min.js:103)

用着用着就卡了

后台能否开放

react-draggable 和 react-dnd 是不是两个相同的库,为啥子要使用两个库呢

左侧组件总览的面板 [ react-dnd ]和中间主操作区域 [react-draggable] 使用的两个相同功能的拖拽组件,为什么呢?

图片组件缩小后多拉几个，回显异常

拖一张到中间

保存

刷新后

演示地址打不开了！

网站暂时无法访问
该网站未根据工信部相关法律规则进行备案

以js-sdk提供API强烈支持，付费也可以的，移动端、PC都有需求

哈哈哈，我来提issue啦

dooring

find a new bug

使用过程中发现一个BUG，并且可以多次重现，发现如下：

数据源使用，修改一个数据，多个数据被覆盖的问题

这是之前的数据：

开始修改其中一个数据：

修改一个数据保存后，其他数据都被覆盖成这个数据

日期表单控件无法选择日期

这个中间编辑器如果组件多了，下面被挡住了怎么办呢？不能向下滑动吗？

谷歌浏览器打开直接报错

http://io.nainor.com/h5_plus/editor?tid=123456
TypeError: Cannot read property 'type' of undefined
at 10.js:1
at pa (umi.js:1)
at eu (umi.js:1)
at Ja (umi.js:1)
at Za (umi.js:1)
at Fu (umi.js:1)
at zc (umi.js:1)
at Fc (umi.js:1)
at Pc (umi.js:1)
at umi.js:1