淺談高大上的微信小程序中渲染html內(nèi)容—技術(shù)分享

更新時(shí)間：2018年10月25日 11:02:34 作者：程序員阿宇

大部分Web應(yīng)用的富文本內(nèi)容都是以HTML字符串的形式存儲的，那么在微信小程序中，應(yīng)當(dāng)如何渲染這部分內(nèi)容呢？感興趣的小伙伴們可以參考一下

大部分Web應(yīng)用的富文本內(nèi)容都是以HTML字符串的形式存儲的，通過HTML文檔去展示HTML內(nèi)容自然沒有問題。但是，在微信小程序（下文簡稱為「小程序」）中，應(yīng)當(dāng)如何渲染這部分內(nèi)容呢？

解決方案

wxParse

小程序剛上線那會兒，是無法直接渲染HTML內(nèi)容的，于是就誕生了一個(gè)叫做「 wxParse 」的庫。它的原理就是把HTML代碼解析成樹結(jié)構(gòu)的數(shù)據(jù)，再通過小程序的模板把該數(shù)據(jù)渲染出來。

rich-text

后來，小程序增加了「rich-text」組件用于展示富文本內(nèi)容。然而，這個(gè)組件存在一個(gè)極大的限制：組件內(nèi)屏蔽了所有節(jié)點(diǎn)的事件。也就是說，在該組件內(nèi)，連「預(yù)覽圖片」這樣一個(gè)簡單的功能都無法實(shí)現(xiàn)。

web-view

再后來，小程序允許通過「web-view」組件嵌套網(wǎng)頁，通過網(wǎng)頁展示HTML內(nèi)容是兼容性最好的解決方案了。然而，因?yàn)橐嗉虞d一個(gè)頁面，性能是較差的。

當(dāng)「WePY」遇上「wxParse」

基于用戶體驗(yàn)和功能交互上的考慮，我們拋棄了「rich-text」和「web-view」這兩個(gè)原生組件，選擇了「wxParse」。然而，用著用著卻發(fā)現(xiàn)，「wxParse」也不能很好地滿足需要：

我們的小程序是基于「WePY」框架開發(fā)的，而「wxParse」是基于原生的小程序編寫的。要想讓兩者兼容，必須修改「wxParse」的源代碼。
「wxParse」只是簡單地通過image組件對原img元素的圖片進(jìn)行顯示和預(yù)覽。而在實(shí)際使用中，可能會用到云存儲的接口對圖片進(jìn)行縮小，達(dá)到「用小圖顯示，用原圖預(yù)覽」的目的。
「wxParse」直接使用小程序的video組件展示視頻，但是video組件的層級問題經(jīng)常導(dǎo)致UI異常（例如把某個(gè)固定定位的元素給擋了）。

此外，圍觀一下「wxParse」的代碼倉庫可以發(fā)現(xiàn)，它已經(jīng)兩年沒有迭代了。所以就萌生了基于「WePY」的組件模式重新寫一個(gè)富文本組件的想法，其成果就是「WePY HTML」項(xiàng)目。

實(shí)現(xiàn)過程

解析HTML

首先仍然是要把HTML字符串解析為樹結(jié)構(gòu)的數(shù)據(jù)，我采用的是「特殊字符分隔法」。HTML中的特殊字符是「<」和「>」，前者為開始符，后者為結(jié)束符。

如果待解析內(nèi)容以開始符開頭，則截取開始符到結(jié)束符之間的內(nèi)容作為節(jié)點(diǎn)進(jìn)行解析。
如果待解析內(nèi)容不以開始符開頭，則截取開頭到開始符之前（如果開始符不存在，則為末尾）的內(nèi)容作為純文本解析。
剩余內(nèi)容進(jìn)入下一輪解析，直到無剩余內(nèi)容為止。

正如下圖所示：

為了形成樹結(jié)構(gòu)，解析過程中要維護(hù)一個(gè)上下文節(jié)點(diǎn)（默認(rèn)為根節(jié)點(diǎn)）：

如果截取出來的內(nèi)容是開始標(biāo)簽，則根據(jù)匹配出的標(biāo)簽名和屬性，在當(dāng)前上下文節(jié)點(diǎn)下創(chuàng)建一個(gè)子節(jié)點(diǎn)。如果該標(biāo)簽不是自結(jié)束標(biāo)簽（br、img等），就把上下文節(jié)點(diǎn)設(shè)為新節(jié)點(diǎn)。
如果截取出來的內(nèi)容是結(jié)束標(biāo)簽，則根據(jù)標(biāo)簽名關(guān)閉當(dāng)前上下文節(jié)點(diǎn)（把上下文節(jié)點(diǎn)設(shè)為其父節(jié)點(diǎn)）。
如果是純文本，則在當(dāng)前上下文節(jié)點(diǎn)下創(chuàng)建一個(gè)文本節(jié)點(diǎn)，上下文節(jié)點(diǎn)不變。

