微信小程序/支付宝小程序 WxParse解析富文本（html）代

转自：https://www.cnblogs.com/wesky/p/8066233.html

一、下载https://github.com/icindy/wxParse

image.png

二、复制到小程序utils目录下

image.png

三、在要使用的目标文件中

具体路径根据目标文件定，当前目标文件在pages - news - detail

3.1、在目标文件js中引入
var WxParse = require('../../../utils/wxParse/wxParse.js');

测试代码：

onLoad: function (e) {
    var article = '<div>我是HTML代码<img src="http://image.chunshuitang.com/goods/401078.jpg"></img></div>';
    WxParse.wxParse('article', 'html', article, that, 5);   // 实例化对象
         /**
            * WxParse.wxParse(bindName , type, data, target,imagePadding)
            * 1.bindName绑定的数据名(必填)
            * 2.type可以为html或者md(必填)
            * 3.data为传入的具体数据(必填)
            * 4.target为Page对象,一般为this(必填)
            * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
          */
  }, 

3.2、在目标文件wxml中引入

<import src="../../../utils/wxParse/wxParse.wxml" />
  <view class="content">
      <template is="wxParse" data="{{wxParseData:document.nodes}}" />
  </view>

3.3、在目标文件wxss中引入
@import "../../../utils/wxParse/wxParse.wxss";

重点还需要额外针对view写样式

.m-con .content view{
  text-indent: 2em;
}
.m-con .content{
  padding: 30rpx;
  font-size: 26rpx;
  line-height: 48rpx;
  color: #666;
}

已将p标签等识别成view

image.png
image.png