小程序rich-text對富文本支持方案

小程序富文本解析

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

wxPrase原理是把原有的html標籤所有解析成小程序的組件，這樣不管事件可控以及擴展性都是比較好的，可是對於行內渲染和多重渲染方面表現不是很好。

微信自帶的rich-text組件恰好補足了wxPrase行內渲染和多重渲染方面表現方面的缺點，可是對於一些自定義的標籤支持度不高而且會屏蔽元素全部事件，雖然支持直接解析html字符串，可是性能沒有直接綁定json串好。

官網給的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是一個能將html字符串轉成rich-text組件能夠解析的json格式，而且能夠自定義擴展標籤，而且支持修改rich-text組件內部html樣式（包括img標籤）。

使用方法：

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

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

import parser from 'rich-text-parser'

Page({
  data: {
        html: `<p>文殊林舍、山房由麗江鉑爾曼度假酒店餘明金老師設計，是<b>麗江古城的網紅民宿</b>，2017年被評爲<b>全國100家「最美民宿」</b>，以及2017年<b>最值得睡的「365張牀」</b>。</p>
    <p><br></p>
    <p>兩家店均位於古城北門坡半山處，背倚青山，<b>可俯瞰古城全景。</b></p>
    <p><br></p>
    <p>文殊·林舍2間房、文殊·山房6間房，共8間房。有可看麗江古城全景的景觀房，有落滿陽光的大牀房，有花園院景的複式房...</p>
    <p><br></p>
    <p>房間<b>按照五星級標準配套</b>，科勒衛浴、鵝絨被、品牌乳膠牀墊、高端洗漱用品等，提供免費洗衣機、烘乾機、自助廚房等配套服務。</p>
    <p><br></p>
    <p>每一個房間距離適中，爲全部入住房客營造更私密溫馨的空間體驗感！另房東能夠提供一對一的管家服務，接受全部房客吃喝玩樂諮詢以及打折的各類便利活動！</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="請輸入圖片說明"><h6>麗江文殊設計師網紅民宿大牀房</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="請輸入圖片說明"><h6>麗江文殊設計師網紅民宿大牀房</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="請輸入圖片說明"><h6>麗江文殊設計師網紅雙牀房</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="請輸入圖片說明"><h6>麗江文殊設計師網紅大牀房（可觀古城全景）</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="請輸入圖片說明"><h6>麗江文殊設計師網紅大牀房（可觀古城全景）</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="請輸入圖片說明"><h6>麗江文殊設計師網紅複式星空房（可觀古城全景）</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="請輸入圖片說明"><h6>麗江文殊設計師網紅民宿別墅東院</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="請輸入圖片說明"><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="請輸入圖片說明"><h6>公共區域</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="請輸入圖片說明"><h6>公共區域</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="請輸入圖片說明">公共區域-露臺</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="請輸入圖片說明"><h6>麗江文殊設計師網紅民宿湯池別墅西院</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="請輸入圖片說明"><h6>麗江文殊設計師網紅民宿別墅東院</h6></figcaption>
        </figure>
    </div>
    <p><br></p>
    <p><b>門店信息：</b></p>
    <p>·wifi已覆蓋、24小時熱水、吹風機、一次性用品</p>
    <p>·電熱毯、壁爐、一對一管家服務等</p>
    <p><br></p>
    <p><b>商家聯繫電話：</b></p>
    <p>·地址：雲南省麗江市古城區北門坡玄天巷26號</p>
    <p>·電話：15099128722</p>`,
    html2: []
  },
  onLoad () {
      const {html} = this.data
      // 定義須要解析的特殊標籤，value不填默認是div
      parser.definedCustomTag({figure: 'div', figcaption: ''})
      const nodes = parser.getRichTextJson(html)
      console.log(nodes)
      this.setData({
        html2: nodes.children
      })
    }
})

源碼參見rich-text-parser

效果圖以及數據結構：