2020AV天堂网,午夜色色视频,美女黄片免费观看,欧美黄色电影网站,亚洲人在线

其他新聞

其他新聞

關(guān)于拖拽式h5建站源碼的信息

時(shí)間:2023-11-09 信途科技其他新聞
前言

前段時(shí)間筆者一直忙于數(shù)據(jù)可視化方面的工作,比如如何實(shí)現(xiàn)拖拽式生成可視化大屏,如何定制可視化圖表交互和數(shù)據(jù)導(dǎo)入方案等,這塊需求在B端企業(yè)中應(yīng)用非常大,所以非常有探索價(jià)值。

本篇文章并非和數(shù)據(jù)可視化相關(guān),而是通過抽象技術(shù)底層,將其應(yīng)用于H5頁面可視化搭建上,通過技術(shù)的手段實(shí)現(xiàn)拖拽式生成H5頁面。這塊也有非常多的應(yīng)用場景,比如我們需要開發(fā)一個(gè)移動(dòng)端網(wǎng)站,一個(gè)H5營銷頁面,H5活動(dòng)頁面等,如果有這樣的傻瓜式拖拽的工具生成H5頁面,將會(huì)極大的提高我們的工作效率。

接下來筆者將對h5頁面可視化編輯器-Dooring做詳細(xì)的項(xiàng)目分析和原理解讀,來帶大家深入了解h5可視化搭建頁面的原理和技術(shù)實(shí)現(xiàn)。H5編輯器預(yù)覽如下:

H5-dooring

H5-Dooring

github地址:H5-Dooring

技術(shù)棧React 前端主流框架(react,vue,angular)之一,更適合開發(fā)靈活度高且復(fù)雜的應(yīng)用dva 主流的react應(yīng)用狀態(tài)管理工具,基于reduxless css預(yù)編譯語言,輕松編寫結(jié)構(gòu)化分明的cssumi 基于react的前端集成解決方案antd 地球人都知道的react組件庫axios 強(qiáng)大的前端請求庫react-dnd 基于react的拖拽組件解決方案,具有優(yōu)秀的設(shè)計(jì)哲學(xué)qrcode.react 基于react的二維碼生成插件zarm 基于react的移動(dòng)端ui庫,輕松實(shí)現(xiàn)美觀的H5應(yīng)用koa 基于nodejs的上一代開發(fā)框架,輕松實(shí)現(xiàn)基于nodejs的后端開發(fā)@koa/router 基于koa2的服務(wù)端路由中間件ramda 優(yōu)秀的函數(shù)式j(luò)s工具庫需求分析

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

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

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

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

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

基礎(chǔ)準(zhǔn)備

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

umi是可擴(kuò)展的企業(yè)級前端應(yīng)用框架,以路由為基礎(chǔ)的,同時(shí)支持配置式路由和約定式路由,保證路由的功能完備,并以此進(jìn)行功能擴(kuò)展。然后配以生命周期完善的插件體系,覆蓋從源碼到構(gòu)建產(chǎn)物的每個(gè)生命周期,支持各種功能擴(kuò)展和業(yè)務(wù)需求.

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

// 創(chuàng)建并進(jìn)入工程目錄mkdir dooring && cd dooring// 創(chuàng)建umi應(yīng)用yarn create @umijs/umi-app// 安裝依賴yarn // 或者使用npm install

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

【限時(shí)免費(fèi)】AI大廠面試核心考點(diǎn),六大方向一網(wǎng)打盡

已失效

在項(xiàng)目搭建完成之后我們調(diào)整一下目錄結(jié)構(gòu), 具體如下:

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主要負(fù)責(zé)處理dva的狀態(tài)管理邏輯, 其他部分大家可以更具需求自由定義.此處僅供學(xué)習(xí)參考.

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

以上組件在運(yùn)行項(xiàng)目前大家可以自行安裝.

正文

在最好項(xiàng)目開發(fā)準(zhǔn)備之后,我們就來開始設(shè)計(jì)我們的h5頁面可視化編輯器-Dooring.

H5編輯器實(shí)現(xiàn)

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

以上是最基本也是最核心的功能展示模型,接下來我們會(huì)一一將其拆解并逐個(gè)實(shí)現(xiàn).

實(shí)現(xiàn)原理

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

筆者做了一下優(yōu)缺點(diǎn)對比圖,如下:

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

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

數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)

為了提供組件的自定義能力,我們需要定義一套高可用的數(shù)據(jù)結(jié)構(gòu), 這樣才能實(shí)現(xiàn)因組件需求變更而帶來的維護(hù)性優(yōu)勢.

在開始設(shè)計(jì)數(shù)據(jù)結(jié)構(gòu)之前我們先來拆解一下模塊:

H5-Dooring

不同的組件都對應(yīng)不同的"編輯區(qū)域".我們需要設(shè)計(jì)一套統(tǒng)一的標(biāo)準(zhǔn)的配置來約定它, 這樣對于表單編輯器的設(shè)計(jì)也非常有利, 具體拆解如下:

經(jīng)過以上分析之后, 筆者設(shè)計(jì)了類似下面的數(shù)據(jù)結(jié)構(gòu):

