小程序模板網(wǎng)

在微信小程序中渲染HTML內(nèi)容

發(fā)布時(shí)間:2018-09-19 08:42 所屬欄目:小程序開(kāi)發(fā)教程

大部分Web應(yīng)用的富文本內(nèi)容都是以HTML字符串的形式存儲(chǔ)的,通過(guò)HTML文檔去展示HTML內(nèi)容自然沒(méi)有問(wèn)題。但是,在微信小程序(下文簡(jiǎn)稱(chēng)為「小程序」)中,應(yīng)當(dāng)如何渲染這部分內(nèi)容呢?

解決方案

wxParse

小程序剛上線那會(huì)兒,是無(wú)法直接渲染HTML內(nèi)容的,于是就誕生了一個(gè)叫做「 wxParse 」的庫(kù)。它的原理就是把HTML代碼解析成樹(shù)結(jié)構(gòu)的數(shù)據(jù),再通過(guò)小程序的模板把該數(shù)據(jù)渲染出來(lái)。

rich-text

后來(lái),小程序增加了「rich-text」組件用于展示富文本內(nèi)容。然而,這個(gè)組件存在一個(gè)極大的限制: 組件內(nèi)屏蔽了所有節(jié)點(diǎn)的事件 。也就是說(shuō),在該組件內(nèi),連「預(yù)覽圖片」這樣一個(gè)簡(jiǎn)單的功能都無(wú)法實(shí)現(xiàn)。

web-view

再后來(lái),小程序允許通過(guò)「web-view」組件嵌套網(wǎng)頁(yè),通過(guò)網(wǎng)頁(yè)展示HTML內(nèi)容是兼容性最好的解決方案了。然而,因?yàn)橐嗉虞d一個(gè)頁(yè)面,性能是較差的。

當(dāng)「WePY」遇上「wxParse」

基于用戶(hù)體驗(yàn)和功能交互上的考慮,我們拋棄了「rich-text」和「web-view」這兩個(gè)原生組件,選擇了「wxParse」。然而,用著用著卻發(fā)現(xiàn),「wxParse」也不能很好地滿(mǎn)足需要:

  • 我們的小程序是基于「WePY」框架開(kāi)發(fā)的,而「wxParse」是基于原生的小程序編寫(xiě)的。要想讓兩者兼容,必須修改「wxParse」的源代碼。
  • 「wxParse」只是簡(jiǎn)單地通過(guò)image組件對(duì)原img元素的圖片進(jìn)行顯示和預(yù)覽。而在實(shí)際使用中,可能會(huì)用到云存儲(chǔ)的接口對(duì)圖片進(jìn)行縮小,達(dá)到「 用小圖顯示,用原圖預(yù)覽 」的目的。
  • 「wxParse」直接使用小程序的video組件展示視頻,但是video組件的 層級(jí)問(wèn)題 經(jīng)常導(dǎo)致UI異常(例如把某個(gè)固定定位的元素給擋了)。

此外,圍觀一下「wxParse」的代碼倉(cāng)庫(kù)可以發(fā)現(xiàn),它已經(jīng)兩年沒(méi)有迭代了。所以就萌生了基于「WePY」的組件模式重新寫(xiě)一個(gè)富文本組件的想法,其成果就是「WePY HTML」項(xiàng)目。

實(shí)現(xiàn)過(guò)程

解析HTML

首先仍然是要把HTML字符串解析為樹(shù)結(jié)構(gòu)的數(shù)據(jù),我采用的是「特殊字符分隔法」。HTML中的特殊字符是「<」和「>」,前者為開(kāi)始符,后者為結(jié)束符。

  • 如果待解析內(nèi)容以開(kāi)始符開(kāi)頭,則截取 開(kāi)始符到結(jié)束符之間 的內(nèi)容作為節(jié)點(diǎn)進(jìn)行解析。
  • 如果待解析內(nèi)容不以開(kāi)始符開(kāi)頭,則截取 開(kāi)頭到開(kāi)始符之前 (如果開(kāi)始符不存在,則為末尾)的內(nèi)容作為純文本解析。
  • 剩余內(nèi)容進(jìn)入下一輪解析,直到無(wú)剩余內(nèi)容為止。

