在微信小程序中渲染HTML內容3種解決方案及分析與問題解決

 更新時間:2020-01-12 19:00:27   作者:佚名   我要評論(0)

大部分Web應用的富文本內容都是以HTML字符串的形式存儲的,通過HTML文檔去展示HTML內容自然沒有問題。但是,在微信小程序(下文簡稱為「小程序」)中,應當如何渲

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

在微信小程序中渲染HTML內容的3種解決方案

wxParse

小程序剛上線那會兒,是無法直接渲染HTML內容的,于是就誕生了一個叫做「wxParse」的庫。它的原理就是把HTML代碼解析成樹結構的數據,再通過小程序的模板把該數據渲染出來。

rich-text

后來,小程序增加了「rich-text」組件用于展示富文本內容。然而,這個組件存在一個極大的限制:組件內屏蔽了所有節點的事件。也就是說,在該組件內,連「預覽圖片」這樣一個簡單的功能都無法實現。

web-view

再后來,小程序允許通過「web-view」組件嵌套網頁,通過網頁展示HTML內容是兼容性最好的解決方案了。然而,因為要多加載一個頁面,性能是較差的。

當「WePY」遇上「wxParse」

基于用戶體驗和功能交互上的考慮,我們拋棄了「rich-text」和「web-view」這兩個原生組件,選擇了「wxParse」。然而,用著用著卻發現,「wxParse」也不能很好地滿足需要:

我們的小程序是基于「WePY」框架開發的,而「wxParse」是基于原生的小程序編寫的。要想讓兩者兼容,必須修改「wxParse」的源代碼。

「wxParse」只是簡單地通過image組件對原img元素的圖片進行顯示和預覽。而在實際使用中,可能會用到云存儲的接口對圖片進行縮小,達到「用小圖顯示,用原圖預覽」的目的。

「wxParse」直接使用小程序的video組件展示視頻,但是video組件的層級問題經常導致UI異常(例如把某個固定定位的元素給擋了)。

此外,圍觀一下「wxParse」的代碼倉庫可以發現,它已經兩年沒有迭代了。所以就萌生了基于「WePY」的組件模式重新寫一個富文本組件的想法,其成果就是「WePY HTML」項目。

實現過程

解析HTML

首先仍然是要把HTML字符串解析為樹結構的數據,我采用的是「特殊字符分隔法」。HTML中的特殊字符是「<」和「>」,前者為開始符,后者為結束符。

如果待解析內容以開始符開頭,則截取開始符到結束符之間的內容作為節點進行解析。

如果待解析內容不以開始符開頭,則截取開頭到開始符之前(如果開始符不存在,則為末尾)的內容作為純文本解析。

剩余內容進入下一輪解析,直到無剩余內容為止。

為了形成樹結構,解析過程中要維護一個上下文節點(默認為根節點):

如果截取出來的內容是開始標簽,則根據匹配出的標簽名和屬性,在當前上下文節點下創建一個子節點。如果該標簽不是自結束標簽(br、img等),就把上下文節點設為新節點。

如果截取出來的內容是結束標簽,則根據標簽名關閉當前上下文節點(把上下文節點設為其父節點)。

如果是純文本,則在當前上下文節點下創建一個文本節點,上下文節點不變。

上下文(解析前) 解析內容 上下文(解析后)
根節點 <div class="content"> div
div <p style="text-indent: 2em;"> p
p Hello world p
p </p> div
div </div> 根節點

經過上述流程,HTML字符串就被解析為節點樹了。

對比

  本組件算法 wxParse parse5
性能 3~6ms 20ms左右 20ms左右
容錯性 一般
文件大。ㄎ磯嚎s) 6kb 22kb 接近400kb

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

模板渲染

樹結構的渲染,必然會涉及到子節點的遞歸處理。然而,小程序的模板并不支持遞歸,這下仿佛掉入了一個大坑。

看了一下「wxParse」模板的實現,它采用簡單粗暴的方式解決這個問題:通過13個長得幾乎一模一樣的模板進行嵌套調用(1調用2,2調用3,……,12調用13),也就是說最多可以支持12次嵌套。一般來說,這個深度也足夠了。

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

<!-- 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 -->

以下是對應的構建代碼(需要安裝「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 = '';
          // 反正不要錢,直接寫個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;
        }
      }
    }
  }
}

然而,運行起來后發現,第二層及更深層級的節點都沒有渲染出來,說明嵌套失敗了。再看一下dist目錄下生成的wxml文件可以發現,變量名與組件源代碼的并不相同:

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

「WePY」在生成組件代碼時,為了避免組件數據與頁面數據的變量名沖突,會根據一定的規則給組件的變量名增加前綴(如上面代碼中的「$htmlContent$wepyHtml$」)。

所以在生成嵌套模板時,也必須使用帶前綴的變量名。 先在組件代碼中增加一個變量「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 -->

然后修改構建代碼:

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;
}

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

微信小程序中HTML包含圖片

為了節省流量和提高加載速度,展示富文本內容時,一般都會按照所需尺寸對里面的圖片進行縮小,點擊小圖進行預覽時才展示原圖。

這主要涉及節點屬性的修改: 把圖片原路徑(src屬性值)存到自定義屬性(例如「data-src」)中,并將其添加到預覽圖數組。

把圖片的src屬性值修改為縮小后的圖片URL(一般云服務商都有提供此類URL規則)。

