微信小程序中简单使用wxParse插件解析富文本

微信的小程序中也会出现一些带标签的数据不能直接在页面上渲染出该有的属性值。vue中实现解析富文本比较简单，直接使用v-html即可，而在小程序中有两种解析方法，分别是

rich-text

和

wxParse

,今天就主要讲讲用wxParse实现解析富文本的步骤。。。。

1.首先去github上下载我们需要的wxParse插件

网址：https://github.com/icindy/wxParse

2.在要使用的页面的js中引入WxParse模块

var WxParse = require('../../wxParse/wxParse.js'); 
//这个路径是你项目中的路径，别弄错咯
           

3.在需要是用的wxss中引入WxParse.wxss，也可以在app.wxss中引入，

引用在app.wxss中是全局的。

4.将富文本绑定给wxParse

格式为：

格式：WxParse.wxParse(参数1, 参数2, 参数3, 参数4, 参数5);
参数说明：
* 参数1.bindName绑定的数据名(必填)
* 参数2.type可以为html或者md(必填)
* 参数3.data为传入的具体数据(必填)
* 参数4.target为Page对象,一般为this(必填)
* 参数5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
           

我就自己简单写了个带标签的富文本，然后自己解析解析，

在使用页面的js文件中操作。。。

onReady(){
  var article ="<div>我喜欢邓紫棋，超级喜欢</div>"  
  var that = this; 
  WxParse.wxParse('article', 'html', article,that, 5);
 }
           

5.最后一步，就先引入引入模板再在页面上渲染就ok咯

<import src="../../wxParse/wxParse.wxml" />

<view>
 <template is="wxParse" data="{{wxParseData:article.nodes}}" />
 //这里data中article为bindName绑定的数据
</view>
           

我的效果是这样的：

就是简单的渲染了一个数据，希望可以帮助你理清思路，解决的步骤，

要想了解更加细致的步骤，可查阅：https://github.com/icindy/wxParse

最后现在是不是发现没有那么难搞了呢？嘿嘿，加油哦！！！