過程正如下面的表格所示：

經(jīng)過上述流程，HTML字符串就被解析為節(jié)點(diǎn)樹了。

對比

把上述算法與其他類似的解析算法進(jìn)行對比（性能以「解析10000長度的HTML代碼」進(jìn)行測定）：

可見，在不考慮容錯(cuò)性（產(chǎn)生錯(cuò)誤的結(jié)果，而非拋出異常）的情況下，本組件的算法與其余兩者相比有壓倒性的優(yōu)勢，符合小程序「小而快」的需要。而一般情況下，富文本編輯器所生成的代碼也不會出現(xiàn)語法錯(cuò)誤。因此，即使容錯(cuò)性較差，問題也不大（但這是需要改進(jìn)的）。

模板渲染

樹結(jié)構(gòu)的渲染，必然會涉及到子節(jié)點(diǎn)的遞歸處理。然而，小程序的模板并不支持遞歸，這下仿佛掉入了一個(gè)大坑。

看了一下「wxParse」模板的實(shí)現(xiàn)，它采用簡單粗暴的方式解決這個(gè)問題：通過13個(gè)長得幾乎一模一樣的模板進(jìn)行嵌套調(diào)用（1調(diào)用2，2調(diào)用3，……，12調(diào)用13），也就是說最多可以支持12次嵌套。一般來說，這個(gè)深度也足夠了。

由于「WePY」框架本身是有構(gòu)建機(jī)制的，所以不必手寫十來個(gè)幾乎一模一樣的模板，通過一個(gè)構(gòu)建的插件去生成即可。

以下為需要重復(fù)嵌套的模板（精簡過），在其代碼的開始前和結(jié)束后分別插入特殊注釋進(jìn)行標(biāo)識，并在需要嵌入下一層模板的地方以另一段特殊注釋（「」）標(biāo)識：

<!-- wepyhtml-repeat start -->
<template name="wepyhtml-0">
  <block wx:if="{{ content }}" wx:for="{{ content }}">
    <block wx:if="{{ item.type === 'node' }}">
      <view class="wepyhtml-tag-{{ item.name }}">
        <!-- next template -->
      </view>
    </block>
    <block wx:else>{{ item.text }}</block>
  </block>
</template>
<!-- wepyhtml-repeat end -->

以下是對應(yīng)的構(gòu)建代碼（需要安裝「 wepy-plugin-replace 」）：

// wepy.config.js
{
  plugins: {
    replace: {
      filter: /\.wxml$/,
      config: {
        find: /<\!-- wepyhtml-repeat start -->([\W\w]+?)<\!-- wepyhtml-repeat end -->/,
        replace(match, tpl) {
          let result = '';
          // 反正不要錢，直接寫個(gè)20層嵌套
          for (let i = 0; i <= 20; i++) {
            result += '\n' + tpl
              .replace('wepyhtml-0', 'wepyhtml-' + i)
              .replace(/<\!-- next template -->/g, () => {
                return i === 20 ?
                  '' :
                  `<template is="wepyhtml-${ i + 1 }" wx:if="{{ item.children }}" data="{{ content: item.children"></template>`;
              });
          }
          return result;
        }
      }
    }
  }
}

然而，運(yùn)行起來后發(fā)現(xiàn)，第二層及更深層級的節(jié)點(diǎn)都沒有渲染出來，說明嵌套失敗了。再看一下dist目錄下生成的wxml文件可以發(fā)現(xiàn)，變量名與組件源代碼的并不相同：

<block wx:if="{{ $htmlContent$wepyHtml$content }}" wx:for="{{ $htmlContent$wepyHtml$content }}">

「WePY」在生成組件代碼時(shí)，為了避免組件數(shù)據(jù)與頁面數(shù)據(jù)的變量名沖突，會根據(jù)一定的規(guī)則給組件的變量名增加前綴（如上面代碼中的「$htmlContent$wepyHtml$」）。所以在生成嵌套模板時(shí)，也必須使用帶前綴的變量名。

先在組件代碼中增加一個(gè)變量「thisIsMe」用于識別前綴：

<!-- wepyhtml-repeat start -->
<template name="wepyhtml-0">
  {{ thisIsMe }}
  <block wx:if="{{ content }}" wx:for="{{ content }}">
    <block wx:if="{{ item.type === 'node' }}">
      <view class="wepyhtml-tag-{{ item.name }}">
        <!-- next template -->
      </view>
    </block>
    <block wx:else>{{ item.text }}</block>
  </block>
