日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
如何評(píng)價(jià)Dooring低代碼/零代碼搭建平臺(tái)？
  • H5-Dooring 開源版本
  • 可視化低代碼技術(shù)集合
  • H5-Dooring在線體驗(yàn)

Dooring無(wú)代碼產(chǎn)品技術(shù)演進(jìn)

兩年前我設(shè)計(jì)了H5-Dooring的第一個(gè)開源版本, 之后陸陸續(xù)續(xù)迭代了兩年, github star已達(dá)到6.5k+, 也找到了很多志同道合的小伙伴, 一起研發(fā)Dooring系的搭建產(chǎn)品, 如：

  • h5-dooring | 可視化搭建解決方案
  • mitu-editor | 開源圖片編輯器
  • v6.dooring | 可視化大屏搭建平臺(tái)
  • dooringx | 可視化搭建框架

從技術(shù)設(shè)計(jì)和產(chǎn)品規(guī)劃上, 這幾年也總結(jié)摸索出了一些經(jīng)驗(yàn)和實(shí)踐, 接下來(lái)我就和大家一起分享一下H5-Dooring 的技術(shù)架構(gòu)設(shè)計(jì)與演進(jìn)。

底層搭建協(xié)議標(biāo)準(zhǔn)化

我們都知道任何低代碼或者零代碼搭建產(chǎn)品都非常注重底層搭建協(xié)議, 這些產(chǎn)品通常會(huì)設(shè)計(jì)一套向上兼容且可擴(kuò)展的DSL結(jié)構(gòu), 來(lái)實(shí)現(xiàn)頁(yè)面元件的標(biāo)準(zhǔn)化配置, 并支持元件的向上擴(kuò)展。

上面這張圖是我在設(shè)計(jì) V6.Dooring 可視化大屏搭建平臺(tái)的編輯器架構(gòu)圖, 這里的底層搭建協(xié)議可以認(rèn)為是 搭建基礎(chǔ), 也就是我們常說(shuō)的 “經(jīng)濟(jì)基礎(chǔ)決定上層建筑”。

在設(shè)計(jì)H5-Dooring 搭建平臺(tái)前, 我也參考了很多標(biāo)準(zhǔn)化軟件數(shù)據(jù)協(xié)議, 給我啟發(fā)最大的就是 ODATA, 它是微軟于2007年發(fā)起的開放協(xié)議, 主要由以下幾部分組成：

「核心協(xié)議」: 主要定義了開放數(shù)據(jù)協(xié)議的核心語(yǔ)義和行為。

  • 「URL規(guī)范」: 主要定義了一系列推薦（非強(qiáng)制）采用的構(gòu)建用于訪問(wèn)OData服務(wù)中的數(shù)據(jù)和模型的URL的規(guī)則。

  • 「通用格式定義語(yǔ)言（CSDL）」: 它定義了OData服務(wù)的「EDM」模型的一種XML格式的表現(xiàn)形式。
  • 「擴(kuò)展的巴科斯范式（ABNF）」: 定義了構(gòu)建OData請(qǐng)求和響應(yīng)URL的「巴科斯范式」。

為了讓可視化搭建平臺(tái)的組件數(shù)據(jù)標(biāo)準(zhǔn)化且可擴(kuò)展, 這里我分享一下H5-Dooring的Schema設(shè)計(jì)。

Schema 分兩部分：

  • editData 組件可編輯屬性的數(shù)組
  • config 組件真正消費(fèi)的數(shù)據(jù)

editData 詳解

editData 是 組件屬性可編輯項(xiàng)的數(shù)組, 每一項(xiàng)里面包含了如下字段：

  • key 屬性名
  • name: 屬性名的中文顯示
  • type: 屬性的可編輯類型
  • isCrop(可選)
  • cropRate(可選)
  • range(type 為'Radio'或'Select'時(shí)的選項(xiàng)數(shù)組)
  • 后期可能會(huì)擴(kuò)展(詳細(xì)結(jié)構(gòu)可參考Dooring 開源版本)

