微信小程序富文本展示，wxParse使用

wxParse的下载地址：https://github.com/icindy/wxParse

1、上述地址中下载wxParse文件

2、 解压文件将wxParse中内容拷贝到项目中如下图所示：

3、在相应页面的.js文件中引入var wxParse = require('/wxParse/wxParse.js');

在相应页面的.wxss页面中引入@import "/wxParse/wxParse.wxss";

在相应页面的.wxml文件中引入<import src="/wxParse/wxParse.wxml"/>；具体路径根据项目修改

4、在.js文件中用到富文本的方法中，调用如下的数据绑定方法：

var that = this;

/**

*第一个参数：数据绑定的数据名称，在页面中调用时使用（必填）

*第二个参数：接收数据的类型，可选：html或md（必填）

*第三个参数：接收的数据（必填）

*第四个参数：为Page对象,一般为this（必填）

*第五个参数：图片自适应时的边距（选填）

*/

wxParse.wxParse('detail', 'html', productDetail, that, 0);

5、页面中使用直接如下：

<view style='margin:0 8px;'>

<template is="wxParse" data="{{wxParseData:detail.nodes}}"/>

</view>

里面的detail就是上面所说的第一个参数。

通过以上方法引入以后可以使用，但是我遇到以下两个问题

1）上下图片和图片之间有间距。

2）当富文本中图片本身没有居中时，在设置padding那个参数图片显示有问题。

解决办法：

针对问题1）的解决办法，找到wxParse.wxml，找到里面的<template name="wxParseImg">，修改style内容，将里面的display：inline-block改成display：block。

针对问题2）的解决办法，首先将上面说的style中的width设置保存成width:100%,同时找到wxParse.js文件将that.wxParseImgTap = wxParseImgTap这句注释。