微信小程序使用wxParse，解决图片显示路径问题

2023-07-27 22:43:34

我们经常用到发布文章，用的是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,可选)

*/

码农公寓

相关文章