天給大家分享一個(gè)功能強(qiáng)大的HTML5可視化頁面拖拽編排H5Dooring。

h5-dooring 一款開源免費(fèi)的H5在線頁面拖拽布局配置解決方案。讓你輕松實(shí)現(xiàn)拖拽式生成html5頁面。

DR演示視頻

簡單演示如何通過拖拽快速生成可視化頁面，幫助大家更快上手項(xiàng)目。

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

技術(shù)框架

• react+dva+axios
• antd React UI組件庫
• react-dnd 基于react拖拽組件解決方案
• qrcode.react 基于react二維碼插件
• koa 基于nodejs開發(fā)框架
• ramda 優(yōu)秀函數(shù)式j(luò)s工具庫

快速安裝

# 克隆項(xiàng)目
git clone https://github.com/MrXujiang/h5-Dooring.git

# 進(jìn)入目錄
cd h5-Dooring

# 安裝依賴包
npm install

# 本地啟動
npm run start

通過輕松拖拽的方式實(shí)現(xiàn)生成H5頁面，并提供豐富的頁面組件，讓開發(fā)者快速搭建更強(qiáng)大的H5落地頁。

ending，附上項(xiàng)目地址鏈接。

# 官網(wǎng)地址
http://io.nainor.com/

# 倉庫地址
https://github.com/MrXujiang/h5-Dooring

ok，這次就分享到這里。感興趣的同學(xué)可以去看看，歡迎交流討論哈！

天給大家推薦一款超棒的H5可視化網(wǎng)頁制作編輯工具H5DS。

h5ds 基于HTML5構(gòu)建的web網(wǎng)頁可視化制作器。通過輕松拖拽元素即可快速生成精美的H5頁面。

技術(shù)棧

• 前端：React+Mobx+Less+jQuery
• 后端：NodeJs+Ngnix+Mysql
• 工具：Babel+Webpack+Gulp

項(xiàng)目模塊架構(gòu)

項(xiàng)目結(jié)構(gòu)

安裝

$ 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);
  };
  
  /* 發(fā)布app*/
  publishApp = async data => {
    console.log('publishApp ->', data);
  };
  
  componentDidMount() {
    // 模擬異步加載，設(shè)置 defaultData 會默認(rèn)加載一個(gè)初始化數(shù)據(jù)
    setTimeout(() => {
      this.setState({ data: 'defaultData' });
    }, 100);
  }
  
  /**
   * 使用編輯器
   */
  render() {
    const { data } = this.state;
    return (
      <H5dsEditor
        plugins={[]} // 第三方插件包
        data={data}
        options={{
          publishApp: this.publishApp,
          saveApp: this.saveApp, // 保存應(yīng)用
          appId: 'test_app_id' // 當(dāng)前appId
        }}
      />
    );
  }
}
export default Editor;

h5ds編輯器通過時(shí)間軸控制動畫進(jìn)度。

動畫效果使用的是如下CSS3動畫庫。

https://animate.style/

通過簡單拖拽操作，就可實(shí)現(xiàn)h5代碼編輯功能。

確實(shí)是非常棒的一款類似易企秀、MAKA的H5制作編輯工具，大家不要錯(cuò)過喲~~

# 官網(wǎng)地址
https://www.h5ds.com/

# 倉庫地址
https://github.com/h5ds/h5ds

ok，今天就分享到這里。如果大家有其它優(yōu)秀的H5可視化編輯工具，歡迎交流討論！