微信小程序--富文本解析

下載並把wxParse放到小程序的目錄中
下載地址 https://github.com/icindy/wxParse

把wxParse放在與page同一級目錄

這裏寫圖片描述
wxParse裏的emojis包是可要可不要的。

1.引用wxParse

1)在wxml中

<import src="../../wxParse/wxParse.wxml" />
<view class="wxParse">
  <template is="wxParse" data="{{wxParseData:article.nodes}}" />
</view>

2)在wxss中

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

3)在js中

var WxParse = require('../../wxParse/wxParse.js');
const app = getApp()
Page({
    data: {  },
    onLoad: function (options) {
            var that = this
            wx.request({
                url: app.globalData.about,
                method: 'POST',
                header: {"Content-Type": "application/x-www-form-urlencoded"},
                data: {   },
                success: function (res) {
                    console.log(res)
                    that.setData({
                    article: WxParse.wxParse('article', 'html', res.data.content, that, 5)
        })
      }
    })
  })

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName綁定的數據名(必填)
* 2.type可以爲html或者md(必填)
* 3.data爲傳入的具體數據(必填)
* 4.target爲Page對象,一般爲this(必填)
* 5.imagePadding爲當圖片自適應是左右的單一padding(默認爲0,可選)
*/

如果這樣子引用,在解析圖片時圖片解析不出來,Console裏報找不到該圖片的錯誤,按照下面步驟配置域名:

1.修改wxParse包裏的html2json.js文件

這裏寫圖片描述

2.添加域名

這裏寫圖片描述
按照以上配置圖片就可以顯示出來了。

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