1.把wxParse文件全部放入项目。
2.在wxml中import wxParse.wxml,并把template插入到到对应的位置上
{{title}}
{{date}}
{{time}}
3.在wxss中import wxParse.wxss，并设置样式；比如‘wxParse-image’是富文本图片转化成image组件之后的类名，‘wxParse-p’是p标签转化成view组件后设置的类名
@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;
}
4.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:"-03-01",
time:"13:20:53"
})
var article = `
微信小程序如何解析HTML富文本(使用wxParse解析富文本的demo)微信小程序如何解析HTML富文本(使用wxParse解析富文本的demo)微信小程序如何解析HTML富文本(使用wxParse解析富文本的demo)
微信小程序如何解析HTML富文本(使用wxParse解析富文本的demo)微信小程序如何解析HTML富文本(使用wxParse解析富文本的demo)微信小程序如何解析HTML富文本(使用wxParse解析富文本的demo)
近两年，小青柑的火爆有目共睹，娇小玲珑的产品形态、便携式的消费场景、柑与茶结合的时尚方式以及独特的口感和养生功效，都在顺应着目前年轻化、多元化、便携化的茶叶消费市场需求，让它成为了一大爆品。
`;
/**
* 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)
}
})
具体的API可以去GitHub上查看：/icindy/wxP...
如果文章对你有帮助，可以点个赞，或者帮忙转载，标明出处就可以，谢谢！
