微信小程序——富文本处理wxParse

解析单标签的方法很简单

单数据使用方法

// wxss 代码，在使用的Wxss中引入WxParse.css,可以在app.wxss
@import "/wxParse/wxParse.wxss";

// wxml 代码
<import src="你的路径/wxParse/wxParse.wxml"/>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

// js代码
//在使用的View中引入WxParse模块
var WxParse = require('../../wxParse/wxParse.js');

var article = '<div>我是HTML代码</div>';
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);

多数据循环的使用方法

官方说明：wxParse多数据循环使用方法

<!-- wxml 中的写法 -->
<block wx:for="{{announcementList}}" wx:key="*this">
    <view>【{{item.title}}】</view>
    <view class='wxParse'>
        <template is="wxParse" data="{{wxParseData:WxParseListArr[index]}}" />
    </view>
</block>

// ts/js 中的写法
announcementList.forEach((element: any, index: number) => {
    WxParse.wxParse('content' + index, 'html', element.content, this);
    if (index === announcementList.length - 1) {
        WxParse.wxParseTemArray("WxParseListArr", 'content', announcementList.length, this)
    }
});