詳解小程序rich-text對(duì)富文本支持方案

2020-03-21 16:05:55

字體：大中小

供稿：網(wǎng)友

目前小程序使用比較多的富文本方案一個(gè)是小程序自帶的rich-text組件，一個(gè)是wxPrase。

wxPrase原理是把原有的html標(biāo)簽全部解析成小程序的組件，這樣無(wú)論事件可控以及擴(kuò)展性都是比較好的，但是對(duì)于行內(nèi)渲染和多重渲染方面表現(xiàn)不是很好。

微信自帶的rich-text組件剛好補(bǔ)足了wxPrase行內(nèi)渲染和多重渲染方面表現(xiàn)方面的缺點(diǎn)，但是對(duì)于一些自定義的標(biāo)簽支持度不高并且會(huì)屏蔽元素所有事件，雖然支持直接解析html字符串，但是性能沒(méi)有直接綁定json串好。

官網(wǎng)給的rich-text演示demo:

<rich-text nodes="{{nodes}}"></rich-text>

Page({ data: {  nodes: [{   name: 'div',   attrs: {    class: 'div_class',    style: 'line-height: 60px; color: red;'   },   children: [{    type: 'text',    text: 'Hello World!'   }]  }] }, tap() {  console.log('tap') }})

rich-text-parser是一個(gè)能將html字符串轉(zhuǎn)成rich-text組件可以解析的json格式，并且可以自定義擴(kuò)展標(biāo)簽，并且支持修改rich-text組件內(nèi)部html樣式（包括img標(biāo)簽）。

使用方法：

npm i rich-text-parser -S --production

<rich-text nodes="{{html2}}"></rich-text>

