微信小程序如何解析HTML富文本

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

2.在wxml中import wxParse.wxml,并把template插入到到对应的位置上
<!--wxml-->
<import src="../../../wxParse/wxParse.wxml"/>
<view class="view-title">{{title}}</view>
<view class="view-time-box">
<text class="view-date">{{date}}</text>
<text class="view-time">{{time}}</text>
</view>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

3.在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;
}

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