wxParse简单介绍

wxParse介绍

之前小程序富文本我们都使用，小程序的rich-text对富文本进行解析展示。

通常通过正则表达式将所有的 img 字符传标签上添加一个 style="width:100% 来实现",但是显然这是个方式不是太好。

但是会存在以下问题:

1、img等其他标签的样式难以控制等。

2、部分标签 如通过audio、video这类标签无法正常解析。

wxParse 的使用

github地址: github.com/icindy/wxPa…

1、引用wxParse模板

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

2、在小程序js中引用解析文件

   const WxParse = require('../../wxParse/wxParse.js');

3、将富文本解析成wxParse能够渲染的nodes

     WxParse.wxParse('content', 'html', content1, this, 0)
     'content': 表示你将在入门中渲染的数据
     'html'   : 传入数据的类型，支持 md  html 
     content1 : 传入的数据
     this     : 当前页面，this
     0        : 图片的边距 

4、根据wxParse的入口模板进行渲染。

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

wxParse 实现方式其实是:

1、将html字符串解析成节点树(nodes)。

2、wxParse模板中，将各个html标签转化成小程序的内置组件在小程序中进行渲染。