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

最新推荐文章于 2024-05-22 13:54:22 发布

转载最新推荐文章于 2024-05-22 13:54:22 发布 · 326 阅读

CC 4.0 BY-SA版权

原文链接：https://github.com/csonchen/wxParse

文章标签：

本文介绍了一种用于小程序的富文本解析组件重构方案，解决了原有wxParse组件的局限性，如列表渲染、链接跳转及代码高亮等问题。通过递归组件方式，增强了对多种标签的支持，包括音频、图片、列表等，并实现了代码高亮功能。

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

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

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

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

npm install --save wx-minicomponent

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

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

npm install --save wx-minicomponent

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

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

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

原生引入：

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

npm组件引入：

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

<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
…