超优秀 H5可视化制作编辑器H5DS 今天给大家推荐一款超棒的H5可视化网页

今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS 。
文章插图
h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。
文章插图
文章插图
技术栈

前端：React+Mobx+Less+jQuery
后端：NodeJs+Ngnix+Mysql
工具：Babel+Webpack+Gulp

项目模块架构

文章插图
项目结构

文章插图
安装$ 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;