</template>
<!-- wepyhtml-repeat end -->

然后修改構(gòu)建代碼：

replace(match, tpl) {
  let result = '';
  let prefix = '';

  // 匹配 thisIsMe 的前綴
  tpl = tpl.replace(/\{\{\s*(\$.*?\$)thisIsMe\s*\}\}/, (match, p) => {
    prefix = p;
    return '';
  });

  for (let i = 0; i <= 20; i++) {
    result += '\n' + tpl
      .replace('wepyhtml-0', 'wepyhtml-' + i)
      .replace(/<\!-- next template -->/g, () => {
        return i === 20 ?
          '' :
          `<template is="wepyhtml-${ i + 1 }" wx:if="{{ item.children }}" data="{{ ${ prefix }content: item.children }}"></template>`;
      });
  }

  return result;
}

至此，渲染問題就解決了。

圖片

為了節(jié)省流量和提高加載速度，展示富文本內(nèi)容時(shí)，一般都會按照所需尺寸對里面的圖片進(jìn)行縮小，點(diǎn)擊小圖進(jìn)行預(yù)覽時(shí)才展示原圖。這主要涉及節(jié)點(diǎn)屬性的修改：

把圖片原路徑（src屬性值）存到自定義屬性（例如「data-src」）中，并將其添加到預(yù)覽圖數(shù)組。
把圖片的src屬性值修改為縮小后的圖片URL（一般云服務(wù)商都有提供此類URL規(guī)則）。
點(diǎn)擊圖片時(shí)，使用自定義屬性的值進(jìn)行預(yù)覽。

為了實(shí)現(xiàn)這個(gè)需求，本組件在解析節(jié)點(diǎn)時(shí)提供了一個(gè)鉤子（ onNodeCreate ）：

onNodeCreate(name, attrs) {
  if (name === 'img') {
    attrs['data-src'] = attrs.src;
    // 預(yù)覽圖數(shù)組
    this.previewImgs.push(attrs.src);
    // 縮圖
    attrs.src = resizeImg(attrs.src, 640);
  }
}

對應(yīng)的模板和事件處理邏輯如下：

<template name="wepyhtml-img">
  <image class="wepyhtml-tag-img" mode="widthFix" src="{{ elem.attrs.src }}" data-src="{{ elem.attrs['data-src'] || elem.attrs.src }}" @tap="imgTap"></image>
</template>

// 點(diǎn)擊小圖看大圖
imgTap(e) {
  wepy.previewImage({
    current: e.currentTarget.dataset.src,
    urls: this.previewImgs
  });
}

視頻

在小程序中，video組件的層級是較高的（且無法降低）。如果頁面設(shè)計(jì)上存在著可能擋住視頻的元素，處理起來就需要一些技巧了：

隱藏video組件，用image組件（視頻封面）占位；
點(diǎn)擊圖片時(shí)，讓視頻全屏播放；
如果退出了全屏，則暫停播放。

相關(guān)代碼如下：

<template name="wepyhtml-video">
  <view class="wepyhtml-tag-video" @tap="videoTap" data-nodeid="{{ elem.nodeId }}">
    <!-- 視頻封面 -->
    <image class="wepyhtml-tag-img wepyhtml-tag-video__poster" mode="widthFix" src="{{ elem.attrs.poster }}"></image>
    <!-- 播放圖標(biāo) -->
    <image class="wepyhtml-tag-img wepyhtml-tag-video__play" src="./imgs/icon-play.png"></image>
    <!-- 視頻組件 -->
    <video style="display: none;" src="{{ elem.attrs.src }}" id="wepyhtml-video-{{ elem.nodeId }}" @fullscreenchange="videoFullscreenChange" @play="videoPlay"></video>
  </view>
</template>

{
  // 點(diǎn)擊封面圖，播放視頻
  videoTap(e) {
    const nodeId = e.currentTarget.dataset.nodeid;
    const context = wepy.createVideoContext('wepyhtml-video-' + nodeId);
    context.play();
    // 在安卓微信下，如果視頻不可見，則調(diào)用play()也無法播放
    // 需要再調(diào)用全屏方法
    if (wepy.getSystemInfoSync().platform === 'android') {
      context.requestFullScreen();
    }
  },
  // 視頻層級較高，為防止遮擋其他特殊定位元素，造成界面異常，
  // 強(qiáng)制全屏播放
  videoPlay(e) {
    wepy.createVideoContext(e.currentTarget.id).requestFullScreen();
  },
  // 退出全屏則暫停
  videoFullscreenChange(e) {
    if (!e.detail.fullScreen) {
      wepy.createVideoContext(e.currentTarget.id).pause();
    }
  }
}

本文分享就到這里了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: