小程序解析html富文本插件wxParse配制全面指南

第一步：下载wxParse

下载地址：https://github.com/icindy/wxParse

点击下载

压缩包包含的文件，【红框文件】需要拷贝到小程序根目录

第二步：使用教程

官网教程

（原本想说的，还是算了，如果想看的直接去作者：https://github.com/icindy/wxParse 这里看就行了！我看了这个文档，竟然进了一次坑！直接晒我的教程吧！）

我的教程

第一步：配制xx.wxml文件（配制到你用到的页面中）

 

[html]  view plain  copy

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

第二步：配制xx.wxss文件（配制到你用到的页面中）

[html]  view plain  copy

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

第三步：配制xx.js文件（配制到你用到的页面中）

头部引用 

[html]  view plain  copy

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

onLoad()方法里使用

article_content:WxParse.wxParse('article_content', 'html', res.data.article_content, that, 5)

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

第四步：xx.wxml文件里引用（引用到你用到的页面）

[html]  view plain  copy

1. <view><template is="wxParse" data="{{wxParseData:content.nodes}}" /></view>  

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

图片不显示问题

修改文件【html2json.js】

代码所在位置

这里的【server_url】就是指你的域名，我是直接在顶部【 ver】了一个变量【server_url】赋值的域名地址，所以你看到的这块代码出现了【server_url】！

1.把wxParse文件全部放入项目。

2.在wxml中import wxParse.wxml,并把template插入到到对应的位置上

[html]  view plain  copy

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}}"/>  

3.在wxss中import wxParse.wxss，并设置样式；比如‘wxParse-image’是富文本图片转化成image组件之后的类名，‘wxParse-p’是p标签转化成view组件后设置的类名

[css]  view plain  copy

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. }  

4.js

[javascript]  view plain  copy

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