经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » 微信小程序 » 查看文章
浅谈高大上的微信小程序中渲染html内容
来源：jb51　　时间：2018/10/26 9:46:48　　对本文有异议

大部分Web应用的富文本内容都是以HTML字符串的形式存储的，通过HTML文档去展示HTML内容自然没有问题。但是，在微信小程序（下文简称为「小程序」）中，应当如何渲染这部分内容呢？

解决方案

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等），就把上下文节点设为新节点。

  • 如果截取出来的内容是结束标签，则根据标签名关闭当前上下文节点（把上下文节点设为其父节点）。

  • 如果是纯文本，则在当前上下文节点下创建一个文本节点，上下文节点不变。

过程正如下面的表格所示：

经过上述流程，HTML字符串就被解析为节点树了。

对比

把上述算法与其他类似的解析算法进行对比（性能以「解析10000长度的HTML代码」进行测定）：

可见，在不考虑容错性（产生错误的结果，而非抛出异常）的情况下，本组件的算法与其余两者相比有压倒性的优势，符合小程序「 小而快 」的需要。而一般情况下，富文本编辑器所生成的代码也不会出现语法错误。因此，即使容错性较差，问题也不大（但这是需要改进的）。

模板渲染

树结构的渲染，必然会涉及到子节点的 递归 处理。然而，小程序的模板并不支持递归，这下仿佛掉入了一个大坑。

看了一下「wxParse」模板的实现，它采用简单粗暴的方式解决这个问题：通过13个长得几乎一模一样的模板进行嵌套调用（1调用2，2调用3，……，12调用13），也就是说最多可以支持12次嵌套。一般来说，这个深度也足够了。

由于「WePY」框架本身是有构建机制的，所以不必手写十来个几乎一模一样的模板，通过一个构建的插件去生成即可。

以下为需要重复嵌套的模板（精简过），在其代码的开始前和结束后分别插入特殊注释进行标识，并在需要嵌入下一层模板的地方以另一段特殊注释（「<!-- next template -->」）标识：

  1. <!-- wepyhtml-repeat start -->
  2. <template name="wepyhtml-0">
  3.   <block wx:if="{{ content }}" wx:for="{{ content }}">
  4.     <block wx:if="{{ item.type === 'node' }}">
  5.       <view class="wepyhtml-tag-{{ item.name }}">
  6.         <!-- next template -->
  7.       </view>
  8.     </block>
  9.     <block wx:else>{{ item.text }}</block>
  10.   </block>
  11. </template>
  12. <!-- wepyhtml-repeat end -->

以下是对应的构建代码（需要安装「 wepy-plugin-replace 」）：

  1. // wepy.config.js
  2. {
  3.   plugins: {
  4.     replace: {
  5.       filter: /\.wxml$/,
  6.       config: {
  7.         find: /<\!-- wepyhtml-repeat start -->([\W\w]+?)<\!-- wepyhtml-repeat end -->/,
  8.         replace(match, tpl) {
  9.           let result = '';
  10.           // 反正不要钱，直接写个20层嵌套
  11.           for (let i = 0; i <= 20; i++) {
  12.             result += '\n' + tpl
  13.               .replace('wepyhtml-0', 'wepyhtml-' + i)
  14.               .replace(/<\!-- next template -->/g, () => {
  15.                 return i === 20 ?
  16.                   '' :
  17.                   `<template is="wepyhtml-${ i + 1 }" wx:if="{{ item.children }}" data="{{ content: item.children"></template>`;
  18.               });
  19.           }
  20.           return result;
  21.         }
  22.       }
  23.     }
  24.   }
  25. }

然而，运行起来后发现，第二层及更深层级的节点都没有渲染出来，说明嵌套失败了。再看一下dist目录下生成的wxml文件可以发现，变量名与组件源代码的并不相同：

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

「WePY」在生成组件代码时，为了避免组件数据与页面数据的变量名冲突，会 根据一定的规则给组件的变量名增加前缀 （如上面代码中的「$htmlContent$wepyHtml$」）。所以在生成嵌套模板时，也必须使用带前缀的变量名。

先在组件代码中增加一个变量「thisIsMe」用于识别前缀：

  1. <!-- wepyhtml-repeat start -->
  2. <template name="wepyhtml-0">
  3.   {{ thisIsMe }}
  4.   <block wx:if="{{ content }}" wx:for="{{ content }}">
  5.     <block wx:if="{{ item.type === 'node' }}">
  6.       <view class="wepyhtml-tag-{{ item.name }}">
  7.         <!-- next template -->
  8.       </view>
  9.     </block>
  10.     <block wx:else>{{ item.text }}</block>
  11.   </block>
  12. </template>
  13. <!-- wepyhtml-repeat end -->

然后修改构建代码：

  1. replace(match, tpl) {
  2.   let result = '';
  3.   let prefix = '';
  4.  
  5.   // 匹配 thisIsMe 的前缀
  6.   tpl = tpl.replace(/\{\{\s*(\$.*?\$)thisIsMe\s*\}\}/, (match, p) => {
  7.     prefix = p;
  8.     return '';
  9.   });
  10.  
  11.   for (let i = 0; i <= 20; i++) {
  12.     result += '\n' + tpl
  13.       .replace('wepyhtml-0', 'wepyhtml-' + i)
  14.       .replace(/<\!-- next template -->/g, () => {
  15.         return i === 20 ?
  16.           '' :
  17.           `<template is="wepyhtml-${ i + 1 }" wx:if="{{ item.children }}" data="{{ ${ prefix }content: item.children }}"></template>`;
  18.       });
  19.   }
  20.  
  21.   return result;
  22. }

