浅谈高大上的微信小程序中渲染html内容金沙8331网址

绝大许多Web应用的富文本内容都以以HTML字符串的款型积攒的,通过HTML文书档案去显得HTML内容自然没不符合规律。不过,在Wechat小程序中,应当怎么着渲染这有的内容吗?

解决方案

浅谈高大上的微信小程序中渲染html内容金沙8331网址。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中的特殊字符是「」,前面一个为始发符,前者为结束符。

即使待剖判内容以开头符在此之前,则截取 开始符到甘休符之间
的内容作为节点开展解析。 倘诺待深入分析内容不以开首符起头,则截取
初步到起来符此前 的内容作为纯文本深入分析。
剩余内容步向下一轮解析,直到无剩余内容截至。

为了变成树构造,深入分析进度中要爱抚七个上下文节点:

如若截抽出来的剧情是始于标签,则依照相称出的标具名和质量,在现阶段上下文节点下开创一个子节点。要是该标签不是自结束标签,就把上下文节点设为新节点。
假若截收取来的原委是终止标签,则基于标具名关闭当前上下文节点。
要是是纯文本,则在脚下上下文节点下成立叁个文本节点,上下文节点不改变。

过程正如上面包车型地铁表格所示:

通过上述流程,HTML字符串就被拆解深入分析为节点树了。

把上述算法与别的相像的剖析算法举行自查自纠(质量以「深入深入分析10000长度的HTML代码」进行测定):

看得出,在不思量容错性的动静下,本组件的算法与任何两个相比较有压倒性的优势,相符小程序「
小而快
」的内需。而相近意况下,富文本编辑器所生成的代码也不会出现语法错误。因而,即便容错性相当差,难题也非常小。

模板渲染

树构造的渲染,必然会提到到子节点的 递归
管理。可是,小程序的沙盘模拟经营并不援助递归,那下就好像掉入了二个红磡。

看了须臾间「wxParse」模板的贯彻,它利用简易严酷的法子缓慢解决那几个难题:通过10个长得大致同样的模板实行嵌套调用,也正是说最多可以扶持11遍嵌套。常常的话,那么些深度也丰富了。

是因为「WePY」框架本人是有创设机制的,所以不必手写十来个差不离同一的模版,通过一个塑造的插件去变通就可以。

以下为索要重新嵌套的模版,在其代码的起来前和结束后各自插入特殊注释举行标记,并在急需安放下一层模板的地点以另一段特殊注释(「」)标记:

       {{ item.text }} 

以下是应和的塑造代码(须求设置「 wepy-plugin-replace 」):

// wepy.config.js{ plugins: { replace: { filter: /.wxml$/, config: { find: //, replace { let result = ''; // 反正不要钱,直接写个20层嵌套 for (let i = 0; i <= 20; i++) { result += 'n' + tpl .replace('wepyhtml-0', 'wepyhtml-' + i) .replace(//g, () => { return i === 20 ? '' : ``; }); } return result; } } } }}

只是,运维起来后意识,第二层及更加深层级的节点都未曾渲染出来,表达嵌套失利了。再看一下dist目录下转移的wxml文件能够开掘,变量名与组件源代码的并不相像:

「WePY」在改造组件代码时,为了制止组件数据与页面数据的变量名冲突,会
依据早晚的平整给组件的变量名扩充前缀
(如上面代码中的「$htmlContent$wepyHtml$」)。所以在变幻莫测嵌套模板时,也一定要运用带前缀的变量名。

先在组件代码中追加二个变量「thisIsMe」用于识别前缀:

 {{ thisIsMe }}       {{ item.text }} 

replace { let result = ''; let prefix = ''; // 匹配 thisIsMe 的前缀 tpl = tpl.replacethisIsMes*}}/,  => { prefix = p; return ''; }); for (let i = 0; i <= 20; i++) { result += 'n' + tpl .replace('wepyhtml-0', 'wepyhtml-' + i) .replace(//g, () => { return i === 20 ? '' : ``; }); } return result;}

到现在,渲染难点就解决了。

图片

为了省去流量和巩固加载速度,呈现富文本内容时,日常都会遵照所需尺寸对中间的图片进行收缩,点击小图举行预览时才显得原图。那首要涉嫌节点属性的校正:

把图片原路线存到自定义属性中,并将其增加到预览图数组。
把图片的src属性值改进为收缩后的图纸UWranglerL。
点击图片时,使用自定义属性的值进行预览。

为了达成那一个须求,本组件在分条析理节点时提供了三个钩子:

onNodeCreate { if  { attrs['data-src'] = attrs.src; // 预览图数组 this.previewImgs.push; // 缩图 attrs.src = resizeImg; }}

对应的沙盘模拟经营和事件管理逻辑如下:

// 点击小图看大图imgTap { wepy.previewImage({ current: e.currentTarget.dataset.src, urls: this.previewImgs });}

视频

在小程序中,video组件的层级是较高的。假如页面设计上存在着或然掩盖摄像的要素,管理起来就必要有的本领了:

遮盖video组件,用image组件占位; 点击图片时,让摄像全屏播放;
假如退出了全屏,则暂停止播放放。

{ // 点击封面图,播放视频 videoTap { const nodeId = e.currentTarget.dataset.nodeid; const context = wepy.createVideoContext('wepyhtml-video-' + nodeId); context.play(); // 在安卓微信下,如果视频不可见,则调用play()也无法播放 // 需要再调用全屏方法 if (wepy.getSystemInfoSync().platform === 'android') { context.requestFullScreen(); } }, // 视频层级较高,为防止遮挡其他特殊定位元素,造成界面异常, // 强制全屏播放 videoPlay { wepy.createVideoContext.requestFullScreen(); }, // 退出全屏则暂停 videoFullscreenChange { if  { wepy.createVideoContext.pause(); } }}

如上就是本文的全体内容,希望对大家的学习抱有利于,也希望大家多多照料脚本之家。

发表评论

电子邮件地址不会被公开。 必填项已用*标注