在⼩程序中渲染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中的特殊字符是「<」和「>」，前者为开始符，后者为结束符。
如果待解析内容以开始符开头，则截取开始符到结束符之间的内容作为节点进⾏解析。
如果待解析内容不以开始符开头，则截取开头到开始符之前（如果开始符不存在，则为末尾）的内容作为纯⽂本解析。
剩余内容进⼊下⼀轮解析，直到⽆剩余内容为⽌。
为了形成树结构，解析过程中要维护⼀个上下⽂节点（默认为根节点）：
如果截取出来的内容是开始标签，则根据匹配出的标签名和属性，在当前上下⽂节点下创建⼀个⼦节点。如果该标签不是⾃结束标签（br、img等），就把上下⽂节点设为新节点。
如果截取出来的内容是结束标签，则根据标签名关闭当前上下⽂节点（把上下⽂节点设为其⽗节点）。
如果是纯⽂本，则在当前上下⽂节点下创建⼀个⽂本节点，上下⽂节点不变。
上下⽂（解析前）解析内容上下⽂（解析后）
根节点<div class="content">div
div<p >p
p Hello world p
p</p>div
div</div>根节点
经过上述流程，HTML字符串就被解析为节点树了。
对⽐
本组件算法wxParse parse5
性能3~6ms20ms左右20ms左右
容错性差⼀般强
⽂件⼤⼩（未压缩）6kb22kb接近400kb
可见，在不考虑容错性（产⽣错误的结果，⽽⾮抛出异常）的情况下，本组件的算法与其余两者相⽐有压倒性的优势，符合⼩程序「⼩⽽快」的需要。⽽⼀般情况下，富⽂本编辑器所⽣成的代码也不会出现语法错误。因此，即使容错性较差，问题也不⼤（但这是需要改进的）。
模板渲染
树结构的渲染，必然会涉及到⼦节点的递归处理。然⽽，⼩程序的模板并不⽀持递归，这下仿佛掉⼊了⼀个⼤坑。
看了⼀下「wxParse」模板的实现，它采⽤简单粗暴的⽅式解决这个问题：通过13个长得⼏乎⼀模⼀样的模板进⾏嵌套调⽤（1调⽤2，2调⽤3，……，12调⽤13），也就是说最多可以⽀持12次嵌套。⼀般来说，这个深度也⾜够了。
由于「WePY」框架本⾝是有构建机制的，所以不必⼿写⼗来个⼏乎⼀模⼀样的模板，通过⼀个构建的插件去⽣成即可。
<!-- wepyhtml-repeat start -->
<template name="wepyhtml-0">
<block wx:if="{{ content }}" wx:for="{{ content }}">
<block wx:if="{{ pe === 'node' }}">
<view class="wepyhtml-tag-{{ item.name }}">
<!-- next template -->
</view>
</block>
<block wx:else>{{ }}</block>
</block>
</template>
<!-- wepyhtml-repeat end -->
以下是对应的构建代码（需要安装「wepy-plugin-replace」）：
// fig.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 ?
'' :
`<template is="wepyhtml-${ i + 1 }" wx:if="{{ item.children }}" data="{{ content: item.children"></template>`;
});
}
return result;
}
}
}
}
}
然⽽，运⾏起来后发现，第⼆层及更深层级的节点都没有渲染出来，说明嵌套失败了。再看⼀下dist⽬录下⽣成的wxml⽂件可以发现，变量名与组件源代码的并不相同：
<block wx:if="{{ $htmlContent$wepyHtml$content }}" wx:for="{{ $htmlContent$wepyHtml$content }}">
「WePY」在⽣成组件代码时，为了避免组件数据与页⾯数据的变量名冲突，会根据⼀定的规则给组件的变量名增加前缀（如上⾯代码中的「$htmlContent$wepyHtml$」）。
所以在⽣成嵌套模板时，也必须使⽤带前缀的变量名。先在组件代码中增加⼀个变量「thisIsMe」⽤于识别前缀：
<!-- wepyhtml-repeat start -->
<template name="wepyhtml-0">
{{ thisIsMe }}
<block wx:if="{{ content }}" wx:for="{{ content }}">
<block wx:if="{{ pe === 'node' }}">
<view class="wepyhtml-tag-{{ item.name }}">
<!-- next template -->
</view>
</block>
<block wx:else>{{ }}</block>
</block>
</template>
<!-- wepyhtml-repeat end -->
然后修改构建代码：
replace(match, tpl) {
let result = '';
let prefix = '';
// 匹配 thisIsMe 的前缀
tpl = place(/\{\{\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 ?
'' :
`<template is="wepyhtml-${ i + 1 }" wx:if="{{ item.children }}" data="{{ ${ prefix }content: item.children }}"></template>`;
});
}
return result;
}
⾄此，渲染问题就解决了。
⼩程序中HTML包含图⽚
为了节省流量和提⾼加载速度，展⽰富⽂本内容时，⼀般都会按照所需尺⼨对⾥⾯的图⽚进⾏缩⼩，点击⼩图进⾏预览时才展⽰原图。
这主要涉及节点属性的修改：把图⽚原路径（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);
}
}
对应的模板和事件处理逻辑如下：
<template name="wepyhtml-img">
<image class="wepyhtml-tag-img" mode="widthFix" src="{{ elem.attrs.src }}" data-src="{{ elem.attrs['data-src'] || elem.attrs.src }}" @tap="imgTap"></image>
</template>
// 点击⼩图看⼤图
imgTap(e) {
wepy.previewImage({
current: e.currentTarget.dataset.src,
urls: this.previewImgs
});
}
⼩程序中HTML包含视频
在⼩程序中，video组件的层级是较⾼的（且⽆法降低）。
如果页⾯设计上存在着可能挡住视频的元素，处理起来就需要⼀些技巧了：隐藏video组件，⽤image组件（视频封⾯）占位；点击图⽚
时，让视频全屏播放；如果退出了全屏，则暂停播放。
相关代码如下：
<template name="wepyhtml-video">
<view class="wepyhtml-tag-video" @tap="videoTap" data-nodeid="{{ deId }}">
<!-- 视频封⾯ -->
<image class="wepyhtml-tag-img wepyhtml-tag-video__poster" mode="widthFix" src="{{ elem.attrs.poster }}"></image>
<!-- 播放图标 -->
<image class="wepyhtml-tag-img wepyhtml-tag-video__play" src="./imgs/icon-play.png"></image>
<!-- 视频组件 -->
<video src="{{ elem.attrs.src }}" id="wepyhtml-video-{{ deId }}" @fullscreenchange="videoFullscreenChange" @play="videoPlay"></video>  </view>
</template>
{
// 点击封⾯图，播放视频
videoTap(e) {
const nodeId = e.deid;
const context = ateVideoContext('wepyhtml-video-' + nodeId);
context.play();
// 在安卓下，如果视频不可见，则调⽤play()也⽆法播放
// 需要再调⽤全屏⽅法
if (SystemInfoSync().platform === 'android') {
}
},
// 视频层级较⾼，为防⽌遮挡其他特殊定位元素，造成界⾯异常，
// 强制全屏播放
videoPlay(e) {
},
// 退出全屏则暂停
videoFullscreenChange(e) {
if (!e.detail.fullScreen) {
写文章的小程序}
}
}
开源
如果你在使⽤过程中遇到了问题，或者是有好的建议和意见，都可以在 Issues 中提出。
随着⼩程序的不断完善相信⽤不了多长时间就会有⼀种更加完美的解决⽅案，那时我们就不会再改来改去了。更多关于⼩程序开发的⽂章请点击下⾯的相关⽂章

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。