天给大家分享一个功能强大的HTML5可视化页面拖拽编排H5Dooring。

h5-dooring 一款开源免费的H5在线页面拖拽布局配置解决方案。让你轻松实现拖拽式生成html5页面。

DR演示视频

简单演示如何通过拖拽快速生成可视化页面，帮助大家更快上手项目。

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

技术框架

• react+dva+axios
• antd React UI组件库
• react-dnd 基于react拖拽组件解决方案
• qrcode.react 基于react二维码插件
• koa 基于nodejs开发框架
• ramda 优秀函数式js工具库

快速安装

# 克隆项目
git clone https://github.com/MrXujiang/h5-Dooring.git

# 进入目录
cd h5-Dooring

# 安装依赖包
npm install

# 本地启动
npm run start

通过轻松拖拽的方式实现生成H5页面，并提供丰富的页面组件，让开发者快速搭建更强大的H5落地页。

ending，附上项目地址链接。

# 官网地址
http://io.nainor.com/

# 仓库地址
https://github.com/MrXujiang/h5-Dooring

ok，这次就分享到这里。感兴趣的同学可以去看看，欢迎交流讨论哈！

天给大家推荐一款超棒的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可视化编辑工具，欢迎交流讨论！