key和name 都可以按照組件屬性的語(yǔ)義來(lái)定, 這里值得一提的是 type. 不同屬性的值類型不同, 所以我們編輯項(xiàng)的 type 也不同, 所有的類型如下：

  • Upload 上傳組件
  • Text 文本框
  • RichText 富文本
  • TextArea 多行文本
  • Number 數(shù)字輸入框
  • DataList 列表編輯器
  • FileList 文件列表編輯器
  • InteractionData 交互設(shè)置
  • Color 顏色面板
  • MutiText 多文本
  • Select 選擇下拉框
  • Radio 單選框
  • Switch 開關(guān)切換
  • CardPicker 卡片面板
  • Table 表格編輯器
  • Pos 坐標(biāo)編輯器
  • FormItems 表單設(shè)計(jì)器

config 詳解

config 本質(zhì)上是一個(gè)對(duì)象, 也就是組件所能暴露出來(lái)的屬性集合, 和 editData 數(shù)組每一項(xiàng)的key 一致, 如下：

{
    cpName: 'Header',
    logoText: '',
    fontSize: 20,
    color: 'rgba(47,84,235,1)',
    height: 60,
    fixTop: false,
    menuList: [
      {
        id: '1',
        title: '首頁(yè)',
        link: '/'
      },
      {
        id: '2',
        title: '產(chǎn)品介紹',
        link: '/'
      },
    ]
  }

我們通過(guò)以上的設(shè)計(jì)規(guī)范, 就可以輕松制作一個(gè)可實(shí)時(shí)編輯的低代碼組件：

可以在Dooring官方文檔體驗(yàn): 低代碼組件案例。

搭建模式多元化

最開始設(shè)計(jì)H5-Dooring的時(shí)候?yàn)榱俗畲笙薅鹊慕档陀脩舻拇罱ǔ杀? 我采用了智能網(wǎng)格布局的方式來(lái)搭建頁(yè)面, 用戶只需要在二維空間像搭積木一樣選擇適合的組件就可以快速的制作頁(yè)面：

這樣雖然可以降低用戶的搭建難度, 并能滿足一部分受眾的搭建需求, 比如說(shuō)簡(jiǎn)單的官網(wǎng), 活動(dòng)頁(yè)面制作,下面是一個(gè)搭建的比較有代表性的例子：

但是對(duì)于平臺(tái)方, 為了滿足更多場(chǎng)景的頁(yè)面深度制作, 就必須提供不同場(chǎng)景不同行業(yè)的組件物料, 這將對(duì)研發(fā)帶來(lái)巨大的壓力(雖然也一直在添加新組件)。

另一方面, 目前上很多H5活動(dòng)制作平臺(tái)基本上都采用的自由布局的模式搭建, 好處就是可以最大限度的還原設(shè)計(jì)稿, 滿足更靈活的搭建需求, 缺點(diǎn)就是使用成本比網(wǎng)格布局的模式要高, 還會(huì)涉及圖層的概念。

當(dāng)然綜合評(píng)估下來(lái), 確實(shí)很有必要給一部分用戶提供自由布局的模式, 所以在技術(shù)層我設(shè)計(jì)同時(shí)兼容網(wǎng)格布局和自由布局的搭建方案. 當(dāng)用戶在搭建時(shí), 可以輕松選擇自己適合的搭建模式:

同時(shí)為了滿足自由布局下組件的層級(jí)管理, 我又設(shè)計(jì)了圖層管理面板和圖層操作, 來(lái)快速的管理頁(yè)面元素, 當(dāng)然圖層管理面板 對(duì)網(wǎng)格布局 也同樣有一定積極作用, 比如快捷的操作組件。

可擴(kuò)展的插件系統(tǒng)

在前面提到了可視化搭建平臺(tái)的統(tǒng)一搭建協(xié)議和搭建模式, 在這兩個(gè)核心要素完成之后, 我們就很容易的去設(shè)計(jì)我們的插件系統(tǒng)。

從插件系統(tǒng)的本質(zhì)來(lái)看, 核心價(jià)值是對(duì)頁(yè)面操作的整個(gè)周期里為頁(yè)面賦能, 而頁(yè)面的本質(zhì)是數(shù)據(jù)(也就是DSL集)。

所以只要有標(biāo)準(zhǔn)的數(shù)據(jù)規(guī)范, 我們自定義的插件就可以很輕松的來(lái)對(duì)頁(yè)面進(jìn)行賦能, 類似于各種技術(shù)里面的中間件. 下面是一個(gè)例子：

{
    "pageConfig": {
        "allowOverlap": "freedom",
        "isLogin": false,
        "bgColor": "rgba(16,20,29,1)",
        "bgSize": "100%",
        "title": "H5-Dooring官網(wǎng)"
    },
    "tpl": [
        {
            "id": "276059",
            "item": {
                "category": "base",
                "config": {
                    "cpName": "XButton",
                    "id": "",
                    "bgColor": "rgba(22,40,212,1)",
                    "width": 190,
                    "marginTop": 0,
                    "round": 16,
                    "text": "按鈕",
                    "fontSize": 15,
                    "color": "rgba(255,255,255,1)",
                    "animation": "none",
                    "animationTurn": 1,
                    "delay": 0,
                    "interaction": {
                        "type": "link",
                        "title": "",
                        "params": "",
                        "content": "",
                        "height": 300,
                        "width": 300,
                        "okText": "",
                        "cancelText": "",
                        "onOk": "",
                        "btnColor": "rgba(20,54,226,100)"
                    }
                },
                "h": 23,
                "type": "XButton"
            },
            "point": {
                "w": 24,
                "h": 23,
                "x": 0,
                "y": 0,
                "i": "276059",
                "moved": false,
                "static": false,
                "isBounded": true
            },
            "status": "inToCanvas"
        },
        {
            "id": "260487",
            "item": {
                "category": "base",
                "config": {
                    "cpName": "LongText",
                    "id": "",
                    "text": "我是長(zhǎng)文本有一段故事，dooring可視化編輯器無(wú)限可能，趕快來(lái)體驗(yàn)吧，騷年們，奧利給~",
                    "color": "rgba(60,60,60,1)",
                    "fontSize": 14,
                    "indent": 0,
                    "lineHeight": 1.8,
                    "textAlign": "left",
                    "bgColor": "rgba(255,255,255,0)",
                    "padding": 0,
                    "radius": 0
                },
                "h": 36,
                "type": "LongText"
            },
            "point": {
                "w": 24,
                "h": 36,
                "x": 0,
                "y": 23,
                "i": "260487",
                "moved": false,
                "static": false,
                "isBounded": true
            },
            "status": "inToCanvas"
        }
    ]
}

上面是H5-Dooring生成的一個(gè)頁(yè)面DSL結(jié)構(gòu), 如果我們要對(duì)頁(yè)面元素進(jìn)行統(tǒng)計(jì)分析, 或者實(shí)現(xiàn)出碼, 國(guó)際化, PSD解析轉(zhuǎn)化等功能, 只需要對(duì)數(shù)據(jù)結(jié)構(gòu)進(jìn)行分析和處理即可。

所以說(shuō)在H5-Dooring平臺(tái)實(shí)現(xiàn)自定義的插件還是非常容易的, 也是低代碼或者無(wú)代碼需要重點(diǎn)規(guī)劃的一個(gè)環(huán)節(jié)。

可擴(kuò)展的組件編輯器

H5-Dooring平臺(tái)的組件編輯器主要是對(duì)組件屬性進(jìn)行編輯,比如：

  • 基本樣式
  • 交互設(shè)置
  • 動(dòng)畫設(shè)置

當(dāng)然還有全局的數(shù)據(jù)源配置. 如下:

同時(shí)由于我們的組件數(shù)據(jù)協(xié)議高度統(tǒng)一, 所以如果想擴(kuò)展屬性配置, 也非常容易, 我們只需要按照數(shù)據(jù)協(xié)議添加屬性即可：

同理, 「v6.dooring」 也采用相似的架構(gòu), 所以我們可以輕松擴(kuò)展組件的屬性：

有關(guān)可視化大屏搭建平臺(tái)的技術(shù)實(shí)踐可以參考我的另一篇文章 從零設(shè)計(jì)可視化大屏搭建引擎。

多端搭建支持

由于Dooring的技術(shù)棧采用React, 并實(shí)現(xiàn)了標(biāo)準(zhǔn)的數(shù)據(jù)協(xié)議層, 所以我們可以利用類似 Taro 等跨平臺(tái)框架實(shí)現(xiàn)多端搭建, 對(duì)于我們常用的媒介如移動(dòng)端, Pad和PC端, 目前編輯器也提供了快捷的切換模式：

所以我們可以輕松的實(shí)現(xiàn)不同端的搭建, 實(shí)現(xiàn)原理本質(zhì)上是通過(guò)切換畫布大小, 并同比例更新元素的計(jì)量衡。

圖層管理, 讓設(shè)計(jì)更高效

圖層管理模塊也是在Dooring支持了自由布局之后才上線的功能. 因?yàn)槲覀冺?yè)面中組件的數(shù)據(jù)結(jié)構(gòu)中包含統(tǒng)一的物理信息：

  • 層級(jí)
  • 可見性
  • 類別
  • 大小顏色等外觀
  • 事件 / 交互 / 動(dòng)畫

所以我們只需要分析頁(yè)面的組件集合, 就可以輕松的渲染出頁(yè)面中的元素圖層信息：

有了圖層的概念我們其實(shí)可以做很多有用的事情, 比如：

  • 多選組件
  • 編輯組件
  • 刪除組件
  • 鎖定組件

后面 Dooring 也會(huì)基于圖層能力迭代更多提高用戶搭建銷效率的功能。

低代碼組件 & 模版生態(tài)

在Dooring 的迭代中花了大部分精力在優(yōu)化用戶搭建體驗(yàn)和協(xié)議標(biāo)準(zhǔn)化上, 對(duì)于組件物料的豐富上, 我也做了一些設(shè)計(jì), 最近也發(fā)布了一套低代碼組件庫(kù)的原型：

我們可以輕松的像寫 React 組件一樣來(lái)實(shí)現(xiàn)低代碼組件, 并支持線上實(shí)時(shí)編輯, 一個(gè)基本的例子如下：

import styles from './index.less';
import React, { memo, useState } from 'react';
import { MenuOutlined } from '@ant-design/icons';
import { IHeaderConfig } from './schema';

const Header = memo((props: IHeaderConfig) => {
  const {
    cpName,
    bgColor,
    logo,
    logoText,
    fontSize,
    color,
    showMenuBtn,
    menuColor,
    height,
  } = props;
  const [showMenu, setShowMenu] = useState(false);
  const toggleMenu = () => {
    setShowMenu(!showMenu);
  };
  return (
          className={styles.header}
      style={{ backgroundColor: bgColor, height: height + 'px' }}
    >
      

        {logoText}
      

      

        {logoText}
      

      {showMenuBtn && (
        <>
                      className={styles.menuIconWrap}
            onClick={toggleMenu}
            style={{ color: menuColor, borderColor: menuColor }}
          >


)}

);
});

export default Header;

通過(guò)這種標(biāo)準(zhǔn)化的方式, 我們可以給 Dooring 平臺(tái)提供更為豐富的組件物料。

除了基礎(chǔ)物料組件之外, 為了從更大粒度提高用戶搭建的效率, 我提供了模版功能, 我們可以把重復(fù)的區(qū)塊和可復(fù)用的頁(yè)面保存為模版：

我們可以在編輯器頁(yè)面輕松將頁(yè)面保存為模版, 并自動(dòng)生成海報(bào)封面：

基于網(wǎng)頁(yè)生成封面的方式也很簡(jiǎn)單, 我這里采用的是 dom-to-image 這個(gè)庫(kù), 當(dāng)然搭建也可以使用html2canvas。

表單設(shè)計(jì)器 & 數(shù)據(jù)收集分析能力

表單編輯器的實(shí)現(xiàn)思路我之前也寫過(guò)一些分享, 這里和大家再介紹一下核心的一些思路。

動(dòng)態(tài)表單開發(fā)的一般思路

「1. 靜態(tài)化配置列表」

靜態(tài)化配置列表是最傳統(tǒng)的表單配置方式之一，基本思路就是利用母表來(lái)生成配置項(xiàng)，進(jìn)而實(shí)現(xiàn)表單配置。類似于以下方式：

早期的網(wǎng)站配置就是類似于這種呢方案實(shí)現(xiàn)的，比如說(shuō)我們要定制網(wǎng)站的主色，網(wǎng)站某些組件是否可見，是一種比較簡(jiǎn)單的方式。但是缺點(diǎn)是每增加一個(gè)配置屬性，都要開發(fā)人員重新編寫一個(gè)字段配置代碼，這種方式在表單開發(fā)中非常不靈活，而且對(duì)代碼層有強(qiáng)依賴性，所以只適合做小型配置系統(tǒng)。比如個(gè)人網(wǎng)站，簡(jiǎn)單的自定義表單。

