微信小程序解析html标签 wxParse插件

这里是针对后端输出内容，也就是后台使用文本编辑器传的内容，因为编辑器都会带上各种标签，在小程序展示的时候就需要去做解析，这里我们用wxParse插件。1652336561975854.rar

解压后直接放根目录就行，暂时不用修改任何文件。

wxml引用方法

<!-- wxml文件引用 -->
<import src="../../wxParse/wxParse.wxml" />
<!-- 正文展示 -->
<view class="content">
<template is="wxParse" data="{{wxParseData:article.nodes}}" />
</view>

js引用

// js文件引用
var WxParse = require('../../wxParse/wxParse.js');
/*方法调用
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* bindName绑定的数据名(必填)
* type可以为html或者md(必填)
* data为传入的具体数据(必填)
* target为Page对象,一般为this(必填)
* imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var content = WxParse.wxParse('article', 'html', data, this, 5);

图片显示问题：html2json.js

就是我们在网页后台编辑器里面的图片如果上传的时候采用了相对路径，在wxparse里就不能正常显示，这里我们需要对html2json.js文件进行修改一下就行了，代码如下：

//对img添加额外数据
if (node.tag === 'img') {
node.imgIndex = results.images.length;
// 这里增加个判断，因为数据中有可能有本地图片，也可能会有网络图片
var ishttp = node.attr.src.indexOf("http");
if (ishttp == 0) {
var imgUrl = node.attr.src;
}
if (ishttp == -1) {
var imgUrl = "这里填写您的域名" + node.attr.src;
}
if (imgUrl[0] == '') {
imgUrl.splice(0, 1);
}
imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);
node.attr.src = imgUrl;
node.from = bindName;
results.images.push(node);
results.imageUrls.push(imgUrl);
}