对于开发一款微信小程序来说，很多程序人员已经知道如何去做了，但是对于在小程序中添加解析HTML富文本这个问题其实很多程序人员还是一知半解，那么下面就由专业的微信小程序开发公司燚轩科技来为大家分析解答一下吧。

在wxss中import wxParse.wxss，并设置样式；比如‘wxParse-image’是富文本图片转化成image组件之后的类名，‘wxParse-p’是p标签转化成view组件后设置的类名：
<!--wxss-->  
@import "../../../wxParse/wxParse.wxss";  
page{  
  background: #fff;  
}  
.view-title{  
  line-height: 80rpx;  
  font-size: 48rpx;  
  color:#0C0C0C;  
  overflow: hidden;  
  text-overflow: ellipsis;  
  display: -webkit-box;  
  -webkit-line-clamp: 2;  
  -webkit-box-orient: vertical;  
  max-height: 190rpx;  
  min-height: 80rpx;  
  width:690rpx;  
  padding:30rpx 30rpx 0;  
}  
.view-time-box{  
  height: 66rpx;  
  line-height: 66rpx;  
  font-size: 30rpx;  
  color:#999999;  
  margin-bottom: 40rpx;  
  padding:0 30rpx;  
}  
.view-date{  
  margin-right: 20rpx;  
}  
.wxParse-img{  
  margin-top:20rpx;  
  display: block;  
  position:relative;  
  top:0;  
  left:50%;  
  transform: translateX(-50%);  
}  
.wxParse-p{  
  text-indent: 2em;  
  margin-top:20rpx;  
  color:#0C0C0C;  
  line-height:50rpx;  
  font-size:34rpx;  
  padding:0 30rpx 30rpx;  
  text-align: justify;  
}  
js文件配置如下
var WxParse = require('../../../wxParse/wxParse.js');  
Page({  
  
  /** 
   * 页面的初始数据 
   */  
  data: {  
    title: '',  
    date: "",  
    time: "",  
    id: ''  
  },  
  
  /** 
   * 生命周期函数--监听页面加载 
   */  
  onLoad: function (options) {  
    this.setData({  
      id:options.id  
    })  
  },  
  onShow: function () {  
    wx.showLoading({  
      title: '加载中...',  
    })  
    var that = this;  
  
    // 模拟获取数据  
    setTimeout(function () {  
      that.setData({  
        title:'侨宝柑普茶新会陈皮侨宝柑',  
        date:"2018-03-01",  
        time:"13:20:53"  
      })  
      var article = `  
        <img src="../../../imgs/index/s.png"></img>  
    <p>微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）</p>  
    <p>微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）</p>  
        <img src="../../../imgs/index/s.png"></img>  
    <p>近两年，小青柑的火爆有目共睹，娇小玲珑的产品形态、便携式的消费场景、柑与茶结合的时尚方式以及独特的口感和养生功效，都在顺应着目前年轻化、多元化、便携化的茶叶消费市场需求，让它成为了一大爆品。</p>  
      `;  
      /** 
      * 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('article', 'html', article, that, 20);  
        
      // 更改数据、获取新数据完成  
      wx.hideLoading();  
    }, 500)  
  }  
}) 

关于如何在微信小程序中解析HTML这个问题就为大家解答到这里了，如果还存在不理解的地方可以留言咨询。