今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。
![e85c2df8a2b929b2f196d36e698d28e9.png](https://img-blog.csdnimg.cn/img_convert/e85c2df8a2b929b2f196d36e698d28e9.png)
h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。
![66b087929b9380acc199ad2acbf89920.png](https://img-blog.csdnimg.cn/img_convert/66b087929b9380acc199ad2acbf89920.png)
![f7f041b973fcf0b3517fd16f82d88d52.gif](https://img-blog.csdnimg.cn/img_convert/f7f041b973fcf0b3517fd16f82d88d52.gif)
技术栈
- 前端:React+Mobx+Less+jQuery
- 后端:NodeJs+Ngnix+Mysql
- 工具:Babel+Webpack+Gulp
项目模块架构
![933c3b3c1880f66ea2068120ba8e7a7f.png](https://img-blog.csdnimg.cn/img_convert/933c3b3c1880f66ea2068120ba8e7a7f.png)
项目结构
![038cd3ce7823ee8f3f199539ab53ef3d.png](https://img-blog.csdnimg.cn/img_convert/038cd3ce7823ee8f3f199539ab53ef3d.png)
安装
$ npm i h5ds -S
快速使用
import React, { Component } from 'react'import H5dsEditor from 'h5ds/editor'import 'h5ds/editor/style.css'class Editor extends Component { constructor(props) { super(props); this.state = { data: null }; } /* 保存app */ saveApp = async data => { console.log('saveApp ->', data); }; /* 发布app*/ publishApp = async data => { console.log('publishApp ->', data); }; componentDidMount() { // 模拟异步加载,设置 defaultData 会默认加载一个初始化数据 setTimeout(() => { this.setState({ data: 'defaultData' }); }, 100); } /** * 使用编辑器 */ render() { const { data } = this.state; return ( ); }}export default Editor;
![ef2cd3c9a6f41c63b61a2c540f8f76c7.png](https://img-blog.csdnimg.cn/img_convert/ef2cd3c9a6f41c63b61a2c540f8f76c7.png)
h5ds编辑器通过时间轴控制动画进度。
![d8a3a52f9afd6543f6b85de09213807c.gif](https://img-blog.csdnimg.cn/img_convert/d8a3a52f9afd6543f6b85de09213807c.gif)
动画效果使用的是如下CSS3动画库。
https://animate.style/
![02646b38fa55067f4492e3d2d3c962f0.png](https://img-blog.csdnimg.cn/img_convert/02646b38fa55067f4492e3d2d3c962f0.png)
![521529803bba2c7d490946c793ea34f8.png](https://img-blog.csdnimg.cn/img_convert/521529803bba2c7d490946c793ea34f8.png)
![64c55bfdb210abedd2488c935d72ef02.png](https://img-blog.csdnimg.cn/img_convert/64c55bfdb210abedd2488c935d72ef02.png)
![ef37ddd808f51b16a25ba9cd48ff13d7.png](https://img-blog.csdnimg.cn/img_convert/ef37ddd808f51b16a25ba9cd48ff13d7.png)
![1d36becec774e2d1683e60aea470ed94.png](https://img-blog.csdnimg.cn/img_convert/1d36becec774e2d1683e60aea470ed94.png)
通过简单拖拽操作,就可实现h5代码编辑功能。
确实是非常棒的一款类似易企秀、MAKA的H5制作编辑工具,大家不要错过哟~~
# 官网地址https://www.h5ds.com/# 仓库地址https://github.com/h5ds/h5ds
ok,今天就分享到这里。如果大家有其它优秀的H5可视化编辑工具,欢迎交流讨论!