如何在微信小程序中渲染HTML内容-创新互联
如何在微信小程序中渲染HTML内容?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
成都创新互联从2013年成立,先为马山等服务建站,马山等地企业,进行企业商务咨询服务。为马山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。实现过程
解析HTML
首先仍然是要把HTML字符串解析为树结构的数据,我采用的是「特殊字符分隔法」。HTML中的特殊字符是「<」和「>」,前者为开始符,后者为结束符。
如果待解析内容以开始符开头,则截取 开始符到结束符之间 的内容作为节点进行解析。
如果待解析内容不以开始符开头,则截取 开头到开始符之前 (如果开始符不存在,则为末尾)的内容作为纯文本解析。
剩余内容进入下一轮解析,直到无剩余内容为止。
正如下图所示:
为了形成树结构,解析过程中要维护一个上下文节点(默认为根节点):
如果截取出来的内容是开始标签,则根据匹配出的标签名和属性,在当前上下文节点下创建一个子节点。如果该标签不是自结束标签(br、img等),就把上下文节点设为新节点。
如果截取出来的内容是结束标签,则根据标签名关闭当前上下文节点(把上下文节点设为其父节点)。
如果是纯文本,则在当前上下文节点下创建一个文本节点,上下文节点不变。
过程正如下面的表格所示:
经过上述流程,HTML字符串就被解析为节点树了。
对比
把上述算法与其他类似的解析算法进行对比(性能以「解析10000长度的HTML代码」进行测定):
可见,在不考虑容错性(产生错误的结果,而非抛出异常)的情况下,本组件的算法与其余两者相比有压倒性的优势,符合小程序「 小而快 」的需要。而一般情况下,富文本编辑器所生成的代码也不会出现语法错误。因此,即使容错性较差,问题也不大(但这是需要改进的)。
模板渲染
树结构的渲染,必然会涉及到子节点的 递归 处理。然而,小程序的模板并不支持递归,这下仿佛掉入了一个大坑。
看了一下「wxParse」模板的实现,它采用简单粗暴的方式解决这个问题:通过13个长得几乎一模一样的模板进行嵌套调用(1调用2,2调用3,……,12调用13),也就是说最多可以支持12次嵌套。一般来说,这个深度也足够了。
由于「WePY」框架本身是有构建机制的,所以不必手写十来个几乎一模一样的模板,通过一个构建的插件去生成即可。
以下为需要重复嵌套的模板(精简过),在其代码的开始前和结束后分别插入特殊注释进行标识,并在需要嵌入下一层模板的地方以另一段特殊注释(「」)标识:
{{ item.text }}
以下是对应的构建代码(需要安装「 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 ? '' : ``; }); } return result; } } } } }
然而,运行起来后发现,第二层及更深层级的节点都没有渲染出来,说明嵌套失败了。再看一下dist目录下生成的wxml文件可以发现,变量名与组件源代码的并不相同:
「WePY」在生成组件代码时,为了避免组件数据与页面数据的变量名冲突,会 根据一定的规则给组件的变量名增加前缀 (如上面代码中的「
wepyHtml$」)。所以在生成嵌套模板时,也必须使用带前缀的变量名。
先在组件代码中增加一个变量「thisIsMe」用于识别前缀:
{{ thisIsMe }}{{ item.text }}
然后修改构建代码:
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 ? '' : ``; }); } return result; }
至此,渲染问题就解决了。
图片
为了节省流量和提高加载速度,展示富文本内容时,一般都会按照所需尺寸对里面的图片进行缩小,点击小图进行预览时才展示原图。这主要涉及节点属性的修改:
把图片原路径(src属性值)存到自定义属性(例如「data-src」)中,并将其添加到预览图数组。
把图片的src属性值修改为缩小后的图片URL(一般云服务商都有提供此类URL规则)。
点击图片时,使用自定义属性的值进行预览。
为了实现这个需求,本组件在解析节点时提供了一个钩子( onNodeCreate ):
onNodeCreate(name, attrs) { if (name === 'img') { attrs['data-src'] = attrs.src; // 预览图数组 this.previewImgs.push(attrs.src); // 缩图 attrs.src = resizeImg(attrs.src, 640); } }
对应的模板和事件处理逻辑如下:
//点击小图看大图 imgTap(e) { wepy.previewImage({ current: e.currentTarget.dataset.src, urls: this.previewImgs }); }
视频
在小程序中,video组件的层级是较高的(且无法降低)。如果页面设计上存在着可能挡住视频的元素,处理起来就需要一些技巧了:
隐藏video组件,用image组件(视频封面)占位;
点击图片时,让视频全屏播放;
如果退出了全屏,则暂停播放。
相关代码如下:
{ // 点击封面图,播放视频 videoTap(e) { const nodeId = e.currentTarget.dataset.nodeid; const context = wepy.createVideoContext('wepyhtml-video-' + nodeId); context.play(); // 在安卓微信下,如果视频不可见,则调用play()也无法播放 // 需要再调用全屏方法 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内容-创新互联
本文网址:http://myzitong.com/article/hijdi.html