言

HTML5是HTML最新的修訂版本，設計目的是為了在移動設備上支持多媒體, 以便為我們呈現更豐富的頁面表現. HTML5 還是跨平臺的，被設計為在不同類型的硬件（PC、平板、手機、電視機等等）之上運行。因此衍生出不同場景下的應用, 比如移動端官網, H5活動頁, H5營銷頁等. 隨著互聯網對的發(fā)展, 在大數據領域中的移動端BI模型, 也可以用H5來承載.

為了滿足以上需求, 已經有很多企業(yè)開始搭建H5編輯平臺, 比如說某秀, 某展, 筆者之前也開源了自己的H5編輯器H5-Dooring, 以方便企業(yè)快速搭建滿足業(yè)務場景的H5頁面.

我們都知道要想設計一款好用的H5編輯器, 一定要簡化用戶操作, 將用戶的使用成本降低到極致, 要想實現這一標準, 我們需要具備以下條件: 豐富的組件庫 豐富的圖片資源 靈活的組件配置 傻瓜式操作 * 開箱即用的H5頁面模版(模版庫)

以上5個條件是開發(fā)H5編輯器非常重要的參考指標, 前四個條件筆者在之前的文章中都有具體的實現方案, 筆者將具體介紹H5編輯器中的模版庫功能實現, 希望能給同樣需要此需求的IT工程師們有個參考.

章節(jié)概要

• H5編輯器中的模版庫設計基本思路
• 如何實現iframe子頁面和父頁面通信
• 基于dom元素自動生成封面圖解決方案

正文

作為一名前端工程師, 解決項目問題是我們的基本職責之一, 我們可以利用已掌握的知識去解決項目開發(fā)中的問題和需求, 這也是我們職業(yè)生涯必將經歷的第一個階段,即——適應期. 如果我們想繼續(xù)晉升, 我們就需要不斷地打怪升級,掌握各種技能, 這樣我們才能在未來遇到問題時采用最佳的方案高效地解決問題, 也就是第二個階段——發(fā)展期.

接下來筆者將一步步帶大家完成H5編輯器中的模版庫并實現自動生成封面圖方案, 大家需要掌握前端工程師需要具備的基本能力: javascript,html5以及模塊化的開發(fā)方式(es6的模塊化以及如何是使用第三方模塊).

H5編輯器的模版庫設計基本思路

我們都知道H5編輯器中的頁面呈現大多是基于json schema, 每一個在組件我們都可以細化為一個json元數據, 這樣做是為了我們能更細粒度地控制組件, 而模版, 即是由很多組件組合而成的區(qū)塊或者完整的頁面, 對應的就是json元數組.

所以對應的方案就是我們給用戶提供一個保存模版的按鈕, 當用戶點擊保存之后我們只需要拿到當前配置的json數據, 保存到對應的數據庫中即可. 數據結構大致如下:

[
    {
        "id": "12reg2",
        "name": "趣談前端落地頁",
        "tpl": [...組件配置數據項]
    },
     {
        "id": "12rdg5",
        "name": "H5-Dooring落地頁",
        "tpl": [...組件配置數據項]
    }
]

我們在數據庫中取出以上數據直接用react或者vue來渲染出來即可. 至于如何拿到json數據, 可參考H5-Dooring的具體實現流程.

但是光實現保存數據還遠遠不夠, 用戶在存儲了自己的模版之后, 如果后面想直接使用之前配置的模版, 那么如何快速找到呢?

我們雖然可以通過模版的name來識別不同的模版, 但是一旦模版越來越多, 用戶單純從模版名稱還是不能很方便地選出自己想要的模版, 所以這個時候我們往往期望 H5編輯器 能提供模版預覽圖的功能. 如下所示:

所以我們又遇到一個難題, 就是如何生成模版預覽圖.

如何生成模版預覽圖

生成模版預覽圖的常規(guī)思路就是基于我們的預覽頁面, 生成預覽頁面截圖, 然后存儲到對應模版數據中.步驟如下:

所以說用戶需要在H5編輯器的編輯頁面先配置H5模版, 然后跳到預覽頁面, 基于預覽頁面生成預覽截圖, 最后再跳回編輯頁面保存. 這一過程對于用戶來說不太友好, 因為涉及到不同頁面的相互跳轉, 我們可以進一步優(yōu)化, 在編輯頁面直接生成預覽圖片, 為了實現這一邏輯, 我們有兩種方案: 通過服務端請求預覽頁面, 在服務端生成頁面截圖然后和模版數據一起存儲入庫 通過canvas + iframe技術基于dom前端生成預覽圖片

由于前者實現過程比較復雜, 需要借助如puppeteer之類的庫, 而且還要保持圖片和模版數據的同步,所以筆者建議選擇第二種方案, 純前端實現. 筆者將在接下來的內容中一一介紹.

如何實現iframe子頁面和父頁面通信

在上文的介紹中我們選擇了使用canvas + iframe技術來實現頁面截圖, 我們先來看看實現效果:

由上圖可知 我們提供給用戶兩種設置封面的方法: 使用默認圖片, 自動生成封面.

用戶可以用Dooring提供的默認封面也可以直接使用生成的預覽封面.圖二中其實彈窗內是iframe, 筆者設計了一種機制使得iframe內容渲染完成之后自動截圖上傳給服務端, 然后iframe和父頁面通信將圖片url傳給編輯頁面, 之后和模版數據一起保存.

要想實現頁面父子通信, 我們就需要了解iframe如何和父頁面交互. 關于父子頁面通信的詳細介紹,可以參考我的文章: 記一次老項目中的跨頁面通信問題和前端實現文件下載功能

. 這里我們來看看iframe 如何和父頁面通信:

// iframe點用副頁面函數
parent.window.getFaceUrl(url);

// 父頁面定義的全局函數
window.getFaceUrl=(url)=> {
  setFaceUrl(url)
  setShowModalIframe(false)
}

以上我們就基本攻克了父子傳值以及整個流程設計方案, 由于具體細節(jié)非常多, 比如如何存儲數據, 如何整合數據到模版, 可以在筆者的H5-Dooring項目中學習了解.

基于dom元素自動生成封面圖解決方案

上面基本實現了整個模版庫的保存流程, 接下來我們實現保存預覽圖片的細節(jié).由于我們是基于頁面元素生成預覽圖, 所以需要前端能將dom轉化為圖片, 這里筆者調研了2個比較知名的庫: html2canvas dom-to-image

因為html2canvas現在還處于實驗階段, 而且筆者身邊盆友用歐之后確實有些不可描述的bug,筆者分析了dom-to-image, 基本能滿足目前的需求,所以我們直接用它來實現.

我們要得到上文中實現的流程, 即需要將dom轉化為圖片, 然后發(fā)送給服務器, 最后拿到服務器返回的圖片地址, 最后將圖片地址和模版數據一起保存. 我們直接先看代碼:

import domtoimage from 'dom-to-image';
// ...其他庫

// 將dom轉化為圖片邏輯
const generateImg=(cb)=> {
    domtoimage.toBlob(ref.current)
    .then(function (blob) {
        const formData=new FormData();
        formData.append('file', blob, 'tpl.jpg');
        req.post('/files/xxx/xxx', formData).then((res)=> {
          cb && cb(res.url)
        })
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });
  }

之后的步驟就非常簡單了, 拿到圖片url傳給父頁面用來展示和保存.

H5編輯器H5-Dooring更新說明

以上教程筆者已經集成到H5-Dooring中，對于一些更復雜的交互功能，通過合理的設計也是可以實現的，大家可以自行探索研究。

github地址：H5在線編輯器H5-Dooring

由于H5-Dooring還在不斷更新迭代, 筆者將具體介紹一下更新內容: 1. H5編輯器整體界面重構:

2. 添加圖片庫功能:

3. 可視化數據源編輯功能:

4. 模版庫實現:

5. 預覽界面優(yōu)化:

最后

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

務端

• 使用 axios 發(fā)送 HTTP 請求
• 返回 base64 編碼的字符串

import axios from 'axios'

const WECHAT_HOST='https://api.weixin.qq.com'
async function getwxacodeunlimit(accessToken: string, page: string, scene='', width=430): Promise<string> {
    const { data }: { data: Buffer }=await axios.post(
      `${WECHAT_HOST}/wxa/getwxacodeunlimit?access_token=${accessToken}`,
      {
        page,
        scene,
        width,
      },
      {
        responseType: 'arraybuffer',
      }
    )
    if (data.length < 100) {
      const { errcode, errmsg }=JSON.parse(data.toString())
      throw new WechatRequestError(JSON.stringify({ errcode, errmsg }))
    } else {
      return data.toString('base64')
    }
}

因為微信接口 /wxa/getwxacodeunlimit 成功時返回的是 Buffer ，失敗時返回 JSON 結構。所以這里我把返回數據統(tǒng)一當成 Buffer 來處理，當 data 的長度小于 100 時，就判斷為獲取失敗。

小程序端

javascript 的代碼：

// 請求服務端接口獲取回來數據，{qrcodeBase64}
this.setData({ qrcodeBase64 })

wxml 的代碼：

<image src="data:image/jpeg;base64,{{qrcodeBase64}}"/>

二維碼就這樣完美呈現啦。

結語

來回請求生成 qrcode 會耗費巨大時間，你們可以根據業(yè)務需求，把 qrcodeBase64 存起來或者轉換成圖片再存起來。

作者：walking_
鏈接：https://juejin.im/post/5e9e5647f265da47e7528076
來源：掘金
著作權歸作者所有。商業(yè)轉載請聯系作者獲得授權，非商業(yè)轉載請注明出處。