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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 !-- wepyhtml-repeat start --  template name= wepyhtml-0  block wx:if= {{ content }} wx:for= {{ content }}  block wx:if= {{ item.type === node }}  view >
以下是對應(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 =  // 反正不要錢，直接寫個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;}
然而，運行起來后發(fā)現(xiàn)，第二層及更深層級的節(jié)點都沒有渲染出來，說明嵌套失敗了。再看一下dist目錄下生成的wxml文件可以發(fā)現(xiàn)，變量名與組件源代碼的并不相同：
 block wx:if= {{ $htmlContent$wepyHtml$content }} wx:for= {{ $htmlContent$wepyHtml$content }} 
「WePY」在生成組件代碼時，為了避免組件數(shù)據(jù)與頁面數(shù)據(jù)的變量名沖突，會 根據(jù)一定的規(guī)則給組件的變量名增加前綴 （如上面代碼中的「$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 >
然后修改構(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)容時，一般都會按照所需尺寸對里面的圖片進行縮小，點擊小圖進行預(yù)覽時才展示原圖。這主要涉及節(jié)點屬性的修改：
?把圖片原路徑（src屬性值）存到自定義屬性（例如「src」）中，并將其添加到預(yù)覽圖數(shù)組。
?把圖片的src屬性值修改為縮小后的圖片URL（一般云服務(wù)商都有提供此類URL規(guī)則）。
?點擊圖片時，使用自定義屬性的值進行預(yù)覽。
為了實現(xiàn)這個需求，本組件在解析節(jié)點時提供了一個鉤子（ onNodeCreate ）：
onNodeCreate(name, attrs) { if (name === img ) { attrs[ src ] = attrs.src; // 預(yù)覽圖數(shù)組 this.previewImgs.push(attrs.src); // 縮圖 attrs.src = resizeImg(attrs.src, 640);}
對應(yīng)的模板和事件處理邏輯如下：
 template name= wepyhtml-img  image >
// 點擊小圖看大圖imgTap(e) { wepy.previewImage({ current: e.currentTarget.dataset.src, urls: this.previewImgs}
視頻
在小程序中，video組件的層級是較高的（且無法降低）。如果頁面設(shè)計上存在著可能擋住視頻的元素，處理起來就需要一些技巧了：
?隱藏video組件，用image組件（視頻封面）占位；
?點擊圖片時，讓視頻全屏播放；
?如果退出了全屏，則暫停播放。
相關(guān)代碼如下：
 template name= wepyhtml-video  view >
{ // 點擊封面圖，播放視頻 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(); // 視頻層級較高，為防止遮擋其他特殊定位元素，造成界面異常， // 強制全屏播放 videoPlay(e) { wepy.createVideoContext(e.currentTarget.id).requestFullScreen(); // 退出全屏則暫停 videoFullscreenChange(e) { if (!e.detail.fullScreen) { wepy.createVideoContext(e.currentTarget.id).pause();}
以上就是微信小程序中如何渲染html內(nèi)容（代碼示例）的詳細內(nèi)容，其它編程語言        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。