微信小程序使用wxParse解析富文本编辑器内容

需求概要

后端内容是富文本编辑器（例如tinymce）输入的，需要在微信小程序中显示，如果只是想展示的话可以用微信小程序官方自带的rich-text标签，但是该标签不支持Markdown解析，也无法预览图片，在渲染能力、自定义样式、事件绑定这块不如wxParse，但性能上和维护性方面比wxParse要好，wxparse目前是不维护的状态，下面将演示如何实现通过wxParse插件解析html内容。

下载插件

打开以下地址，把项目下载下载下来。

https://github.com/icindy/wxParse

解压文件

解压压缩包，找到wxPrase文件夹。

把wxParse目录里的文件拷贝到自己项目里面。（emojis文件夹可以不用拷贝）

引入wxParse

1. 在对应页面的Js文件中引入

//reuquire里面的参数路径根据自己的实际路径来
var WxParse = require('../../../lib/wxParse/wxParse.js');

WxParse.wxParse('goodsDetail','html',res.data.content,this);

关于wxParse.wxParse的参数解析

必填参数：

• bindName：代表绑定的变量名，用于在wxml中引用解析后的内容，名字可以自定义，但是要和wxml中使用的保持一致即可。
• type：代表需要解析的内容类型，可以填html或md（markdown），html代表解析Html字符串，md（markdown）代表解析Markdown文本（需要引入Markdown解析库）。
• data：代表需要解析的原始内容，可以是HTML或Markdown字符串，这里取的是后台接口中取出数据里面的富文本内容属性。
• that：代表当前页面的this对象，用于数据绑定，一般填this即可。

可选参数：

• imagePadding：类型是Number，代表图片的内边距（单位：px），用于调整图片显示的边距。默认值是0。
• showImg：类型是Boolean，代表是否显示图片，默认是true。
• enablePreview：类型是Boolean，代表是否启用图片预览，默认值是true。

2. 在对应页面的wxss文件中引入

//路径根据自己的实际路径来
@import "../../../lib/wxParse/wxParse.wxss";

3. 在对应页面的wxml中引用解析结果

//该段代码放在你要显示html内容的地方，goodsDetail是绑定的变量名，名字要和前面js中定义的一致
//src后面的路径根据自己的实际路径来。
<view class="detail">
  <import src="/lib/wxParse/wxParse.wxml"/>
  <template is="wxParse" data="{{wxParseData:goodsDetail.nodes}}"/>
</view>

图片展示效果

预览图片