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

h5可视化编辑软件哪个好(H5可视化制作编辑器H5DS)(1)

h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。

h5可视化编辑软件哪个好(H5可视化制作编辑器H5DS)(2)

h5可视化编辑软件哪个好(H5可视化制作编辑器H5DS)(3)

技术栈项目模块架构

h5可视化编辑软件哪个好(H5可视化制作编辑器H5DS)(4)

项目结构

h5可视化编辑软件哪个好(H5可视化制作编辑器H5DS)(5)

安装

$ 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;

h5可视化编辑软件哪个好(H5可视化制作编辑器H5DS)(6)

h5ds编辑器通过时间轴控制动画进度。

h5可视化编辑软件哪个好(H5可视化制作编辑器H5DS)(7)

动画效果使用的是如下CSS3动画库。

https://animate.style/

h5可视化编辑软件哪个好(H5可视化制作编辑器H5DS)(8)

h5可视化编辑软件哪个好(H5可视化制作编辑器H5DS)(9)

h5可视化编辑软件哪个好(H5可视化制作编辑器H5DS)(10)

h5可视化编辑软件哪个好(H5可视化制作编辑器H5DS)(11)

h5可视化编辑软件哪个好(H5可视化制作编辑器H5DS)(12)

通过简单拖拽操作,就可实现h5代码编辑功能。

确实是非常棒的一款类似易企秀、MAKA的H5制作编辑工具,大家不要错过哟~~

# 官网地址 https://www.h5ds.com/ # 仓库地址 https://github.com/h5ds/h5ds

ok,今天就分享到这里。如果大家有其它优秀的H5可视化编辑工具,欢迎交流讨论!

,