微信小游戏游戏显示html控件,微信小程序中如何渲染html内容（代码示例）

我们的小程序是基于「WePY」框架开发的，而「wxParse」是基于原生的小程序编写的。要想让两者兼容，必须修改「wxParse」的源代码。

「wxParse」只是简单地通过image组件对原img元素的图片进行显示和预览。而在实际使用中，可能会用到云存储的接口对图片进行缩小，达到「 用小图显示，用原图预览 」的目的。

「wxParse」直接使用小程序的video组件展示视频，但是video组件的 层级问题 经常导致UI异常(例如把某个固定定位的元素给挡了)。

此外，围观一下「wxParse」的代码仓库可以发现，它已经两年没有迭代了。所以就萌生了基于「WePY」的组件模式重新写一个富文本组件的想法，其成果就是「WePY HTML」项目。实现过程解析HTML

首先仍然是要把HTML字符串解析为树结构的数据，我采用的是「特殊字符分隔法」。HTML中的特殊字符是「」，前者为开始符，后者为结束符。

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

•如果待解析内容不以开始符开头，则截取 开头到开始符之前 (如果开始符不存在，则为末尾)的内容作为纯文本解析。

•剩余内容进入下一轮解析，直到无剩余内容为止。

正如下图所示：

为了形成树结构，解析过程中要维护一个上下文节点(默认为根节点)：

•如果截取出来的内容是开始标签，则根据匹配出的标签名和属性，在当前上下文节点下创建一个子节点。如果该标签不是自结束标签(br、img等)，就把上下文节点设为新节点。

•如果截取出来的内容是结束标签，则根据标签名关闭当前上下文节点(把上下文节点设为其父节点)。

•如果是纯文本，则在当前上下文节点下创建一个文本节点，上下文节点不变。

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

经过上述流程，HTML字符串就被解析为节点树了。

对比

把上述算法与其他类似的解析算法进行对比(性能以「解析10000长度的HTML代码」进行测定)：

可见，在不考虑容错性(产生错误的结果，而非抛出异常)的情况下，本组件的算法与其余两者相比有压倒性的优势，符合小程序「 小而快 」的需要。而一般情况下，富文本编辑器所生成的代码也不会出现语法错误。因此，即使容错性较差，问题也不大(但这是需要改进的)。模板渲染

树结构的渲染，必然会涉及到子节点的 递归 处理。然而，小程序的模板并不支持递归，这下仿佛掉入了一个大坑。

css,html5,html