微信小程序中用wxParse解析富文本内容

写微信小程序的时候经常需要显示文章内容、商品详情等信息，而这些信息很多时候都是在后台用富文本编辑器写的，所以直接在微信小程序里面显示是有问题的。

而用wxParse就能很好解决这个问题。

1. 首先下载wxParse

2. 引入wxParse

3. 配置wxParse

4. 使用wxParse

   
   

   将下载好的wxParse 放到文件夹里面

   

   接下来引入wxParse.js 和wxParse.wxss

   
   

   
   

   
   

 在需要的地方引入js

const wxParse = require('../../wxParse/wxParse');
实例化使用wxParse：
var that = this;
/*** WxParse.wxParse(bindName , type, data, target,imagePadding)
 * 1.bindName绑定的数据名(必填)
 * 2.type可以为html或者md(必填)
 * 3.data为传入的具体数据(必填)
 * 4.target为Page对象,一般为this(必填)
 * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
 **/
//wxParse.wxParse('detail', 'html', data.detail, that, 5)


product.getProductDetail(id,function(result) {

  var data = result.data.data;
  //下面就是使用了
  wxParse.wxParse('detail', 'html', data.detail, that, 5)

//这里我全局引入了wxss

@import "./wxParse/wxParse.wxss";

最后在wxml里面使用：

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

效果图：