H5DS简介
H5DS (HTML5 Design software) 这是一款基于 WEB 的 HTML5 制作工具的内核。让不会写代码的人也能轻松快速上手编写HTML5页面。H5DS同时也是一款基于react+mobx的在线HTML制作工具，灵活的内核可快速改造成各种
可视化制作工具（基于该内核，可以做BI工具，建站工具，图形设计工具，在线PPT工具等一系列工具），H5DS提供了丰富的插件扩展接口，让插件可自由快速扩展和动态加载，同时也支持API接入
该产品的特点：
- 【高维护性】采用react+mobx模块化开发，源码结构清晰，注释规范，高可维护，方便进行二次开发和迭代升级。
- 【高扩展性】编辑器内核独立存在，官方提供了插件开发教程以及CLI工具，可独立开发插件，动态加载插件。
- 【高性能】采用mobx统一管理数据，底层proxy数据监听，做了大量节流和防抖优化，插件按需加载，不占内存。
- 【多终端支持】支持手机页面、PC页面独立制作，设计界面可自由切换，采用缩放模式兼容各种屏幕分辨率，PC/Mobile一网打尽。
官方网站：www.h5ds.com
github地址：https://github.com/h5ds/h5ds
软件截图：
您的浏览器不支持 video 标签。
加入我们
QQ群：549856478
如何直接使用
下面代码另存为HTML文件即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>H5DS</title>
<link href="//at.alicdn.com/t/font_1160472_ybl2xl0ao8.css" rel="stylesheet"/>
<link href="//at.alicdn.com/t/font_157397_ze6q8vjbeme.css" rel="stylesheet"/>
<link href="//cdn.h5ds.com/lib/codemirror/github-markdown.min.css" rel="stylesheet"/>
<link href="//cdn.h5ds.com/lib/antd/antd.min.css" rel="stylesheet" />
<link href="//cdn.h5ds.com/lib/codemirror/codemirror.min.css" rel="stylesheet"/>
<link href="//cdn.h5ds.com/lib/codemirror/monokai.min.css" rel="stylesheet">
<link href="//cdn.h5ds.com/umd/5.0.15/editor/style.css" rel="stylesheet" />
<link href="//cdn.h5ds.com/lib/plugins/swiper.min.css" rel="stylesheet" />
<!-- 编辑器所需第三方资源库 -->
<script src="//cdn.h5ds.com/lib/plugins/swiper.min.js"></script>
<script src="//cdn.h5ds.com/lib/plugins/jquery.min.js"></script>
<script src="//cdn.h5ds.com/lib/plugins/h5ds.vendor.min.js"></script>
<!-- 外部引入antd --->
<script src="//cdn.h5ds.com/lib/antd/moment.min.js"></script>
<script src="//cdn.h5ds.com/lib/antd/antd.min.js"></script>
<!-- es6语法支持 -->
<script src="//cdn.h5ds.com/lib/babel/6.26.0/babel.min.js"></script>
<script src="//cdn.h5ds.com/lib/codemirror/codemirror.min.js"></script>
<script src="//cdn.h5ds.com/lib/codemirror/javascript.min.js"></script>
<!-- H5DS资源 -->
<script src="//cdn.h5ds.com/umd/5.0.15/editor/index.js"></script>
<style>
.image-list li {
display: inline-block;
width: 200px;
height: 140px;
margin: 0 10px 10px 0;
}
.image-list li img {
width: 100%;
height: 100%;
}
</style>
</head>
<body></body>
<script type="text/babel">
$(async function() {
class ImageList extends React.Component {
selectImage = d => {
console.log(d);
// 图片导入接口
this.props.select({ url: d });
};
render() {
const data = [
"http://cdn.h5ds.com/static/images/ad1.png",
"http://cdn.h5ds.com/static/images/ad2.png",
"http://cdn.h5ds.com/static/images/ad3.png"
];
return (
<div className="image-list">
<ul>
{data.map((d, i) => {
return (
<li key={i} onClick={() => this.selectImage(d)}>
<img src={d} alt="" />
</li>
);
})}
</ul>
</div>
);
}
}
// 使用编辑器
class Editor extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
}
/**
* 保存APP
*/
saveApp = async data => {
console.log("saveApp ->", data);
};
/**
* 发布 app
*/
publishApp = async data => {
console.log("publshApp ->", data);
};
componentDidMount() {
// 模拟异步加载数，设置 defaultData 会默认加载一个初始化数据
setTimeout(() => {
this.setState({ data: "defaultData" });
}, 100);
}
/**
* 使用编辑器部分
*/
render() {
const { data } = this.state;
const { H5dsEditor } = H5DS_GLOBAL.editor;
return (
<H5dsEditor
plugins={[
"h5ds-form",
"h5ds-svg",
"h5ds-video",
"h5ds-map",
"h5ds-iframe",
"h5ds-button",
"h5ds-pic-text",
"h5ds-table",
"h5ds-save-to-image",
"h5ds-drawer-menu",
"h5ds-css-effect",
"h5ds-count-time",
"h5ds-chart",
"h5ds-qrcode",
"swiper-cube",
"swiper-overflow",
"swiper-flip",
"swiper-slide",
"threejs-360",
"threejs-obj-loader",
"h5ds-html"
]} // 第三方插件包
data={data}
debugger={false} // debugger=true用于调试插件
options={{
noServer: true, // 开启无后台模式
pluginsHost: "//www.h5ds.com",
imageSourceModal: ImageList,
publishApp: this.publishApp,
saveApp: this.saveApp, // 保存应用
appId: "test_app_id" // 当前appId
}}
/>
);
}
}
// 使用
ReactDOM.render(<Editor />, document.querySelector("body"));
});
</script>
</html>