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


Posted in Javascript onJanuary 12, 2020

大部分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
div p
p Hello world p
p div
div 根节点

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

对比

  本组件算法 wxParse parse5
性能 3~6ms 20ms左右 20ms左右
容错性 一般
文件大小(未压缩) 6kb 22kb 接近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="{{ 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-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 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*(\$.*?\$)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="{{ elem.nodeId }}">
    <!-- 视频封面 -->
    <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 style="display: none;" src="{{ elem.attrs.src }}" id="wepyhtml-video-{{ elem.nodeId }}" @fullscreenchange="videoFullscreenChange" @play="videoPlay"></video>
  </view>
</template>
{
  // 点击封面图,播放视频
  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 中提出。

随着微信小程序的不断完善相信用不了多长时间就会有一种更加完美的解决方案,那时我们就不会再改来改去了。更多关于微信小程序开发的文章请点击下面的相关文章

Javascript 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
理解javascript中的原型和原型链
Jul 30 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 Javascript
javascript事件监听与事件委托实例详解
Aug 16 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 Javascript
es6 for循环中let和var区别详解
Jan 12 #Javascript
js 计数排序的实现示例(升级版)
Jan 12 #Javascript
JS实现动态无缝轮播
Jan 11 #Javascript
原生js实现无缝轮播图
Jan 11 #Javascript
JS实现轮播图效果
Jan 11 #Javascript
js实现带搜索功能的下拉框
Jan 11 #Javascript
js实现select下拉框选择
Jan 11 #Javascript
You might like
php.ini 中文版
2006/10/28 PHP
优化使用mysql存储session的php代码
2008/01/10 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
PHP 透明水印生成代码
2012/08/27 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
功能强大的php分页函数
2016/07/20 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
jQuery中ajax的post()方法用法实例
2014/12/26 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
python Django批量导入不重复数据
2016/03/25 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
Numpy之文件存取的示例代码
2018/08/03 Python
python list格式数据excel导出方法
2018/10/31 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
什么是GWT的Module
2013/01/20 面试题
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
身边的榜样活动方案
2014/08/20 职场文书
新店开张活动方案
2014/08/24 职场文书
详解Nginx 工作原理
2021/03/31 Servers
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis