超贊 H5 可視化頁面配置工具H5-DooringTool

天給大家分享一個功能強大的HTML5可視化頁面拖拽編排H5Dooring。

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

DR演示視頻

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

技術(shù)框架

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

快速安裝

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

# 進入目錄
cd h5-Dooring

# 安裝依賴包
npm install

# 本地啟動
npm run start

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

ending，附上項目地址鏈接。

# 官網(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

項目模塊架構(gòu)

項目結(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 會默認加載一個初始化數(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編輯器通過時間軸控制動畫進度。

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

https://animate.style/

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

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

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

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

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

pp Builder能幫助不會編程的用戶開發(fā)HTML5以及混合模式移動應(yīng)用，這主要歸功于它那拖拽式可視化操作環(huán)境。

程序的設(shè)計理念，是為了讓不太了解編程知識的用戶也能輕松創(chuàng)建應(yīng)用程序。但是，使用Javascript語言的高級開發(fā)者也能從中受益。App Builder集成了Apache Cordova，并能夠生成適用于Android、iOS、Windows 10等操作平臺的應(yīng)用程序。

App Builder提供了每一個操作和動作的參考資料以及若干個教程，并且還配備了視頻說明，強烈推薦給所有想要加入程序開發(fā)事業(yè)的用戶。

App Builder是一款非常有趣的應(yīng)用程序，有了它，不懂編程的用戶也能創(chuàng)建手機應(yīng)用。創(chuàng)建一款應(yīng)用程序，耐心和努力必不可少，好在App Builder的操作界面便捷舒適，讓我們在前進的道路上少了一些掙扎。

下載地址：http://www.itbang.top/forum.php?mod=viewthread&tid=7&extra=

官網(wǎng)地址：http://www.itbang.top

在線咨詢

上一篇：HTML 中引入 CSS 的方式
下一篇：css控制字數(shù)，超出部分就顯示省略號