點擊圖片時,使用自定義屬性的值進行預覽。 為了實現這個需求,本組件在解析節點時提供了一個鉤子(onNodeCreate):

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

對應的模板和事件處理邏輯如下:

<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>
// 點擊小圖看大圖
imgTap(e) {
  wepy.previewImage({
    current: e.currentTarget.dataset.src,
    urls: this.previewImgs
  });
}

微信小程序中HTML包含視頻

在小程序中,video組件的層級是較高的(且無法降低)。

如果頁面設計上存在著可能擋住視頻的元素,處理起來就需要一些技巧了: 隱藏video組件,用image組件(視頻封面)占位; 點擊圖片時,讓視頻全屏播放; 如果退出了全屏,則暫停播放。

相關代碼如下:

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

開源

最后貼一下「WePY HTML」的項目倉庫: https://github.com/beiliao-web-frontend/wepy-html ,具體使用方法見項目內的 README 。

如果你在使用過程中遇到了問題,或者是有好的建議和意見,都可以在 Issues 中提出。

隨著微信小程序的不斷完善相信用不了多長時間就會有一種更加完美的解決方案,那時我們就不會再改來改去了。更多關于微信小程序開發的文章請點擊下面的相關文章

您可能感興趣的文章:

  • 微信小程序中顯示html格式內容的方法
  • 微信小程序調用PHP后臺接口 解析純html文本
  • 在微信小程序中渲染HTML內容的方法示例
  • 如何去除富文本中的html標簽及vue、react、微信小程序中的過濾器
  • 微信小程序使用wxParse解析html的方法教程
  • 微信小程序使用wxParse解析html的實現示例
  • 淺談高大上的微信小程序中渲染html內容—技術分享
  • 微信小程序使用wxParse解析html的方法示例

相關文章

  • Python3.x+迅雷x 自動下載高分電影的實現方法

    Python3.x+迅雷x 自動下載高分電影的實現方法

    快要過年了,大家都在忙些什么呢?一到年底公司各種搶票,備年貨,被這過年的氣氛一烘,都歸心似箭,哪還有心思上班啊。歸心似箭=產出低下=一行代碼十個錯=無聊。于
    2020-01-12
  • 在微信小程序中渲染HTML內容3種解決方案及分析與問題解決

    在微信小程序中渲染HTML內容3種解決方案及分析與問題解決

    大部分Web應用的富文本內容都是以HTML字符串的形式存儲的,通過HTML文檔去展示HTML內容自然沒有問題。但是,在微信小程序(下文簡稱為「小程序」)中,應當如何渲
    2020-01-12
  • ES2020 新特性(種草)

    ES2020 新特性(種草)

    這幾年,Ecma TC39一年一次更新 ecmascript 規范標準,截止目前,以下特性已進入 finished 狀態,F在帶大家體驗種草 ES2020 新特性。 一:Promise.allSettled
    2020-01-12
  • Python 實現遞歸法解決迷宮問題的示例代碼

    Python 實現遞歸法解決迷宮問題的示例代碼

    迷宮問題 問題描述: 迷宮可用方陣 [m, n] 表示,0 表示可通過,1 表示不能通過。若要求左上角 (0, 0) 進入,設計算法尋求一條能從右下角 (m-1, n-1) 出去的路徑。
    2020-01-12
  • html2canvas屬性和使用方法以及如何使用html2canvas將HTML內容寫入Canvas生成圖片

    html2canvas屬性和使用方法以及如何使用html2canvas將HTML內容寫入Canvas生成圖片

    如何使用JS截取HTML頁面為圖片呢,下面為大家介紹一款JS截圖插件html2canvas.js html2canvas.js 能夠實現在用戶瀏覽器端直接對整個或部分頁面進行截屏。 html2can
    2020-01-12
  • golang并發編程的實現

    golang并發編程的實現

    go main函數的執行本身就是一個協程,當使用go關鍵字的時候,就會創建一個新的協程 channel channel 管道,用于在多個協程之間傳遞信號 無緩存管道 當對無
    2020-01-12
  • python opencv實現信用卡的數字識別

    python opencv實現信用卡的數字識別

    本項目利用python以及opencv實現信用卡的數字識別 前期準備 導入工具包 定義功能函數 模板圖像處理 讀取模板圖像 cv2.imread(img) 灰度化處理 cv2
    2020-01-12
  • 2019年度web前端面試題總結(主要為Vue面試題)

    2019年度web前端面試題總結(主要為Vue面試題)

    畢業之后就在一直合肥小公司工作,沒有老司機、沒有技術氛圍,在技術的道路上我只能獨自摸索。老板也只會畫餅充饑,前途一片迷?床坏饺魏蜗M。于是乎,我果斷辭
    2020-01-12
  • 深入理解redux之compose的具體應用

    深入理解redux之compose的具體應用

    應用 最近給自己的react項目添加redux的時候,用到了redux中的compose函數,使用compose來增強store,下面是我在項目中的一個應用: import {createStore,apply
    2020-01-12
  • Java使用DateTimeFormatter實現格式化時間

    Java使用DateTimeFormatter實現格式化時間

    用掃描器獲取輸入的時間(年月日時分),這個時間的格式是常用的格式,然后格式化這個時間,把格式化的時間輸出到控制臺,可以在控制臺重復輸入時間.格式化的時間參考企業
    2020-01-12

最新評論

北京pk10直播盛源