亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

小程序如何實現rich-text對富文本支持

發布時間:2021-07-06 10:24:52 來源:億速云 閱讀:129 作者:小新 欄目:web開發

這篇文章給大家分享的是有關小程序如何實現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&nbsp;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="請輸入圖片說明"><h7>麗江文殊設計師網紅民宿大床房</h7></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="請輸入圖片說明"><h7>麗江文殊設計師網紅民宿大床房</h7></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="請輸入圖片說明"><h7>麗江文殊設計師網紅雙床房</h7></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="請輸入圖片說明"><h7>麗江文殊設計師網紅大床房(可觀古城全景)</h7>
      </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="請輸入圖片說明"><h7>麗江文殊設計師網紅大床房(可觀古城全景)</h7>
      </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="請輸入圖片說明"><h7>麗江文殊設計師網紅復式星空房(可觀古城全景)</h7>
      </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="請輸入圖片說明"><h7>麗江文殊設計師網紅民宿別墅東院</h7></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="請輸入圖片說明"><h7>餐廳</h7></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="請輸入圖片說明"><h7>公共區域</h7></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="請輸入圖片說明"><h7>公共區域</h7></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="請輸入圖片說明"><h7>麗江文殊設計師網紅民宿湯池別墅西院</h7></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="請輸入圖片說明"><h7>麗江文殊設計師網紅民宿別墅東院</h7></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對富文本支持

感謝各位的閱讀!關于“小程序如何實現rich-text對富文本支持”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

平南县| 阿克陶县| 陇西县| 万全县| 开鲁县| 专栏| 绥江县| 宾阳县| 鄂托克旗| 孝昌县| 涞水县| 临邑县| 孟连| 六安市| 星子县| 比如县| 青冈县| 天全县| 金川县| 类乌齐县| 桓仁| 皋兰县| 科尔| 疏附县| 来宾市| 大竹县| 乳山市| 扶沟县| 闻喜县| 永宁县| 当阳市| 库伦旗| 揭阳市| 南汇区| 自贡市| 兴山县| 塔城市| 如东县| 江门市| 罗城| 苏尼特右旗|