微信小程式使用wxParse,解決圖片顯示路徑問題
阿新 • • 發佈:2018-12-08
我們經常用到釋出文章,用的是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,可選) */