小程序富文本解析

一共有两种方法：

第一种：使用小程序组件rich-text

wxml:

 <view class="neirong">
      <rich-text nodes="{{detail.content}}"></rich-text>
 </view>

js:

Page({
    data: {
        detail:''
    },
    onLoad: function (options) {
      this.getDetail()
    },    
    getDetail() {
     var data = {
      id: this.data.id,
      userId: this.data.user.id
     }
    post(接口名称,'POST',data).then(res => {
      if(res.data.content){
         // 对返回的富文本内容里面的图片进行正则转换
        res.data.content = res.data.content.replace(/<img/gi, "<img class='richImg'  style='height:auto;max-width:100%;'");
      }
      this.setData({
        detail: res.data
      })
    })
  },

})

在app.wxss中添加样式：

.rich-text .richImg{
  max-height: 100%;
  vertical-align: middle;
  height: auto!important;
  width: auto!important; 
}

第二种： 使用wxParse文件进行富文本解析：

1、首先需要在项目根目录下添加wxParse文件

2、在需要使用的页面的wxml的头部引入该文件：

<!-- 引入富文本解析文件 -->
<import  src="../../wxParse/wxParse.wxml" />
 <!-- 富文本解析 -->
  <view class="content">
    <template is="wxParse" data="{{wxParseData:article.nodes}}" /> 
  </view>

3、在wxss页面引入样式文件：

/* <!-- 引入富文本解析文件 --> */
@import '../../wxParse/wxParse.wxss';

4、在js中使用：

wxParse中的方法参数解释：

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

// <!-- 引入富文本解析文件 -->
const WxParse = require('../../wxParse/wxParse.js');
page({
    data:{
        news:''
    },
    onLoad: function (options) {
     this.setData({
      id: options.id
     })
     this.getDetail()
   },
   getDetail() {
    post(接口名称,'POST',{id:this.data.id}).then(res => {
      this.setData({
        news:res.data
      })
      WxParse.wxParse('article', 'html', res.data.content, this, 5); 
    })
   },
})

最后就可以在微信小程序中嵌入html了