微信小程序中嵌套html_在微信小程序中渲染HTML内容3种解决方案及分析与问题解决...

大部分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中的特殊字符是「」，前者为开始符，后者为结束符。

如果待解析内容以开始符开头，则截取开始符到结束符之间的内容作为节点进行解析。

如果待解析内容不以开始符开头，则