正如下圖所示:

為了形成樹(shù)結(jié)構(gòu),解析過(guò)程中要維護(hù)一個(gè)上下文節(jié)點(diǎn)(默認(rèn)為根節(jié)點(diǎn)):

  • 如果截取出來(lái)的內(nèi)容是開(kāi)始標(biāo)簽,則根據(jù)匹配出的標(biāo)簽名和屬性,在當(dāng)前上下文節(jié)點(diǎn)下創(chuàng)建一個(gè)子節(jié)點(diǎn)。如果該標(biāo)簽不是自結(jié)束標(biāo)簽(br、img等),就把上下文節(jié)點(diǎn)設(shè)為新節(jié)點(diǎn)。
  • 如果截取出來(lái)的內(nèi)容是結(jié)束標(biāo)簽,則根據(jù)標(biāo)簽名關(guān)閉當(dāng)前上下文節(jié)點(diǎn)(把上下文節(jié)點(diǎn)設(shè)為其父節(jié)點(diǎn))。
  • 如果是純文本,則在當(dāng)前上下文節(jié)點(diǎn)下創(chuàng)建一個(gè)文本節(jié)點(diǎn),上下文節(jié)點(diǎn)不變。

過(guò)程正如下面的表格所示:

經(jīng)過(guò)上述流程,HTML字符串就被解析為節(jié)點(diǎn)樹(shù)了。

對(duì)比

把上述算法與其他類(lèi)似的解析算法進(jìn)行對(duì)比(性能以「解析10000長(zhǎng)度的HTML代碼」進(jìn)行測(cè)定):

可見(jiàn),在不考慮容錯(cuò)性(產(chǎn)生錯(cuò)誤的結(jié)果,而非拋出異常)的情況下,本組件的算法與其余兩者相比有壓倒性的優(yōu)勢(shì),符合小程序「 小而快 」的需要。而一般情況下,富文本編輯器所生成的代碼也不會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤。因此,即使容錯(cuò)性較差,問(wèn)題也不大(但這是需要改進(jìn)的)。

模板渲染

樹(shù)結(jié)構(gòu)的渲染,必然會(huì)涉及到子節(jié)點(diǎn)的 遞歸 處理。然而,小程序的模板并不支持遞歸,這下仿佛掉入了一個(gè)大坑。

看了一下「wxParse」模板的實(shí)現(xiàn),它采用簡(jiǎn)單粗暴的方式解決這個(gè)問(wèn)題:通過(guò)13個(gè)長(zhǎng)得幾乎一模一樣的模板進(jìn)行嵌套調(diào)用(1調(diào)用2,2調(diào)用3,……,12調(diào)用13),也就是說(shuō)最多可以支持12次嵌套。一般來(lái)說(shuō),這個(gè)深度也足夠了。

由于「WePY」框架本身是有構(gòu)建機(jī)制的,所以不必手寫(xiě)十來(lái)個(gè)幾乎一模一樣的模板,通過(guò)一個(gè)構(gòu)建的插件去生成即可。

以下為需要重復(fù)嵌套的模板(精簡(jiǎn)過(guò)),在其代碼的開(kāi)始前和結(jié)束后分別插入特殊注釋進(jìn)行標(biāo)識(shí),并在需要嵌入下一層模板的地方以另一段特殊注釋?zhuān)ā?lt;!-- next template -->」)標(biāo)識(shí):

<!-- 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 -->
以下是對(duì)應(yīng)的構(gòu)建代碼(需要安裝「 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 = '';
					// 反正不要錢(qián),直接寫(xiě)個(gè)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;
				}
			}
		}
	}
}

