如何搭積木式的快速開(kāi)發(fā)H5頁(yè)面?

作者：徐小夕 2020-12-13 12:14:45

筆者接下來(lái)將介紹最新版H5編輯器的功能和實(shí)現(xiàn)思路, 以及如何實(shí)現(xiàn)所見(jiàn)即所得的方案嘗試.

2個(gè)月前開(kāi)源的H5編輯器 H5-Dooring 目前已經(jīng)成功迭代到1.0版本, 從最開(kāi)始的基本的頁(yè)面生成框架到現(xiàn)在的支持更豐富的組件資源,交互能力和數(shù)據(jù)追蹤能力, 期間做了很多的設(shè)計(jì)和迭代,也收獲了很多網(wǎng)友的反饋和啟發(fā), 也有很多志同道合的朋友加入進(jìn)來(lái)一起讓 H5-Dooring 變的更好更強(qiáng)大, 在此特意分享一下我們最新的版本和功能實(shí)現(xiàn).

設(shè)計(jì)初衷

筆者最開(kāi)始開(kāi)發(fā)這個(gè)項(xiàng)目的主要目的是提高個(gè)人和企業(yè)開(kāi)發(fā) H5 頁(yè)面的成本和效率, 可以通過(guò)搭積木的方式, 利用已有組件庫(kù)或外部組件資源(正在設(shè)計(jì))搭建出適合不同場(chǎng)景的 H5 應(yīng)用, 并且支持一鍵下載代碼, 讓技術(shù)人員輕松將H5頁(yè)面部署到自己的服務(wù)器中. 筆者之前也做過(guò)很多代碼生成的小應(yīng)用, 但是都是為程序員少寫(xiě)代碼而設(shè)計(jì)的, 不足以成為一個(gè)真正的開(kāi)源項(xiàng)目, 所以筆者打算把H5-Dooring好好落地, 做成一個(gè)真正有價(jià)值的項(xiàng)目.筆者接下來(lái)將介紹最新版H5編輯器的功能和實(shí)現(xiàn)思路, 以及如何實(shí)現(xiàn)所見(jiàn)即所得的方案嘗試.

最新版編輯器效果預(yù)覽

表單數(shù)據(jù)看板和數(shù)據(jù)分析:

技術(shù)棧

之前在筆者的文章中也介紹過(guò)H5-Dooring使用的技術(shù)棧和基礎(chǔ)架構(gòu)實(shí)現(xiàn)了, 感興趣的可以參考基于React+Koa實(shí)現(xiàn)一個(gè)h5頁(yè)面可視化編輯器最近我們?cè)谟胣est重構(gòu)項(xiàng)目的后端部分, 后期會(huì)做一定的技術(shù)方案介紹. 這里簡(jiǎn)單介紹一下項(xiàng)目實(shí)現(xiàn)的技術(shù)棧:

umi3.0 + dva + antd4.0
react + react生態(tài)
nest + mysql + redis
nginx + pm2

所以這個(gè)項(xiàng)目屬于一個(gè)全棧項(xiàng)目, 很多核心功能的實(shí)現(xiàn)取決的約定好的DSL層, 頁(yè)面渲染層和后端能力.

功能點(diǎn)和實(shí)現(xiàn)方案

筆者之前的系列文章中有介紹具體功能點(diǎn)和實(shí)現(xiàn)方案, 這里我們主要介紹1.0版本已有的新功能.

新增富文本組件, 日歷組件, 按鈕交互組件, 專(zhuān)欄組件

富文本組件筆者采用的是國(guó)產(chǎn)的braft, 預(yù)覽如下:

因?yàn)轫?xiàng)目用antd4.0開(kāi)發(fā)的, 所以筆者專(zhuān)門(mén)封裝了一套適配antd4.0組件的富文本編輯器, 支持Form組件的受控模式. 感興趣的可以在github上學(xué)習(xí)具體的實(shí)現(xiàn)方式.

日歷組件也是最近剛加的, 主要是為了實(shí)現(xiàn)更豐富的H5頁(yè)面展示, 如下:

我們可以設(shè)置選擇的時(shí)間范圍, 被選擇范圍的主色, 日期等. 日期組件筆者主要采用的zarm的Calendar組件, 核心如下:

import React, { useState, memo, useEffect, useRef } from 'react'; 
import { Calendar } from 'zarm'; 
import styles from './index.less'; 
import { ICalendarConfig } from './schema'; 
 
