這篇文章主要講解了“小程序怎么實(shí)現(xiàn)rich-text對富文本支持”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“小程序怎么實(shí)現(xiàn)rich-text對富文本支持”吧！

小程序富文本解析

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

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

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

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

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

import parser from 'rich-text-parser'

Page({
 data: {
    html: `
文殊林舍、山房由麗江鉑爾曼度假酒店余明金老師設(shè)計(jì)，是麗江古城的網(wǎng)紅民宿，2017年被評為全國100家“最美民宿”，以及2017年最值得睡的“365張床”。
  


  
兩家店均位于古城北門坡半山處，背倚青山，可俯瞰古城全景。
  


  
文殊·林舍2間房、文殊·山房6間房，共8間房。有可看麗江古城全景的景觀房，有落滿陽光的大床房，有花園院景的復(fù)式房...
  


  
房間按照五星級標(biāo)準(zhǔn)配套，科勒衛(wèi)浴、鵝絨被、品牌乳膠床墊、高端洗漱用品等，提供免費(fèi)洗衣機(jī)、烘干機(jī)、自助廚房等配套服務(wù)。
  


  
每個(gè)房間距離適中，為所有入住房客營造更私密舒適的空間體驗(yàn)感！另房東可以提供一對一的管家服務(wù)，接受所有房客吃喝玩樂咨詢以及打折的各種便利活動(dòng)！
  


  
    
      麗江文殊設(shè)計(jì)師網(wǎng)紅民宿大床房