然而,運(yùn)行起來(lái)后發(fā)現(xiàn),第二層及更深層級(jí)的節(jié)點(diǎn)都沒(méi)有渲染出來(lái),說(shuō)明嵌套失敗了。再看一下dist目錄下生成的wxml文件可以發(fā)現(xiàn),變量名與組件源代碼的并不相同:

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

「WePY」在生成組件代碼時(shí),為了避免組件數(shù)據(jù)與頁(yè)面數(shù)據(jù)的變量名沖突,會(huì) 根據(jù)一定的規(guī)則給組件的變量名增加前綴 (如上面代碼中的「$htmlContent$wepyHtml$」)。所以在生成嵌套模板時(shí),也必須使用帶前綴的變量名。

先在組件代碼中增加一個(gè)變量「thisIsMe」用于識(shí)別前綴:

<!-- 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 -->
然后修改構(gòu)建代碼:

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;
}

至此,渲染問(wèn)題就解決了。

圖片

為了節(jié)省流量和提高加載速度,展示富文本內(nèi)容時(shí),一般都會(huì)按照所需尺寸對(duì)里面的圖片進(jìn)行縮小,點(diǎn)擊小圖進(jìn)行預(yù)覽時(shí)才展示原圖。這主要涉及節(jié)點(diǎn)屬性的修改:

  • 把圖片原路徑(src屬性值)存到自定義屬性(例如「data-src」)中,并將其添加到預(yù)覽圖數(shù)組。
  • 把圖片的src屬性值修改為縮小后的圖片URL(一般云服務(wù)商都有提供此類(lèi)URL規(guī)則)。
  • 點(diǎn)擊圖片時(shí),使用自定義屬性的值進(jìn)行預(yù)覽。

為了實(shí)現(xiàn)這個(gè)需求,本組件在解析節(jié)點(diǎn)時(shí)提供了一個(gè)鉤子( onNodeCreate ):

onNodeCreate(name, attrs) {
	if (name === 'img') {
		attrs['data-src'] = attrs.src;
		// 預(yù)覽圖數(shù)組
		this.previewImgs.push(attrs.src);
		// 縮圖
		attrs.src = resizeImg(attrs.src, 640);
	}
}
對(duì)應(yīng)的模板和事件處理邏輯如下:

<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>
// 點(diǎn)擊小圖看大圖
imgTap(e) {
	wepy.previewImage({
		current: e.currentTarget.dataset.src,
		urls: this.previewImgs
	});
}

視頻

在小程序中,video組件的層級(jí)是較高的(且無(wú)法降低)。如果頁(yè)面設(shè)計(jì)上存在著可能擋住視頻的元素,處理起來(lái)就需要一些技巧了:

  • 隱藏video組件,用image組件(視頻封面)占位;
  • 點(diǎn)擊圖片時(shí),讓視頻全屏播放;
  • 如果退出了全屏,則暫停播放。

相關(guān)代碼如下:

<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>
		<!-- 播放圖標(biāo) -->
		<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>
{
	// 點(diǎn)擊封面圖,播放視頻
	videoTap(e) {
		const nodeId = e.currentTarget.dataset.nodeid;
		const context = wepy.createVideoContext('wepyhtml-video-' + nodeId);
		context.play();
		// 在安卓微信下,如果視頻不可見(jiàn),則調(diào)用play()也無(wú)法播放
		// 需要再調(diào)用全屏方法
		if (wepy.getSystemInfoSync().platform === 'android') {
			context.requestFullScreen();
		}
	},
	// 視頻層級(jí)較高,為防止遮擋其他特殊定位元素,造成界面異常,
	// 強(qiáng)制全屏播放
	videoPlay(e) {
		wepy.createVideoContext(e.currentTarget.id).requestFullScreen();
	},
	// 退出全屏則暫停
	videoFullscreenChange(e) {
		if (!e.detail.fullScreen) {
			wepy.createVideoContext(e.currentTarget.id).pause();
		}
	}
}


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://u-renovate.com/wxmini/doc/course/24817.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線咨詢(xún)