const CalendarPlayer = memo((props: ICalendarConfig & { isTpl: boolean }) => { 
  const { time, range, color, selectedColor, round, isTpl } = props; 
  const realRange = range.split('-'); 
 
  const [value, setValue] = useState<Date[] | undefined>([new Date(`${time}-${realRange[0]}`), new Date(`${time}-${realRange[1]}`)]); 
  const [min] = useState(new Date(`${time}-01`)); 
  const [max] = useState(new Date(`${time}-31`)); 
  const boxRef = useRef<any>(null); 
  return <div className={styles.calenderWrap} style={{borderRadius: round + 'px', pointerEvents: isEditorPage ? 'none' : 'initial'}} ref={boxRef}> 
          <Calendar 
            multiple={!!range} 
            value={value} 
            min={min} 
            max={new Date(max)} 
            disabledDate={(date:any) => /(0|6)/.test(date.getDay())} 
            onChange={(value:Date[] | undefined) => { 
              setValue(value); 
            }} 
          /> 
        </div> 
}); 
 
export default CalendarPlayer;

這也是實(shí)現(xiàn)Dooring組件的一種方式, 感興趣的朋友歡迎為Dooring添加更多豐富組件支持.

之前還有個(gè)朋友問(wèn)過(guò)我為什么項(xiàng)目使用了這么多組件在預(yù)覽H5頁(yè)面的時(shí)候速度還是很快, 這里我說(shuō)明一下具體的實(shí)現(xiàn)方式, 如下圖:

所以說(shuō)我們移動(dòng)端的產(chǎn)物和依賴(lài)的資源非常少, 并且在webpack層和服務(wù)器層做了優(yōu)化, 所以移動(dòng)端訪問(wèn)H5頁(yè)面會(huì)非常快, 這塊優(yōu)化筆者后期會(huì)詳細(xì)介紹, 目前對(duì)性能這塊還在持續(xù)優(yōu)化.

按鈕交互組件筆者之前也寫(xiě)過(guò)文章專(zhuān)門(mén)詳細(xì)的介紹過(guò)如何實(shí)現(xiàn)按鈕交互, 自定義交互代碼以及富文本彈窗交互等, 感興趣的可以參考文章低代碼開(kāi)發(fā)平臺(tái)核心功能設(shè)計(jì)——組件自定義交互實(shí)現(xiàn).

筆者這里展示一下具體的交互方式:

打開(kāi)彈窗的交互用戶可以自定義彈窗中的內(nèi)容, 如下:

此時(shí)在手機(jī)端的預(yù)覽效果如下:

對(duì)于自定義code這塊, 筆者集成了代碼編輯庫(kù)codemirror, 這樣我們就可以自定義實(shí)現(xiàn)交互能力了, 如下效果:

接下來(lái)是我們的專(zhuān)欄組件, 這塊主要是基于業(yè)務(wù)需求做的業(yè)務(wù)組件, 實(shí)現(xiàn)方式和基礎(chǔ)組件一樣, 大家可以在線體驗(yàn)一下.

新增導(dǎo)入導(dǎo)出json文件功能

之所以會(huì)做這個(gè)功能主要是為了方便協(xié)作設(shè)計(jì)H5頁(yè)面的, 比如說(shuō)一個(gè)人設(shè)計(jì)了一個(gè)H5頁(yè)面想讓其他人一起參與設(shè)計(jì), 可以將當(dāng)前H5頁(yè)面導(dǎo)出為JSON, 另一個(gè)人通過(guò)導(dǎo)入這個(gè)JSON文件就可以立馬渲染成一模一樣的H5頁(yè)面, 進(jìn)而做修改或者完善. 如下:

關(guān)于如何實(shí)現(xiàn)下載json, 筆者在之前的文章中也介紹過(guò), 我們可以采用file-saver這個(gè)第三方模塊來(lái)做. 上傳解析json 我們完全可以自己實(shí)現(xiàn), 筆者采用的是 Upload + FileReader API實(shí)現(xiàn)的, 核心代碼如下:

const uploadprops = useMemo(() => ({ 
    name: 'file', 
    showUploadList: false, 
    beforeUpload(file, fileList) { 
      // 解析并提取json數(shù)據(jù) 
      let reader = new FileReader(); 
      reader.onload = function(e) { 
        let data = e.target.result; 
        importTpl && importTpl(JSON.parse(data)) 
      }; 
      reader.readAsText(file); 
    } 
  }), []);