推荐项目：微信小程序富文本解析-wxParse

由于原作者仓库 wxParse 不再维护，我们项目中商品信息展示又是以wxParse这个用做富文本解析的；

于是乎，决定采用 递归Component 的方式对其进行重构一番；

原项目使用的 template 模板的方式渲染节点，存在以下问题：

节点渲染支持到12层，超出会原样输出 html 代码；
每一层级的循环模板都重复了一遍所有的可解析标签，代码十分臃肿。
li标签不支持 ol 有序列表渲染（统一采用的是 ul 无序列表），a标签无法实现跳转，也无法获取点击事件回调等等；
节点渲染没有绑定 key 值，一是在开发工具看到一堆的 warning信息（看着十分难受），二是节点频繁删除添加，无法比较key值，造成 dom 节点频繁操作。

代码语言：javascript复制

npm install --save wx-minicomponent

代码语言：javascript复制

{
  "usingComponents": {
    "wxParse": "/components/wxParse/wxParse"
  }
}

代码语言：javascript复制

<wxParse nodes="{{ htmlText }}" />

代码语言：javascript复制

npm install --save wx-minicomponent

代码语言：javascript复制

{
  "usingComponents": {
    "wxParse": "/miniprogram_npm/wx-minicomponent/wxParse"
  }
}

代码语言：javascript复制

<wxParse nodes="{{ htmlText }}" />

提示：详细步骤可以参考小程序的npm使用文档

原生引入：

代码语言：javascript复制

{
  "usingComponents": {
    "highLight": "/components/highLight/highLight"
  }
}

npm组件引入：

代码语言：javascript复制

{
  "usingComponents": {
    "highLight": "/miniprogram_npm/wx-minicomponent/highLight"
  }
}

代码语言：javascript复制

<highLight codeText="{{codeText}}" />

参数	说明	类型	例子
nodes	富文本字符	String	“<div>test</div>”
language	语言	String	可选：“html” \| “markdown” (“md”)

受信任的节点

节点	例子
audio	<audio title=“我是标题” desc=“我是小标题” src=“https://media.lycheer.net/lecture/25840237/5026279_1509614610000.mp3?0.1” />
a	<a href=“www.baidu.com”>跳转到百度</a>
p
div
span
li
ul
ol
img
button
h1
h2
h3
h4
…