微信小程序使用wxParse解析渲染html代码片段

        最近项目中一个遇到需求，就是在微信小程序里，需要显示html代码片段内容，内容是通过接口读取的服务器中的富文本内容，是html代码片段，小程序默认是不支持html格式的内容显示的，会被认为是Object，无法正常的渲染出来，那我们需要显示html内容的时候，就可以通过wxParse来实现。
        首先我们在github上下载wxParse， wxParse目前虽然停止维护，但是还是能满足日常需求的，后面将介绍一下基于wxParse的，用来渲染小程序html代码片段的。为尊重原作具体请到这里查看

 

下载完之后我们需要用到目录下的wxParse文件夹，把他拷贝到我们的项目目录下　　

下面是具体的使用步骤

1.在app.wxss全局样式文件中，需要引入wxParse的样式表

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

 也可以在指定页面单独引入

2.在需要加载html内容的页面对应的js文件里引入wxParse

import wxParse from '../../wxParse/wxParse.js';

3.通过调用WxParse.wxParse方法来设置html内容

Page({
  data: {
  },
  onLoad: function () {
    var that = this;
    wx.request({
        url: '你的接口地址', 
        method: 'POST',
        data: { 你的提交数据 },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            //主要关注这里
            var htmlPart = res.data;
            WxParse.wxParse('tips', 'html', htmlPart, that,5);
        }
    })
  }
})

4.在页面中引用模板

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:tips.nodes}}"/>

        这里要注意，其它位置都是固定的写法的，只有 tips  是在调用解析时的那个第一个参数的名称，这个是依据自己定义的。按照这样这一波操作下来，应该一波就可以看到渲染的效果了，，如果行，请检查各页面的引入情况，是否成功引入，注意使用  ../../  这种方式应该时，层级关系。

        关于rich-text、web-view、WePY来实现html代码片段的渲染，大家请移步这里，这里就不做赘述了。

        

        希望对你有帮助，祝你顺利达到目的。