"Text": { "editData": [ { "key": "text", "name": "文字", "type": "Text" }, { "key": "color", "name": "標(biāo)題顏色", "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 }}

通過這種標(biāo)準(zhǔn)化結(jié)構(gòu)設(shè)計(jì)之后,我們可以很方便的實(shí)現(xiàn)我們所需要的編輯頁面的功能, 并且后期擴(kuò)展非常方便, 只需要往editData添加配置即可. 至于動(dòng)態(tài)表單編輯器的實(shí)現(xiàn),方案有很多, 筆者之前也寫過相關(guān)的文章, 這里就不詳細(xì)介紹了.

組件庫設(shè)計(jì)

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

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

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

筆者這里簡單舉一個(gè)組件實(shí)現(xiàn)的例子,方便大家理解:

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屬性完全是由我們之前設(shè)計(jì)的json結(jié)構(gòu)來定義的,在用戶編輯的過程中將收據(jù)收集并傳給Header組件。最后一步是將這些組件動(dòng)態(tài)傳給dynamic組件, 這塊在上文也介紹過了,大家可以根據(jù)自己的實(shí)現(xiàn)來做動(dòng)態(tài)化渲染。

實(shí)現(xiàn)預(yù)覽功能

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

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

實(shí)現(xiàn)在線下載功能

在線下載這塊我們需要用到一個(gè)開源庫: 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");

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

后端部分實(shí)現(xiàn)

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

保存模板 真機(jī)預(yù)覽的數(shù)據(jù)源存儲 用戶相關(guān)功能 H5圖床和靜態(tài)文件托管

github地址:H5-Dooring

最后

如果想學(xué)習(xí)更多H5游戲, webpack,node,gulp,css3,javascript,nodeJS,canvas數(shù)據(jù)可視化等前端知識和實(shí)戰(zhàn),歡迎在《趣談前端》一起學(xué)習(xí)討論,共同探索前端的邊界。

掃描二維碼推送至手機(jī)訪問。

版權(quán)聲明:本文由信途科技轉(zhuǎn)載于網(wǎng)絡(luò),如有侵權(quán)聯(lián)系站長刪除。

轉(zhuǎn)載請注明出處http://m.quickersubmitter.com/xintu/13524.html

標(biāo)簽: 拖拽式h5建站源碼

相關(guān)文章

淘寶建站(淘寶建站推廣不讓發(fā)布)

自建站無疑是當(dāng)前跨境電商行業(yè)最火的新趨勢,眾多賣家爭先布局。而這其中,零基礎(chǔ)的賣家不在少數(shù),甚至有部分沒有電商經(jīng)驗(yàn)的轉(zhuǎn)型工廠也在躍躍欲試。那從零開始,要如何打造一個(gè)自建站?賣家運(yùn)營自建站又會(huì)遇到哪些痛...

關(guān)于佛山網(wǎng)站建設(shè)的信息

本篇文章信途科技給大家談?wù)劮鹕骄W(wǎng)站建設(shè),以及對應(yīng)的知識點(diǎn),希望對各位有所幫助,不要忘了收藏本站。 本文導(dǎo)讀目錄: 1、佛山哪個(gè)公司的網(wǎng)站建設(shè)靠譜,特別是順德地區(qū)? 2、佛山網(wǎng)站建設(shè)公司有哪些?...

「色彩設(shè)計(jì)」色彩設(shè)計(jì)專業(yè)

本篇文章給大家談?wù)勆试O(shè)計(jì),以及色彩設(shè)計(jì)專業(yè)對應(yīng)的知識點(diǎn),希望對各位有所幫助,不要忘了收藏本站。 本文導(dǎo)讀目錄: 1、網(wǎng)頁色彩設(shè)計(jì)的原則有哪些? 2、在家居色彩設(shè)計(jì)中,不同的色彩能給人帶來哪些不同...

武漢免費(fèi)建站(武漢免費(fèi)終身售后得工長蔡小江)

閱讀提示:從2020年一季度地區(qū)生產(chǎn)總值斷崖式下跌40.5%,逆襲到全年經(jīng)濟(jì)總量突破1.56萬億元,重回全國城市前十。這是武漢復(fù)蘇的奇跡,更是中國發(fā)展的奇跡。“沒有一個(gè)冬天不可逾越,沒有一個(gè)春天不會(huì)來...

廊坊關(guān)鍵詞排名效果(青島關(guān)鍵詞排名效果)

來源廊坊關(guān)鍵詞排名效果:人民網(wǎng)北運(yùn)河廊坊段全線旅游通航。 劉向攝京津冀交通一體化重點(diǎn)項(xiàng)目廠通路北京、河北段同步開工建設(shè),標(biāo)志著北京城市副中心與河北廊坊北三縣交通一體化高質(zhì)量發(fā)展向縱深邁進(jìn);全國首個(gè)也是...

建站abc提供技(建站ABC官網(wǎng))

綜合應(yīng)用能力ABC考情分析備考指導(dǎo)樸曉一年一度的事業(yè)單位招考已拉開帷幕,報(bào)名工作和備考工作也已陸續(xù)開始。多省事業(yè)單位統(tǒng)一考綱、統(tǒng)一時(shí)間和統(tǒng)一試卷聯(lián)考從2015年開始,一般一年舉行兩次。上半年一般在5月...

現(xiàn)在,非常期待與您的又一次邂逅

我們努力讓每一次邂逅總能超越期待

  • 效果付費(fèi)
    效果付費(fèi)

    先出效果再付費(fèi)

  • 極速交付
    極速交付

    響應(yīng)速度快,有效節(jié)省客戶時(shí)間

  • 1對1服務(wù)
    1對1服務(wù)

    專屬客服對接咨詢

  • 持續(xù)更新
    持續(xù)更新

    不斷升級維護(hù),更好服務(wù)用戶