如何搭積木式的快速開發H5頁面?

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

筆者接下來將介紹最新版H5編輯器的功能和實現思路, 以及如何實現所見即所得的方案嘗試.

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

設計初衷

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

最新版編輯器效果預覽

表單數據看板和數據分析:

技術棧

之前在筆者的文章中也介紹過H5-Dooring使用的技術棧和基礎架構實現了, 感興趣的可以參考基于React+Koa實現一個h5頁面可視化編輯器最近我們在用nest重構項目的后端部分, 后期會做一定的技術方案介紹. 這里簡單介紹一下項目實現的技術棧:

umi3.0 + dva + antd4.0
react + react生態
nest + mysql + redis
nginx + pm2

所以這個項目屬于一個全棧項目, 很多核心功能的實現取決的約定好的DSL層, 頁面渲染層和后端能力.

功能點和實現方案

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

新增富文本組件, 日歷組件, 按鈕交互組件, 專欄組件

富文本組件筆者采用的是國產的braft, 預覽如下:

因為項目用antd4.0開發的, 所以筆者專門封裝了一套適配antd4.0組件的富文本編輯器, 支持Form組件的受控模式. 感興趣的可以在github上學習具體的實現方式.

日歷組件也是最近剛加的, 主要是為了實現更豐富的H5頁面展示, 如下:

我們可以設置選擇的時間范圍, 被選擇范圍的主色, 日期等. 日期組件筆者主要采用的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;

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

之前還有個朋友問過我為什么項目使用了這么多組件在預覽H5頁面的時候速度還是很快, 這里我說明一下具體的實現方式, 如下圖:

所以說我們移動端的產物和依賴的資源非常少, 并且在webpack層和服務器層做了優化, 所以移動端訪問H5頁面會非常快, 這塊優化筆者后期會詳細介紹, 目前對性能這塊還在持續優化.

按鈕交互組件筆者之前也寫過文章專門詳細的介紹過如何實現按鈕交互, 自定義交互代碼以及富文本彈窗交互等, 感興趣的可以參考文章低代碼開發平臺核心功能設計——組件自定義交互實現.

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

打開彈窗的交互用戶可以自定義彈窗中的內容, 如下:

此時在手機端的預覽效果如下:

對于自定義code這塊, 筆者集成了代碼編輯庫codemirror, 這樣我們就可以自定義實現交互能力了, 如下效果:

接下來是我們的專欄組件, 這塊主要是基于業務需求做的業務組件, 實現方式和基礎組件一樣, 大家可以在線體驗一下.

新增導入導出json文件功能

之所以會做這個功能主要是為了方便協作設計H5頁面的, 比如說一個人設計了一個H5頁面想讓其他人一起參與設計, 可以將當前H5頁面導出為JSON, 另一個人通過導入這個JSON文件就可以立馬渲染成一模一樣的H5頁面, 進而做修改或者完善. 如下:

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

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