1. 程式人生 > >微信小程式使用wxParse,解決圖片顯示路徑問題

微信小程式使用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,可選) */