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

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

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

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

基于用戶體驗(yàn)和功能交互上的考慮，我們拋棄了「rich-text」和「web-view」這兩個原生組件，選擇了「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異常（例如把某個固定定位的元素給擋了）。

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

實(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ù)一個上下文節(jié)點(diǎn)（默認(rèn)為根節(jié)點(diǎn)）：

?如果截取出來的內(nèi)容是開始標(biāo)簽，則根據(jù)匹配出的標(biāo)簽名和屬性，在當(dāng)前上下文節(jié)點(diǎn)下創(chuàng)建一個子節(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)建一個文本節(jié)點(diǎn)，上下文節(jié)點(diǎn)不變。
過程正如下面的表格所示：



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

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



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

模板渲染

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

css,html5,html