微信小游戏游戏显示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

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

activex 控件的id 定义位置+使用ocx控件的客户端程序中对控件定义的文件中控件id定义的位置...
activex 控件的id 定义位置 // SuperDisplayCtl.cpp IMPLEMENT_OLECREATE_EX(CSuperDisplayCtrl, "SuperDispl ...
DELPHI 开发的 OCX 控件在 MFC 程序中编辑框快捷键不好使的解决
公司一个大型的项目中使用了 DELPHI 来开发 OCX 控件做数据库的管理,但是GIS图形系统使用 MFC 开发,最后将 OCX 嵌入到 MFC 程序中作为一个完整的系统交付用户使用,但是在使用过程 ...
Winform开发框架之肖像显示保存控件的实现
我们在开发一些Winform程序的时候,除了常规的显示普通数据外,有的时候需要显示一些人员肖像或者一些车辆等物体的图片,一般这些内容较小,所以以二进制存储在数据库是一个不错的方案.但由于它们虽然很常用 ...
android自定义控件不显示,解决Android Studio Design界面不显示layout控件的问题
Android Studio更新到3.1.3后,发现拖到Design中的控件在预览界面中不显示: 解决办法: 在Styles.xml中的parent="..."中的Theme前添加 ...
WPF显示经常使用的几个显示文字控件TextBox， TextBlock， Lable
WPF显示经常使用的几个显示文字控件TextBox, TextBlock, Lable TextBox, TextBlock. Lable 当中TextBox 和Lable均继承了Control类能 ...
Vue+Openlayers显示TileWMS时不显示默认控件放大缩小旋转等组件
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: Vue中使用Openlayers加载Geoserver发布的TileWMS_霸道流氓气质的博客-CSDN博客在上面 ...
MFC隐藏和显示一个控件的方法
通常,我们在用MFC做界面的时候,控制控件的出现和隐藏很重要,同时这也体现出界面的友好和灵活性. 那么,怎样在MFC中实现一个控件的隐藏和显示呢?这里,我就说一个我知道的简单方法. 第一.先获得控件对 ...
Android Studio Design界面不显示layout控件的解决方法
Android Studio Design界面不显示layout控件的解决方法参考文章: (1)Android Studio Design界面不显示layout控件的解决方法 (2)https:// ...
打造Android微信朋友圈下拉刷新控件
打造Android微信朋友圈下拉刷新控件> 转载于:https://www.cnblogs.com/zhujiabin/p/5707789.html

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

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

最新文章

热门文章