今天给大家推荐一款超棒的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 (
<H5dsEditor
plugins={[]} // 第三方插件包
data={data}
options={{
publishApp: this.publishApp,
saveApp: this.saveApp, // 保存应用
appId: 'test_app_id' // 当前appId
}}
/>
);
}
}
export default Editor;
h5ds编辑器通过时间轴控制动画进度。
动画效果使用的是如下CSS3动画库。
https://animate.style/
通过简单拖拽操作，就可实现h5代码编辑功能。
确实是非常棒的一款类似易企秀、MAKA的H5制作编辑工具，大家不要错过哟~~
# 官网地址
https://www.h5ds.com/
# 仓库地址
https://github.com/h5ds/h5ds
ok，今天就分享到这里。如果大家有其它优秀的H5可视化编辑工具，欢迎交流讨论！
,
