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

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

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

•把图片原路径(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. }

本文分享就到这里了。

高大上的微信小程序中渲染html内容—技术分享的更多相关文章

  1. 微信小程序-列表渲染多层嵌套循环

    微信小程序-列表渲染多层嵌套循环 入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for= ...

  2. 微信小程序中如何使用WebSocket实现长连接(含完整源码)

    本文由腾讯云技术团队原创,感谢作者的分享. 1.前言   微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现 ...

  3. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  4. 微信小程序中target与currentTarget

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...

  5. 微信小程序中的事件绑定

    前言: 微信小程序中的事件绑定和Vue中的事件绑定其实有很多的相似之处,所以如果有过Vue相关的经验,学起来的话还是比较容易的. js代码: // 页面级的js文件必须调用Page函数来注册页面, / ...

  6. 微信小程序中的自定义组件

    微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 ...

  7. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  8. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  9. 微信小程序中发送模版消息注意事项

    在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...

随机推荐

  1. Servlet中@WebServlet("XXXX")注解无效,访问servlet报404错误

    1.问题描述 servlet使用注解配置,经检查无错误,如图: tomcat正常启动,页面正常运行,当访问servlet时出现无响应的情况,控制台报错404,未访问到servlet. 经检查,我的错误 ...

  2. LeetCode.1122-相对排序数组(Relative Sort Array)

    这是小川的第393次更新,第427篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第258题(顺位题号是1122).给定两个数组arr1和arr2,arr2中的元素是不同的 ...

  3. JAVA SQL注入漏洞挖掘

    java中sql注入主要发生在model层,黑盒测试sql注入的方法结合两点:1,异常注入后,界面有无明显的aql异常报出.2,查看数据库日志是否有脏数据注入. preparestatement方法是 ...

  4. CreateThread()使用实例

    1.定义的全局变量 DWORD WINAPI ClientThread(LPVOID lpParam); struct ClientInfo {   SOCKET sock;   SOCKADDR_I ...

  5. 使用Themleaf 模板引擎手动生成html文件

    1.为什么要写这一篇呢? 在做一个邮件发送功能的时候,需要发送html邮件,javaMail 发送html 的时候需要有已经生成的html正文,所以需要提前将要发送的内容生成,所以就需要模板引擎来动态 ...

  6. 从零开始,SpreadJS新人学习笔记【第4周】

    数据绑定.脏数据和单引号前缀 本周,让我们一起来学习SpreadJS 的数据绑定.脏数据和单引号前缀,希望我的学习笔记能够帮助你们,从零开始学习 SpreadJS,并逐步精通. 在此前的学习笔记中,相 ...

  7. 小菜鸟之java异常

    一.异常简介 什么是异常? 异常就是有异于常态,和正常情况不一样,有错误出错.在java中,阻止当前方法或作用域的情况,称之为异常. java中异常的体系是怎么样的呢? 1.Java中的所有不正常类都 ...

  8. 小记---------破解idea2018.3.6 转载

      一.进入idea官网选择想要下载的版本 官网版本选择页面: https://www.jetbrains.com/idea/download/other.html IntelliJ IDEA 分为两 ...

  9. 动态树(LCT、Top Tree、ETT)

    LCT Upd: 一个细节:假如我们要修改某个节点的数据,那么要先把它makeroot再修改,改完之后pushup. LCT是一种维护森林的数据结构,本质是用Splay维护实链剖分. 实链剖分大概是这 ...

  10. python_操作MySQL 初解 之__<类方法调用并 增-删-改-查>

    文件一: 调用(sqls文件) # 导入模块 import pymysql from sqls import * # 创建类 class KaoShi(object): # 初始化 def __ini ...