VvvebJs-使用開源的JavaScript網站可

VvvebJs-使用開源的JavaScript網站可視化構建庫拖拽生成網頁

紹

VvvebJs是一個開源的網頁拖拽自動生成的JavaScript庫，你可以以簡單拖拽的方式生成自己需要的網頁樣式，內置jquery和Bootstrap，你可以拖拽相關的組件進行網頁的構建，非常的方便，而且可以實時修改代碼，功能豐富，使用簡單，界面友好，特別適合一些專注于展示的網頁設計，需要的朋友不可錯過！

Github地址

https://github.com/givanz/VvvebJs

使用方式

如下代碼：

<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>
<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- builder code-->
<script src="libs/builder/builder.js"></script>	
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>	
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>	
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	
<script>
$(document).ready(function() 
{
	Vvveb.Builder.init('demo/index.html', function() {
		//load code after page is loaded here
		Vvveb.Gui.init();
	});
});
</script>

要初始化編輯器，調用Vvveb.Builder.init。第一個參數是要加載以進行編輯的URL，它必須位于相同的子域中才能進行編輯。第二個參數是頁面加載完成時調用的函數，默認情況下調用編輯器Gui.init();

結構

Component Group是一個組件集合，例如Bootstrap 4組由Button和Grid等組件組成，該對象僅用于在編輯器左側面板中對組件進行分組。例如，Widgets組件組只有兩個組件視頻和地圖，并被定義為如下

Vvveb.ComponentsGroup['Widgets']=["widgets/googlemaps", "widgets/video"];

Component是一個對象，它提供可以在畫布上放置的html以及在選擇組件時可以編輯的屬性，例如Video Component，具有Url和Target屬性的html鏈接Component定義為：

Vvveb.Components.extend("_base", "html/link", {
 nodes: ["a"],
 name: "Link",
 properties: [{
 name: "Url",
 key: "href",
 htmlAttr: "href",
 inputtype: LinkInput
 }, {
 name: "Target",
 key: "target",
 htmlAttr: "target",
 inputtype: TextInput
 }]
});

在Component屬性集合中使用Input對象來編輯屬性，例如文本輸入，選擇，顏色，網格行等。例如，TextInput擴展Input對象并定義為：

var TextInput=$.extend({}, Input, {
 events: {
 "keyup": ['onChange', 'input'],
	 },
	setValue: function(value) {
		$('input', this.element).val(value);
	},
	
	init: function(data) {
		return this.render("textinput", data);
	},
 }
);

輸入還需要一個在編輯器html（在editor.html中）定義為<script>標簽的模板，其id為vvveb-input-inputname，例如對于文本輸入為vvveb-input-textinput，定義：

<script id="vvveb-input-textinput" type="text/html">
	
	<div>
		<input name="{%=key%}" type="text" class="form-control"/>
	</div>
	
</script>

以上是借助瀏覽器翻譯工具，對官網的文檔進行簡單的翻譯，可能會有些不夠準確的地方，感興趣的小伙伴可以直接查看相關文檔！

設計界面預覽

總結

VvvebJs是一個非常強大的網頁可視化生成構建工具，讓不懂網頁設計的小伙伴們也能夠通過拖拽來生成美觀大方的網頁出來，讓設計網頁就像設計圖片一樣，VvvebJs特別適合展示型網頁，甚至可以不需要代碼就能完成一項復雜的網頁設計，總體來說，VvvebJs是一個值得嘗試的工具！

天給大家推薦一款超棒的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可視化編輯工具，歡迎交流討論！

言

前段時間筆者一直忙于數據可視化方面的工作，比如如何實現拖拽式生成可視化大屏，如何定制可視化圖表交互和數據導入方案等，這塊需求在B端企業中應用非常大，所以非常有探索價值。

本篇文章并非和數據可視化相關，而是通過抽象技術底層，將其應用于H5頁面可視化搭建上，通過技術的手段實現拖拽式生成H5頁面。這塊也有非常多的應用場景，比如我們需要開發一個移動端網站，一個H5營銷頁面，H5活動頁面等，如果有這樣的傻瓜式拖拽的工具生成H5頁面，將會極大的提高我們的工作效率。

接下來筆者將對h5頁面可視化編輯器－Dooring做詳細的項目分析和原理解讀，來帶大家深入了解h5可視化搭建頁面的原理和技術實現。H5編輯器預覽如下：

H5-dooring

H5-Dooring

github地址：H5-Dooring

技術棧

React 前端主流框架(react,vue,angular)之一,更適合開發靈活度高且復雜的應用
dva 主流的react應用狀態管理工具，基于redux
less css預編譯語言，輕松編寫結構化分明的css
umi 基于react的前端集成解決方案
antd 地球人都知道的react組件庫
axios 強大的前端請求庫
react-dnd 基于react的拖拽組件解決方案，具有優秀的設計哲學
qrcode.react 基于react的二維碼生成插件
zarm 基于react的移動端ui庫，輕松實現美觀的H5應用
koa 基于nodejs的上一代開發框架，輕松實現基于nodejs的后端開發
@koa/router 基于koa2的服務端路由中間件
ramda 優秀的函數式js工具庫

需求分析

在思考需求分析之前我們先來看看Dooring的使用演示：

由上面的gif圖我們可以分析出，可視化編輯器主要有以下幾部分組成：

可拖拽的組件庫 draggable components
盛放組件的畫布 canvas
組件編輯器 FormEditor
頭部工具欄 toolBar

可拖拽組件我們可以用社區比較火的react-dnd，react-draggable來實現，由于我們的畫布是可拖拽可放大縮小的，所以這里需要對畫布賦能，具體實現可參考下文。

其次就是H5編輯器部分，這部分是核心功能，后面我們會詳細分析。還有就是預覽，生成預覽鏈接，保存json文件，保存模版這些功能本質上是對我們json文件的操作，可是目前可視化搭建技術的常用手段之一。

基礎準備

我們的h5頁面可視化編輯器采用umi來作為腳手架工具.

umi是可擴展的企業級前端應用框架,以路由為基礎的，同時支持配置式路由和約定式路由，保證路由的功能完備，并以此進行功能擴展。然后配以生命周期完善的插件體系，覆蓋從源碼到構建產物的每個生命周期，支持各種功能擴展和業務需求.

這樣我們不會關注繁瑣的工程配置細節, 可以直接在項目中使用 antd 和 less 這些方案, 并且集成了目前比較流行的css module, 可以方便我們在項目里對css進行模塊化開發. umi創建項目的具體使用流程如下:

// 創建并進入工程目錄
mkdir dooring && cd dooring
// 創建umi應用
yarn create @umijs/umi-app
// 安裝依賴
yarn    // 或者使用npm install

簡單的三步走策略就能輕松搭建我們的項目工程, 是不是省去了很多麻煩? (在使用這些方式之前我們首先確保自己本地的node 版本是 10.13 或以上)

【限時免費】AI大廠面試核心考點，六大方向一網打盡

已失效

在項目搭建完成之后我們調整一下目錄結構, 具體如下:

dooring                       
├─ src                        
│  ├─ assets                  
│  │  └─ yay.jpg              
│  ├─ components              
│  ├─ layouts                 
│  │  ├─ __tests__            
│  │  │  └─ index.test.js     
│  │  ├─ index.css            
│  │  └─ index.js             
│  ├─ models                  
│  │  └─ editor.js            
│  ├─ pages                   
│  │  ├─ __tests__            
│  │  │  └─ index.test.js     
│  │  ├─ editor               
│  │  │  ├─ components        
│  │  │  │  └─ FormEditor     
│  │  │  │     ├─ index.js    
│  │  │  │     └─ index.less  
│  │  │  ├─ container.js      
│  │  │  ├─ index.js          
│  │  │  └─ index.less        
│  │  ├─ index.css            
│  │  └─ index.js             
│  ├─ service                  
│  │  └─ editor.js            
│  ├─ app.js                  
│  └─ global.css              
├─ package.json               
└─ webpack.config.js

page目錄下的editor使我們的主頁面, components存放我們的公共組件, models和service主要負責處理dva的狀態管理邏輯, 其他部分大家可以更具需求自由定義.此處僅供學習參考.

在項目創建完之后我們還需要安裝可視化方面必備的第三方組件, 筆者調研社區精選組件之后采用了一下方案: react-dnd react拖拽組件 react-color react顏色選擇組件,用于H5編輯器的編輯顏色部分 react-draggable 用于組件或者畫布的拖拽移動 react.qrcode 基于react的二維碼生成組件, 能以react組件的方式生成二維碼

以上組件在運行項目前大家可以自行安裝.

正文

在最好項目開發準備之后,我們就來開始設計我們的h5頁面可視化編輯器－Dooring.

H5編輯器實現

H5可視化編輯器主要需要4個部分,在文章開頭也分析過, 這里用圖來鞏固一下:

以上是最基本也是最核心的功能展示模型,接下來我們會一一將其拆解并逐個實現.

實現原理

我們都知道, 目前比較流行的頁面可視化搭建方案可以有如下幾種: 在線編輯代碼實現 在線編輯json實現 * 無代碼化拖拽實現(底層基于json配置文件)

筆者做了一下優缺點對比圖,如下:

| 方案 | 定制化程度 | 缺點 | | :--------- | :--: | -----------: | | 在線編輯代碼 | 最高 | 使用成本高,對非技術人員不友好,效率低 | | 在線編輯json | 較高 | 需要熟悉json,有一定使用成本, 對非技術人員不友好,效率一般 | | 無代碼化拖拽實現 | 高 | 使用成本低, 操作基本無門檻,效率較高 |

