H5DS-基于WEB的H5制作工具

【Github】项目名：H5DS-基于WEB的H5制作工具

项目简介

H5DS是一款基于WEB的HTML5制作工具，也可作为H5编辑器。它能让不具备代码编写能力的人员轻松快速地创建H5页面，类似于易企秀这种H5制作、建站工具，示范网站为h5ds.com。目前仅开源了编辑器(v5.x版本)页面的代码，如需获取最新版本（v6.x）的源码则要购买商业授权。

项目特点（核心技术相关）

• 高维护性：采用react+mobx模块化开发，源码结构清晰，注释规范，便于二次开发与迭代升级。
• 高扩展性：编辑器内核独立，官方提供插件开发教程和CLI工具，可独立开发插件并动态加载。
• 高性能：利用mobx统一管理数据，底层采用proxy数据监听，进行了大量节流和防抖优化，插件按需加载，节省内存。
• 多终端支持：支持手机页面、PC页面独立制作，设计界面可自由切换，通过缩放模式兼容各种屏幕分辨率。

如何使用

1. 引入必须的资源包。

<link rel="stylesheet" href="https://at.alicdn.com/t/font_157397_ujac0trx9i.css">
<link href="https://cdn.h5ds.com/lib/plugins/swiper.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/antd/3.23.0-beta.0/antd.min.css" rel="stylesheet">
<!--编辑器所需第三方资源库-->
<script src="https://cdn.h5ds.com/lib/plugins/swiper.min.js"></script>
<script src="https://cdn.h5ds.com/lib/plugins/jquery.min.js"></script>
<script src="https://cdn.h5ds.com/lib/plugins/h5ds.vendor.min.js"></script>
<!--外部引入antd-->
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.bootcss.com/antd/3.23.0-beta.0/antd.min.js"></script>

2. 安装使用H5DS。在webpack中必须配置externals:[‘React’,’ReactDOM’,’ReactRouter’,’ReactRouterDOM’,’mobx’,’_’,’antd’,’PubSub’,’moment’]，执行npm install h5ds –save，在代码中引入相关样式和组件并按要求编写代码来实现功能，例如：

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 (
            <H5dsEditor plugins={[]} //第三方插件包
                data={data}
                options={{
                    publishApp: this.publishApp,
                    saveApp: this.saveApp, //保存应用
                    appId: 'test_app_id' //当前appId
                }}
            />
        );
    }
}
export default Editor;

还可以直接使用H5DS JS-SDK，执行npm run build:libs会生成一个libs包，通过new H5DSCore()的方式去使用libs包下面的index.（双击打开即可），同时要引入相关的资源包并按照要求编写脚本。

项目总结

H5DS是一款功能丰富的基于WEB的H5制作工具，具备诸多优势。希望大家对这个项目有兴趣的可以留言讨论，分享自己的使用经验或者提出改进的建议。

项目地址

GitHub链接直达