<!-- wepyhtml-repeat start --> <template> <block wx:if="{{ content }}" wx:for="{{ content }}"> <block wx:if="{{ item.type === 'node' }}"> <view> <!-- next template --> </view> </block> <block wx:else>{{ item.text }}</block> </block> </template> <!-- wepyhtml-repeat end -->
以下是对应的构建代码（需要安装「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 ? '' : `<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> {{ thisIsMe }} <block wx:if="{{ content }}" wx:for="{{ content }}"> <block wx:if="{{ item.type === 'node' }}"> <view> <!-- next template --> </view> </block> <block wx:else>{{ item.text }}</block> </block> </template> <!-- wepyhtml-repeat end -->
然后修改构建代码：
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 ? '' : `<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> <image 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> <view @tap="videoTap" data-nodeid="{{ elem.nodeId }}"> <!-- 视频封面 --> <image mode="widthFix" src="{{ elem.attrs.poster }}"></image> <!-- 播放图标 --> <image src="https://www.jb51.net/article/imgs/icon-play.png"></image> <!-- 视频组件 --> <video src="{{ elem.attrs.src }}" @fullscreenchange="videoFullscreenChange" @play="videoPlay"></video> </view> </template>