1. <import src="../../wxParse/wxParse.wxml"/>

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

1. var WxParse = require('../../wxParse/wxParse.js');

完成这四步，就完美完成了，但是有得编辑器里面的图片不是绝对地址，所以会引起图片不显示的问题！

1. <!--wxml-->
2. <import src="../../../wxParse/wxParse.wxml"/>
3. <view class="view-title">{{title}}</view>
4. <view class="view-time-box">
5. <text class="view-date">{{date}}</text>
6. <text class="view-time">{{time}}</text>
7. </view>
8. <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

1. <!--wxss-->
2. @import "../../../wxParse/wxParse.wxss";
3. page{
4. background: #fff;
5. }
6. .view-title{
7. line-height: 80rpx;
8. font-size: 48rpx;
9. color:#0C0C0C;
10. overflow: hidden;
11. text-overflow: ellipsis;
12. display: -webkit-box;
13. -webkit-line-clamp: 2;
14. -webkit-box-orient: vertical;
15. max-height: 190rpx;
16. min-height: 80rpx;
17. width:690rpx;
18. padding:30rpx 30rpx 0;
19. }
20. .view-time-box{
21. height: 66rpx;
22. line-height: 66rpx;
23. font-size: 30rpx;
24. color:#999999;
25. margin-bottom: 40rpx;
26. padding:0 30rpx;
27. }
28. .view-date{
29. margin-right: 20rpx;
30. }
31. .wxParse-img{
32. margin-top:20rpx;
33. display: block;
34. position:relative;
35. top:0;
36. left:50%;
37. transform: translateX(-50%);
38. }
39. .wxParse-p{
40. text-indent: 2em;
41. margin-top:20rpx;
42. color:#0C0C0C;
43. line-height:50rpx;
44. font-size:34rpx;
45. padding:0 30rpx 30rpx;
46. text-align: justify;
47. }

1. var WxParse = require('../../../wxParse/wxParse.js');
2. Page({
3. /**
4. * 页面的初始数据
5. */
6. data: {
7. title: '',
8. date: "",
9. time: "",
10. id: ''
11. },
12. /**
13. * 生命周期函数--监听页面加载
14. */
15. onLoad: function (options) {
16. this.setData({
17. id:options.id
18. })
19. },
20. onShow: function () {
21. wx.showLoading({
22. title: '加载中...',
23. })
24. var that = this;
25. // 模拟获取数据
26. setTimeout(function () {
27. that.setData({
28. title:'侨宝柑普茶新会陈皮侨宝柑',
29. date:"2018-03-01",
30. time:"13:20:53"
31. })
32. var article = `
33. <img src="../../../imgs/index/s.png"></img>
34. <p>微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）</p>
35. <p>微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）</p>
36. <img src="../../../imgs/index/s.png"></img>
37. <p>近两年，小青柑的火爆有目共睹，娇小玲珑的产品形态、便携式的消费场景、柑与茶结合的时尚方式以及独特的口感和养生功效，都在顺应着目前年轻化、多元化、便携化的茶叶消费市场需求，让它成为了一大爆品。</p>
38. `;
39. /**
40. * WxParse.wxParse(bindName , type, data, target,imagePadding)
41. * 1.bindName绑定的数据名(必填)
42. * 2.type可以为html或者md(必填)
43. * 3.data为传入的具体数据(必填)
44. * 4.target为Page对象,一般为this(必填)
45. * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
46. */
47. WxParse.wxParse('article', 'html', article, that, 20);
48. // 更改数据、获取新数据完成
49. wx.hideLoading();
50. }, 500)
51. }
52. })