由以上分析來看, 為了開發一個低門檻, 對任何人適用的可視化編輯器, 筆者將采用第三種方案來實現, 目前市面上已有的產品也有很多, 比如說易企秀, 兔展, 百度H5等等. 實現原理其實還是基于json, 我們通過可視化的手段將自己配置的頁面轉化為json數據,最后在基于json渲染器來動態生成H5站點.

數據結構設計

為了提供組件的自定義能力,我們需要定義一套高可用的數據結構, 這樣才能實現因組件需求變更而帶來的維護性優勢.

在開始設計數據結構之前我們先來拆解一下模塊:

H5-Dooring

不同的組件都對應不同的"編輯區域".我們需要設計一套統一的標準的配置來約定它, 這樣對于表單編輯器的設計也非常有利, 具體拆解如下:

經過以上分析之后, 筆者設計了類似下面的數據結構:

"Text": {
    "editData": [
      {
        "key": "text",
        "name": "文字",
        "type": "Text"
      },
      {
        "key": "color",
        "name": "標題顏色",
        "type": "Color"
      },
      {
        "key": "fontSize",
        "name": "字體大小",
        "type": "Number"
      },
      {
        "key": "align",
        "name": "對齊方式",
        "type": "Select",
        "range": [
          {
            "key": "left",
            "text": "左對齊"
          },
          {
            "key": "center",
            "text": "居中對齊"
          },
          {
            "key": "right",
            "text": "右對齊"
          }
        ]
      },
      {
        "key": "lineHeight",
        "name": "行高",
        "type": "Number"
      }
    ],
    "config": {
      "text": "我是文本",
      "color": "rgba(60,60,60,1)",
      "fontSize": 18,
      "align": "center",
      "lineHeight": 2
    }
}

通過這種標準化結構設計之后,我們可以很方便的實現我們所需要的編輯頁面的功能, 并且后期擴展非常方便, 只需要往editData添加配置即可. 至于動態表單編輯器的實現,方案有很多, 筆者之前也寫過相關的文章, 這里就不詳細介紹了.

組件庫設計

組件庫設計考慮的一個重要的問題就是體積和渲染問題, 一旦組件庫變得越來越多, 那意味著頁面加載會非常慢,所以我們需要實現異步加載組件和代碼分割的能力, umi提供了這樣的功能,我們可以基于它提供的api去實現自己的額按需組件.

import { dynamic } from 'umi';

export default dynamic({
  loader: async function() {
    // 這里的注釋 webpackChunkName 可以指導 webpack 將該組件 HugeA 以這個名字單獨拆出去
    const { default: HugeA }=await import(/* webpackChunkName: "external_A" */ './HugeA');
    return HugeA;
  },
});

通過以上的方式來定義包裹我們的每一個組件, 這樣就能實現按需加載了, 但是最好的建議是不需要每個組件都按需加載和拆包,對于標題, 通知欄,頁頭,頁腳這些組件, 我們完全可以把它放在一個組里,這樣不但對不會影響加載速度, 還能減少一定的http請求.

筆者這里簡單舉一個組件實現的例子，方便大家理解：

const Header=memo((props)=> {
  const { 
    bgColor,
    logo,
    logoText,
    fontSize,
    color
  }=props
  return <header className={styles.header} style={{backgroundColor: bgColor}}>
      <div className={styles.logo}>
        <img src={logo && logo[0].url} alt={logoText} />
      </div>
      <div className={styles.title} style={{fontSize, color}}>{ logoText }</div>
  </header>
})

上面的Header組件的props屬性完全是由我們之前設計的json結構來定義的，在用戶編輯的過程中將收據收集并傳給Header組件。最后一步是將這些組件動態傳給dynamic組件，這塊在上文也介紹過了，大家可以根據自己的實現來做動態化渲染。

實現預覽功能

預覽功能這塊比較簡單, 我們只需要將用戶生成的json數據丟進H5渲染器中即可, 這里我們需要做一個渲染頁面單獨用來預覽組件. 先來看看幾個預覽效果:

前面的渲染器原理已經介紹了, 這里就不一一介紹了,感興趣的可以交流討論.

實現在線下載功能

在線下載這塊我們需要用到一個開源庫: file-saver, 專門解決前端下載文件困難的窘境. 具體使用舉例:

var FileSaver=require('file-saver');
var blob=new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

以上代碼可以實現將傳入的數據下載為txt文件, 如果是Blob, 是不是還能在線下載圖片, html呢? 答案是肯定的, 所以我們的下載任務采用該方案來實現.

后端部分實現

后端部分由于涉及的知識點比較多, 不是本文考慮的重點, 所以這里大致提幾個點, 大家可以用完全不同的技術來實現后臺服務, 比如說PHP, Java, Python或者Egg. 筆者這里采用的是koa. 主要實現功能如下:

保存模板
真機預覽的數據源存儲
用戶相關功能
H5圖床和靜態文件托管