至此，渲染问题就解决了。

图片

为了节省流量和提高加载速度，展示富文本内容时，一般都会按照所需尺寸对里面的图片进行缩小，点击小图进行预览时才展示原图。这主要涉及节点属性的修改：

  • 把图片原路径（src属性值）存到自定义属性（例如「data-src」）中，并将其添加到预览图数组。

  • 把图片的src属性值修改为缩小后的图片URL（一般云服务商都有提供此类URL规则）。

  • 点击图片时，使用自定义属性的值进行预览。

为了实现这个需求，本组件在解析节点时提供了一个钩子（ onNodeCreate ）：

  1. onNodeCreate(name, attrs) {
  2.   if (name === 'img') {
  3.     attrs['data-src'] = attrs.src;
  4.     // 预览图数组
  5.     this.previewImgs.push(attrs.src);
  6.     // 缩图
  7.     attrs.src = resizeImg(attrs.src, 640);
  8.   }
  9. }

对应的模板和事件处理逻辑如下：

  1. <template name="wepyhtml-img">
  2.   <image class="wepyhtml-tag-img" mode="widthFix" src="{{ elem.attrs.src }}" data-src="{{ elem.attrs['data-src'] || elem.attrs.src }}" @tap="imgTap"></image>
  3. </template>
  1. // 点击小图看大图
  2. imgTap(e) {
  3.   wepy.previewImage({
  4.     current: e.currentTarget.dataset.src,
  5.     urls: this.previewImgs
  6.   });
  7. }

视频

在小程序中，video组件的层级是较高的（且无法降低）。如果页面设计上存在着可能挡住视频的元素，处理起来就需要一些技巧了：

  • 隐藏video组件，用image组件（视频封面）占位；

  • 点击图片时，让视频全屏播放；

  • 如果退出了全屏，则暂停播放。

相关代码如下：

  1. <template name="wepyhtml-video">
  2.   <view class="wepyhtml-tag-video" @tap="videoTap" data-nodeid="{{ elem.nodeId }}">
  3.     <!-- 视频封面 -->
  4.     <image class="wepyhtml-tag-img wepyhtml-tag-video__poster" mode="widthFix" src="{{ elem.attrs.poster }}"></image>
  5.     <!-- 播放图标 -->
  6.     <image class="wepyhtml-tag-img wepyhtml-tag-video__play" src="./imgs/icon-play.png"></image>
  7.     <!-- 视频组件 -->
  8.     <video style="display: none;" src="{{ elem.attrs.src }}" id="wepyhtml-video-{{ elem.nodeId }}" @fullscreenchange="videoFullscreenChange" @play="videoPlay"></video>
  9.   </view>
  10. </template>
  1. {
  2.   // 点击封面图，播放视频
  3.   videoTap(e) {
  4.     const nodeId = e.currentTarget.dataset.nodeid;
  5.     const context = wepy.createVideoContext('wepyhtml-video-' + nodeId);
  6.     context.play();
  7.     // 在安卓微信下，如果视频不可见，则调用play()也无法播放
  8.     // 需要再调用全屏方法
  9.     if (wepy.getSystemInfoSync().platform === 'android') {
  10.       context.requestFullScreen();
  11.     }
  12.   },
  13.   // 视频层级较高，为防止遮挡其他特殊定位元素，造成界面异常，
  14.   // 强制全屏播放
  15.   videoPlay(e) {
  16.     wepy.createVideoContext(e.currentTarget.id).requestFullScreen();
  17.   },
  18.   // 退出全屏则暂停
  19.   videoFullscreenChange(e) {
  20.     if (!e.detail.fullScreen) {
  21.       wepy.createVideoContext(e.currentTarget.id).pause();
  22.     }
  23.   }
  24. }

本文分享就到这里了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

微信小程序热门文章

  • 如何在微信小程序中实现音视频通话
  • 微信小程序调用摄像头实现拍照功能
  • 微信小程序隐私保护协议修改方法 uniapp
  • 微信小程序实现简单的购物车功能
  • 微信小程序访问mysql数据库流程详解
  • 微信小程序实现计算器案例
  • 微信小程序时间轴实现方法示例
  • 微信小程序使用uni-app开发小程序及部分功能实现详解
  • 微信小程序实现聊天室功能
  • 微信小程序底部tabBar遮挡内容的简单处理方法

    • 微信小程序推荐文章

  • 微信小程序车牌键盘输入组件（支持单个删除更改，支持赋值，支持新能源）
  • 小程序优化：第三方SDK过大解决方案
  • .NET生成微信小程序推广二维码
  • 微信小程序动态生成表单来啦！你再也不需要手写表单了！
  • web应用及微信小程序版本更新检测方案实践
  • 微信小程序隐私保护协议修改方法 uniapp
  • 如何在微信小程序中实现音视频通话
  • 微信小程序抢红包高并发设计
  • uni-app + .NET 7实现微信小程序订阅消息推送
  • 微信小程序常用功能实例汇总包括上拉刷新,下拉加载,列表数据绑定,轮播,参数传递

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号