import parser from 'rich-text-parser'Page({ data: {    html: `<p>文殊林舍、山房由麗江鉑爾曼度假酒店余明金老師設(shè)計(jì)，是<b>麗江古城的網(wǎng)紅民宿</b>，2017年被評(píng)為<b>全國(guó)100家“最美民宿”</b>，以及2017年<b>最值得睡的“365張床”</b>。</p>  <p><br></p>  <p>兩家店均位于古城北門坡半山處，背倚青山，<b>可俯瞰古城全景。</b></p>  <p><br></p>  <p>文殊·林舍2間房、文殊·山房6間房，共8間房。有可看麗江古城全景的景觀房，有落滿陽(yáng)光的大床房，有花園院景的復(fù)式房...</p>  <p><br></p>  <p>房間<b>按照五星級(jí)標(biāo)準(zhǔn)配套</b>，科勒衛(wèi)浴、鵝絨被、品牌乳膠床墊、高端洗漱用品等，提供免費(fèi)洗衣機(jī)、烘干機(jī)、自助廚房等配套服務(wù)。</p>  <p><br></p>  <p>每個(gè)房間距離適中，為所有入住房客營(yíng)造更私密舒適的空間體驗(yàn)感！另房東可以提供一對(duì)一的管家服務(wù)，接受所有房客吃喝玩樂(lè)咨詢以及打折的各種便利活動(dòng)！</p>  <p><br></p>  <div class="kai-images">    <figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1glier2lsdge1q9irbs1a5u4e.jpg" rate="1.50">      <figcaption contenteditable="true" class="" data-placeholder="請(qǐng)輸入圖片說(shuō)明"><h6>麗江文殊設(shè)計(jì)師網(wǎng)紅民宿大床房</h6></figcaption>    </figure>  </div>  <div class="kai-images">    <figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1glp4b1sml12641ma3b96pnv4j.jpg" rate="1.50">      <figcaption contenteditable="true" class="" data-placeholder="請(qǐng)輸入圖片說(shuō)明"><h6>麗江文殊設(shè)計(jì)師網(wǎng)紅民宿大床房</h6></figcaption>    </figure>  </div>  <div class="kai-images">    <figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1glu4p1q2s1hpm4qu127dhj4o.jpg" rate="1.50">      <figcaption contenteditable="true" class="" data-placeholder="請(qǐng)輸入圖片說(shuō)明"><h6>麗江文殊設(shè)計(jì)師網(wǎng)紅雙床房</h6></figcaption>    </figure>  </div>  <div class="kai-images">    <figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gmav71q0b182r1nd7184ufns4t.jpg" rate="1.50">      <figcaption contenteditable="true" class="" data-placeholder="請(qǐng)輸入圖片說(shuō)明"><h6>麗江文殊設(shè)計(jì)師網(wǎng)紅大床房（可觀古城全景）</h6>      </figcaption>    </figure>  </div>  <div class="kai-images">    <figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gmg28udvhec1s4r1cvl1m2s52.jpg" rate="1.50">      <figcaption contenteditable="true" class="" data-placeholder="請(qǐng)輸入圖片說(shuō)明"><h6>麗江文殊設(shè)計(jì)師網(wǎng)紅大床房（可觀古城全景）</h6>      </figcaption>    </figure>  </div>  <div class="kai-images">    <figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gmkvj1egf1254le7157quqj57.jpg" rate="1.50">      <figcaption contenteditable="true" class="" data-placeholder="請(qǐng)輸入圖片說(shuō)明"><h6>麗江文殊設(shè)計(jì)師網(wǎng)紅復(fù)式星空房（可觀古城全景）</h6>      </figcaption>    </figure>  </div>  <div class="kai-images">    <figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gmuhq161sf621hu81l7slc85c.jpg" rate="1.50">      <figcaption contenteditable="true" class="" data-placeholder="請(qǐng)輸入圖片說(shuō)明"><h6>麗江文殊設(shè)計(jì)師網(wǎng)紅民宿別墅東院</h6></figcaption>    </figure>  </div>  <div class="kai-images">    <figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gngk76441747omu1on619085h.jpg" rate="1.50">      <figcaption contenteditable="true" class="" data-placeholder="請(qǐng)輸入圖片說(shuō)明"><h6>餐廳</h6></figcaption>    </figure>  </div>  <div class="kai-images">    <figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gnlm21gi916okcnf12mp1fh05m.jpg" rate="0.67">      <figcaption contenteditable="true" class="" data-placeholder="請(qǐng)輸入圖片說(shuō)明"><h6>公共區(qū)域</h6></figcaption>    </figure>  </div>  <div class="kai-images">    <figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1go50bftu15c41rbgdoj1e4p5r.jpg" rate="1.50">      <figcaption contenteditable="true" class="" data-placeholder="請(qǐng)輸入圖片說(shuō)明"><h6>公共區(qū)域</h6></figcaption>    </figure>  </div>  <div class="kai-images">    <figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gonmohor1duu1grv5gd8fu60.jpg" rate="1.50">      <figcaption contenteditable="true" class="" data-placeholder="請(qǐng)輸入圖片說(shuō)明">公共區(qū)域-露臺(tái)</figcaption>    </figure>  </div>  <div class="kai-images">    <figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1goslosu2qnn4tn1bdjus965.jpg" rate="1.50">      <figcaption contenteditable="true" class="" data-placeholder="請(qǐng)輸入圖片說(shuō)明"><h6>麗江文殊設(shè)計(jì)師網(wǎng)紅民宿湯池別墅西院</h6></figcaption>    </figure>  </div>  <div class="kai-images">    <figure contenteditable="false"><img src="http://images.kaishiba.com/o_1cs1gphvmfrgk2momcgko21g6a.jpg" rate="1.50">      <figcaption contenteditable="true" class="" data-placeholder="請(qǐng)輸入圖片說(shuō)明"><h6>麗江文殊設(shè)計(jì)師網(wǎng)紅民宿別墅東院</h6></figcaption>    </figure>  </div>  <p><br></p>  <p><b>門店信息：</b></p>  <p>·wifi已覆蓋、24小時(shí)熱水、吹風(fēng)機(jī)、一次性用品</p>  <p>·電熱毯、壁爐、一對(duì)一管家服務(wù)等</p>  <p><br></p>  <p><b>商家聯(lián)系電話：</b></p>  <p>·地址：云南省麗江市古城區(qū)北門坡玄天巷26號(hào)</p>  <p>·電話：15099128722</p>`,  html2: [] }, onLoad () {   const {html} = this.data   // 定義需要解析的特殊標(biāo)簽，value不填默認(rèn)是div   parser.definedCustomTag({figure: 'div', figcaption: ''})   const nodes = parser.getRichTextJson(html)   console.log(nodes)   this.setData({    html2: nodes.children   })  }})

源碼參見(jiàn)rich-text-parser

效果圖以及數(shù)據(jù)結(jié)構(gòu)：

小程序,rich-text,富文本