微信小程序解析富文本

微信小程序解析富文本

我们平时做项目中遇到的解析富文本内容
我所知道的有两种方法可以实现：

1. 第一种：可以使用wxParse插件解析html
   使用方法：

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

   • 下载后将其复制到自己的小程序项目中

   • 再给他设置全局样式

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

   • 在需要调用的插件页面引入js

   var WxParse = require('../../wxParse/wxParse.js```
   - 直接在方法中使用
   ```// pages/about/about.js
   onLoad: function (options) {
   const 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,可选)*/
   var temp = WxParse.wxParse('article', 'html', data, that, 5);

},```

• 最后一步呢，就是

  <import src="../../wxParse/wxParse.wxml"/>
  <view class="content">
  <!-- 这一块是富文本 显示的内容区 -->
  <template is="wxParse" data="{{wxParseData:article.nodes}}"/>```

1. 第二种：可以使用小程序自带的富文本组件 rich-text

• 在rich-text.wxml页面中使用 rech-text 标签

  <rich-text nodes="{{nodes}}"></rich-text>```

• 可以.在rich-text.js页面中使用 绑定数据 // rich-text.js

```Page({
/**
* 页面的初始数据
*/
data: {
nodes:''
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const that = this;
},
})
```
最后的效果图展示：![在这里插入图片描述](https://img-blog.csdnimg.cn/20200808232642417.png)