# H5DS
**Repository Path**: ericcode/H5DS
## Basic Information
- **Project Name**: H5DS
- **Description**: H5DS (HTML5 Design software) 这是一款基于WEB的 H5制作工具。让不会写代码的人也能轻松快速上手制作H5页面。示范网站：h5ds.com
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://www.h5ds.com
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 171
- **Created**: 2023-08-16
- **Last Updated**: 2023-08-16
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 开源说明
目前我们只开源了编辑器页面的代码（大概整个完整项目的20%代码，完整项目包括：web应用端，web管理端，web编辑器，后台系统，数据库），开源版本商业使用请保留版权信息，开源不等于免费，如需去掉版权信息和获取全部源码请购买商业授权[授权协议](http://www.h5ds.com/authorization)
# 简介
> H5DS (HTML5 Design software) 这是一款基于 WEB 的 HTML5 制作工具的内核。让不会写代码的人也能轻松快速上手编写HTML5页面。H5DS同时也是一款基于react+mobx的在线HTML制作工具，灵活的内核可快速改造成各种
可视化制作工具（基于该内核，可以做BI工具，建站工具，图形设计工具，在线PPT工具等一系列工具），H5DS提供了丰富的插件扩展接口，让插件可自由快速扩展和动态加载，同时也支持API接入
### 该产品的特点：
1. 【高维护性】采用react+mobx模块化开发，源码结构清晰，注释规范，高可维护，方便进行二次开发和迭代升级。
2. 【高扩展性】编辑器内核独立存在，官方提供了插件开发教程以及CLI工具，可独立开发插件，动态加载插件。
3. 【高性能】采用mobx统一管理数据，底层proxy数据监听，做了大量节流和防抖优化，插件按需加载，不占内存。
4. 【多终端支持】支持手机页面、PC页面独立制作，设计界面可自由切换，采用缩放模式兼容各种屏幕分辨率，PC/Mobile一网打尽。
官方网站：[www.h5ds.com](https://www.h5ds.com)
github地址：[https://github.com/h5ds/h5ds](https://github.com/h5ds/h5ds)
软件截图：
# 加入我们
QQ群：549856478
# 如何使用
### 1. 引入必须的资源包。
```html
```
### 2. 安装使用H5DS
> webpack必须配置
```javascript
externals: ['React', 'ReactDOM', 'ReactRouter', 'ReactRouterDOM', 'mobx', '_', 'antd', 'PubSub', 'moment']
```
> npm install h5ds --save
```javascript
import 'h5ds/editor/style.css';
import React, { Component } from 'react';
import H5dsEditor from 'h5ds/editor';
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;
```
# 直接使用H5DS JS-SDK
> 执行 npm run build:libs 会生成一个libs包。可以直接通过 new H5DSCore() 的方式去使用libs包
### 下面的 index.html 双击打开即可
```html
H5DS
```