微信小程序如何解析HTML標籤

最近在項目中遇到了獲取的數據是html標籤基於小程序的但是網上提供的wxParse太過於麻煩了,那麼如何簡單的解決呢?
這裏微信小程序文檔給我們提供了一種 rich-text
如何使用??
wxml代碼

<rich-text nodes="{{content}}"></rich-text>
**js代碼**

// pages/details/details.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    obj:{},
    content:''
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    //console.log(options.id)
    wx.request({
      url: 'https://api.it120.cc/sslcsq/shop/goods/detail?id='+options.id,
      success:(res)=>{
        // 
        let str=res.data.data.content;
        // 
        console.log(res.data.data)
        this.setData({
          obj:res.data.data,
          content:str.replace(/\<img/g,'<img style="width:100%"')
          //這裏吧需要的正則替換一下,解決樣式問題
        })
      }
    })

   
  },  

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章