「2. 基于json schema的動(dòng)態(tài)表單配置」

基于「json schema」的動(dòng)態(tài)表單配置有兩種實(shí)現(xiàn)方案， 一種就是支持在線修改json文件從而實(shí)現(xiàn)定制化，另一種就是完全無(wú)代碼操作，但是前提都需要提供一套通用的表單模版。類似于如下案例：

此種方案可以實(shí)現(xiàn)基本的表單自治。也是本文主要實(shí)現(xiàn)的方案。至于在線編寫json文件的方案。筆者之前也也過(guò)成熟的方案，具體可以參考：基于jsoneditor二次封裝一個(gè)可實(shí)時(shí)預(yù)覽的json編輯器組件(react版)。

「3. 支持在線coding的混合式表單設(shè)計(jì)」 

支持「在線編程」的混合式表單設(shè)計(jì)方案是終極方案，也是目前流行的無(wú)代碼化平臺(tái)的思想之一。一方面它提供了基于「json schema」的動(dòng)態(tài)表單配置， 對(duì)于一些強(qiáng)定制的，需要在線設(shè)計(jì)組件方案的模式，采用在線編程，實(shí)時(shí)打包成動(dòng)態(tài)組件的方式，最后根據(jù)平臺(tái)的組件約定來(lái)實(shí)現(xiàn)組件庫(kù)的方式。如下圖所示：

在線代碼編輯可以使用「react-codemirror2」或者 「react-monaco-editor」插件來(lái)實(shí)現(xiàn)。至于在線打包，我們用「nodejs」完全可以實(shí)現(xiàn)，筆者在做「Dooring」項(xiàng)目的在線下載代碼時(shí)就用到了該方案，感興趣的可以了解一下。

可視化領(lǐng)域中的表單引擎

可視化領(lǐng)域一方面強(qiáng)調(diào)的是圖形(可視化)的設(shè)計(jì)，一方面是動(dòng)態(tài)表單。比如說(shuō)我們想傻瓜式的改變一張圖的數(shù)據(jù)，屬性，交互等，我們需要通過(guò)表單這一橋梁來(lái)實(shí)現(xiàn)：

所以我們需要設(shè)計(jì)一款適合公司產(chǎn)品的“表單引擎”，來(lái)動(dòng)態(tài)根據(jù)圖形組件的類型渲染不同表單配置。這塊思想也是表單設(shè)計(jì)器要解決的問(wèn)題之一。在下面的文章中我們會(huì)詳細(xì)介紹實(shí)現(xiàn)過(guò)程。

從零實(shí)現(xiàn)一款動(dòng)態(tài)表單設(shè)計(jì)器

在實(shí)現(xiàn)表單設(shè)計(jì)器之前，我們先來(lái)整理一下思路和需求。在筆者的最初草圖中，它長(zhǎng)這樣：

從草圖中我們可以提取到如下任務(wù)信息：

  • 定義一套表單組件庫(kù)
  • 確定表單全局屬性配置
  • 實(shí)現(xiàn)表單操作curd(增刪查改)

我們這里總結(jié)了幾個(gè)常用的表單組件如下：

  • 單選框
  • 復(fù)選框
  • 單行文本
  • 多行文本
  • 下拉框
  • 文件上傳
  • 日期框
  • 數(shù)值輸入框

以上這些基本滿足我們的日常開發(fā)需求，其次我們還可以開發(fā)數(shù)據(jù)源表單組件，列表組件，比如dooring實(shí)現(xiàn)的那樣：

類似的還有顏色面板這些，我們可以更具業(yè)務(wù)需求自行定制。

在完成表單組件庫(kù)之后，我們就需要根據(jù)配置項(xiàng)動(dòng)態(tài)渲染了。也有兩種實(shí)現(xiàn)思路，一種就是類似于多條件判斷，如下：

{
  item.type === 'Number' &&
  
    
  
}
{
  item.type === 'Text' &&
  
    
  
}
{
  item.type === 'TextArea' &&