在微信小程序中渲染HTML内容3种解决方案及分析与问题解决

<!-- wepyhtml-repeat start -->
<template name="wepyhtml-0">
  <block wx:if="{{ content }}" wx:for="{{ content }}">
    <block wx:if="{{ item.type === 'node' }}">
      <view class="wepyhtml-tag-{{ item.name }}">
        <!-- next template -->
      </view>
    </block>
    <block wx:else>{{ item.text }}</block>
  </block>
</template>
<!-- wepyhtml-repeat end -->

// wepy.config.js
{
  plugins: {
    replace: {
      filter: /\.wxml$/,
      config: {
        find: /<\!-- wepyhtml-repeat start -->([\W\w]+"wepyhtml-${ i + 1 }" wx:if="{{ item.children }}" data="{{ content: item.children"></template>`;
              });
          }
          return result;
        }
      }
    }
  }
}

<block wx:if="{{ $htmlContent$wepyHtml$content }}" wx:for="{{ $htmlContent$wepyHtml$content }}">

<!-- wepyhtml-repeat start -->
<template name="wepyhtml-0">
  {{ thisIsMe }}
  <block wx:if="{{ content }}" wx:for="{{ content }}">
    <block wx:if="{{ item.type === 'node' }}">
      <view class="wepyhtml-tag-{{ item.name }}">
        <!-- 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*(\$.*"wepyhtml-${ i + 1 }" wx:if="{{ item.children }}" data="{{ ${ prefix }content: item.children }}"></template>`;
      });
  }

  return result;
}

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="/UploadFiles/2021-04-02/{{ elem.attrs.src }}">



// 点击小图看大图
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="{{ elem.nodeId }}">
    <!-- 视频封面 -->
    <image class="wepyhtml-tag-img wepyhtml-tag-video__poster" mode="widthFix" src="/UploadFiles/2021-04-02/{{ elem.attrs.poster }}">



{
  // 点击封面图，播放视频
  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();
    }
  }
}


开源
最后贴一下「WePY HTML」的项目仓库： https://github.com/beiliao-web-frontend/wepy-html ，具体使用方法见项目内的 README 。
如果你在使用过程中遇到了问题，或者是有好的建议和意见，都可以在 Issues 中提出。
随着微信小程序的不断完善相信用不了多长时间就会有一种更加完美的解决方案，那时我们就不会再改来改去了。更多关于微信小程序开发的文章请点击下面的相关文章