微信小程序使用wxParse，解決圖片顯示路徑問題

 

我們經常用到發佈文章，用的是UEditor百度富文本編輯器,方便排版，存儲的也是html代碼，這樣小程序解析出來的也是排版的樣式，但是使用wxParse解析html的時候，因爲存儲的是圖片的相對路徑，所有在小程序解析的時候圖片不顯示，網上搜了好多，說當時圖片的時候在解析出來的圖片相對路徑前面加上域名，這樣也挺麻煩的，沒到圖片的地方都要判斷一下，所有我找了個簡單粗暴的方法，直接改wxParse的代碼，只需要改這一個地方就可以了。

 

另外附上小程序   wxParse的使用方法

小程序  轉換富文本編輯器的方法

先到github下載一個庫     https://github.com/icindy/wxParse

包含文件夾
   -wxParse
      --wxParse.js(必須存在)
      --html2json.js(必須存在)
      --htmlparser.js(必須存在)
      --showdown.js(必須存在)
      --wxDiscode.js(必須存在)
      --wxParse.wxml(必須存在)
      --wxParse.wxss(必須存在)
      --emojis(表情文件，可選)

在頁面引入js和css文件
在使用的View中引入Wxparse模塊
var WxParse = require('../wxParse/wxParse.js');括號裏放入你的路徑
在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "./wxParse/wxParse.wxss";   引號內放入你的路徑

接下來 我們需要顯示的wxss頁面上加  template標籤   （就是要顯示wxml頁面)
<import src="../../wxParse/wxParse.wxml"/>

<view class="wxParse">
 
     <text>{{title}}</text>
  
    <template is="wxParse" data="{{wxParseData:res.data.content.nodes}}"/>

    //這裏data中res.data.content 爲bindName
</view>

.js文件
頁面頂部引入文件
var WxParse = require('../wxParse/wxParse.js');

在監聽頁面onload寫入
let that = this
在返回成功位置(success)寫入
var temp =  WxParse.wxParse('res.data.content', 'html', res.data.content, that, 5);
that.setData({
    msg:temp
})


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