微信小程序使用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,可选) */
——现在的努力,只为小时候吹过的牛逼! ——