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

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

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

DR演示視頻

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

技術框架

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可視化編輯工具，歡迎交流討論！

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

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

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

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

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

官網地址：http://www.itbang.top

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商