1. 程式人生 > >微信小程式解決富文字不支援的問題

微信小程式解決富文字不支援的問題

使用wxParse來解決

目錄下的wxParse資料夾,把他拷貝到我們的專案目錄下


假如a頁面需要顯示富文字資訊:

引入後,在要使用的頁面 a.wxml檔案裡引入

 <import src="../../wxParse/wxParse.wxml"/> //你的路徑地址
 <template is="wxParse" data="{{wxParseData:article.nodes}}"/>  //article是js中設定的bindName

在a.wxss檔案裡引入css

@import "../../wxParse/wxParse.wxss";

在a.js檔案裡:

1.先引入js :

var WxParse = require('../../wxParse/wxParse.js');
2.通過呼叫WxParse.wxParse方法來設定html內容
wx.request({
      url: '你的介面地址url',
      success: function (res) {
        console.log("連結成功")
        // console.log(res)
        var article = res.data[1].post_content;  //從介面地址獲取資料
        // var article = '<div>我是文章HTML程式碼</div>';  //測試
        console.log(article)
        WxParse.wxParse('article', 'html', article, that, 5);  //引數解析在下面註解
      },
      fail: function () {
        console.log("連結失敗")
      }
    })

註解:上面的設定引數解析:

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName繫結的資料名(必填)
* 2.type可以為html或者md(必填)
* 3.data為傳入的具體資料(必填)
* 4.target為Page物件,一般為this(必填)
* 5.imagePadding為當圖片自適應是左右的單一padding(預設為0,可選)
*/