? 背景
- 最近在開(kāi)發(fā)學(xué)習(xí)
Uniapp的過(guò)程中遇到了富文本的顯示，對(duì)比了微信小程序中生成的代碼，才發(fā)現(xiàn)原來(lái)微信官方早就開(kāi)發(fā)了<rich-text>標(biāo)簽，可以很方便的拿來(lái)使用 - 所以，在此對(duì) 小程序 rich-text 的使用方法進(jìn)行一點(diǎn)整理
? 使用技巧
? . 首先，是 wxml 頁(yè)面元素的最簡(jiǎn)單使用
<rich-text nodes="{{article_content}}"></rich-text>
?. js 通常的處理邏輯為：
-
根據(jù)
文章 ID，網(wǎng)絡(luò)請(qǐng)求其文章內(nèi)容；然后將"html"格式的代碼進(jìn)行轉(zhuǎn)化；最后賦值于article_content變量.
其實(shí)核心的處理代碼就是下面這句：
/**
* 此代碼段處理目的為，匹配富文本代碼中的 <img> 標(biāo)簽，并將其圖片的寬度修改為適應(yīng)屏幕
* max-width:100% --- 圖片寬度加以限制，避免超出屏幕
* height:auto --- 高度自適應(yīng)
* display:block --- 此代碼，可以去掉圖片之間的空白間隔，個(gè)人覺(jué)得好用
*/
article_content.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ');
一般而言，我們使用的富文本編輯器（比如：UEditor），生成的
HTML節(jié)點(diǎn)及屬性大多數(shù)都可以進(jìn)行解析
測(cè)試中，發(fā)現(xiàn)對(duì)<section>標(biāo)簽不支持
可參考文章： 小程序 rich-text 不支持 section 標(biāo)簽的情況
- 那么前面的代碼片段，可對(duì)應(yīng)修改為：
article_content = article_content.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ')
.replace(/<section/g, '<div')
.replace(/\/section>/g, '\div>');
?. 效果展示
? 附錄
一般而言，我們使用的富文本編輯器（比如：UEditor），生成的
HTML節(jié)點(diǎn)及屬性都可以進(jìn)行解析-
官方文檔，詳情請(qǐng)參考： 小程序 rich-text
在這之前，我使用的是 wxParse解析富文本
最大的缺點(diǎn)就是代碼配置多，并且無(wú)疑多出了一部分源碼資源推薦學(xué)習(xí)：RegExp對(duì)象筆記整理|正則基礎(chǔ)
