WxParse解析富文本
WxParse是专门解析后台返给我们的HTML数据的,也叫做小程序的HTML解析器
这种方式可以解析 html/markdown 两种脚本,功能很强大
缺点:在解析富文本过程中,多次调用小程序的setData()方法,对性能有一定影响。
GitHub地址:https://github.com/icindy/wxParse
解压出来后,直接复制到小程序项目的根级目录
WXML:
//引入
<import src="/wxParse/wxParse.wxml"/>
//article为JS里WxParsewxParse第一个参数
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
JS:
//引入
const WxParse = require('../../wxParse/wxParse.js');
onLoad: function (options) {
//第一个参数将成为WXML展示的数据名称
//第三个参数是要展示的数据
WxParsewxParse('article', 'html', this.data.articleHtml, this, 5);
},
WXSS:
//引入
@import "/wxParse/wxParse.wxss";
另一种解析富文本的方法,rich-text为小程序自带富文本组件,直接使用即可
rich-text富文本组件是小程序1.4.0版本后推出来的,可以通过js脚本把html解析成一定格式的nodes,然后在 rich-text 中显示。
缺点:只能解析html内容,需要做兼容处理
WXML:
//articleHtml是JS数据
<rich-text nodes="{{articleHtml}}"></rich-text>