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

小程序解析html富文本插件wxParse配制全面指南，这里遇见的各种奇葩问题都将会得到解决，手把手，菜鸟变大神！

第一步：下载wxParse

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

点击下载

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

第二步：使用教程

官网教程

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

我的教程

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

 

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

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

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

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

头部引用 

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文件里引用（引用到你用到的页面）

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

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

图片不显示问题

修改文件【html2json.js】

代码所在位置

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

【完！】