如何搭積木式的快速開發(fā)H5頁面

這篇文章主要介紹“如何搭積木式的快速開發(fā)H5頁面”，在日常操作中，相信很多人在如何搭積木式的快速開發(fā)H5頁面問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何搭積木式的快速開發(fā)H5頁面”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

設計初衷

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

最新版編輯器效果預覽

 

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

技術棧

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

• umi3.0 + dva + antd4.0

• react + react生態(tài)

• nest + mysql + redis

• nginx + pm2

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

功能點和實現(xiàn)方案

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

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

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

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

日歷組件也是最近剛加的, 主要是為了實現(xiàn)更豐富的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;

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

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

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

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

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

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

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

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

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

新增導入導出json文件功能

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

關于如何實現(xiàn)下載json, 筆者在之前的文章中也介紹過, 我們可以采用file-saver這個第三方模塊來做. 上傳解析json 我們完全可以自己實現(xiàn),  筆者采用的是 Upload + FileReader API實現(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);     }   }), []);

新增一鍵截圖并生成高清海報圖功能

這塊主要是為H5頁面提供一個快速成圖方案, 方便運營或者技術人員做頁面效果評估用的, 在前端實現(xiàn)角度上我們主要采用canvas對dom進行轉(zhuǎn)化,  原理如下:

筆者之前也分享過具體的實現(xiàn)方案, 可以參考如下文章:

前端如何實現(xiàn)一鍵截圖功能?

這里筆者推薦兩個好用的canvas截圖工具, html2canvas和 dom-to-image. Dooring頁面的截圖過程如下:

新增右鍵菜單和自定義鍵盤快捷鍵功能

為了進一步提高用戶搭建H5頁面的效率, 筆者添加了右鍵菜單, 可以輕松的復制已制作好的組件, 也可以一鍵刪除, 如下:

但是對于鍵盤控們來說更希望通過鍵盤來實現(xiàn)所有功能, 所以個筆者添加了鍵盤快捷鍵, 支持一鍵復制,  粘貼,刪除元素, 如下:

這里推薦幾個還好用的右鍵菜單和鍵盤快捷鍵的庫, react-contexify,  keymaster.

新增頁面配置

這塊主要是讓H5頁面有更多的自由度, 可以自定義頁面標題, SEO關鍵字, 頁面背景和背景圖等, 如下:

后續(xù)會添加更多頁面自定義的能力.

界面設計優(yōu)化

和0.1版本比界面上做了很大的調(diào)整和優(yōu)化, 比如說我們的登錄頁面:

預覽頁面:

支持sdk引入

這塊也是筆者之前做的一個嘗試, 讓H5-Dooring能通過sdk的方式被植入到任何web系統(tǒng)中,并且提供了定制功能和展示的api, 主要如下:

實現(xiàn)原理筆者之前也在文章中介紹過了, 如下:

到此，關于“如何搭積木式的快速開發(fā)H5頁面”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>