# wxParse
**Repository Path**: cd0281/wxParse
## Basic Information
- **Project Name**: wxParse
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-24
- **Last Updated**: 2025-12-24
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# wxParse —— 微信小程序富文本解析
## 原因
由于原作者仓库 [wxParse](https://github.com/icindy/wxParse) 不再维护，我们项目中商品信息展示又是以wxParse这个用做富文本解析的；
于是乎，决定采用 **递归Component** 的方式对其进行重构一番；
原项目使用的 `template` 模板的方式渲染节点，存在以下问题：
1. 节点渲染支持到12层，超出会原样输出 `html` 代码；
2. 每一层级的循环模板都重复了一遍所有的可解析标签，代码十分臃肿。
3. `li `标签不支持 `ol` 有序列表渲染（统一采用的是 `ul` 无序列表），`a`标签无法实现跳转，也无法获取点击事件回调等等；
4. 节点渲染没有绑定 `key` 值，一是在开发工具看到一堆的 `warning`信息（看着十分难受），二是节点频繁删除添加，无法比较`key值`，造成 `dom` 节点频繁操作。
## 功能标签
目前该项目已经可以支持以下标签的渲染：
- [x] audio标签（可自行更换组件样式，暂时采用微信公众号文章的`audio`音乐播放器的样式处理）**【扩展组件】**
- [x] code标签 **【扩展组件】**
- [x] video标签
- [x] table标签
- [x] ul标签
- [x] ol标签
- [x] li标签
- [x] a标签
- [x] img标签
- [x] video标签
- [x] br标签
- [x] button标签
- [x] h1, h2, h3, h4标签
- [x] 文本节点
- [x] hr标签
- [x] 其余块级标签
- [x] 其余行级标签
## 使用
### 1. 原生组件使用方法
- 克隆 [项目](https://github.com/csonchen/wxParse) 代码，把 **dist目录下的wxParse目录** 拷贝到你的小程序组件目录下面;
- 在你的 **page页面** 对应的 `json` 文件引入 `wxParse` 组件
```json
{
"usingComponents": {
"wxParse": "/components/wxParse/wxParse"
}
}
```
- 组件调用
```xml
```
### 2. npm组件使用方法
- 安装组件
```shell
npm install --save wx-minicomponent
```
- 小程序开发工具的 `工具` 栏找到 `构建npm`，点击构建；
- 在页面的 json 配置文件中添加 `wxParse` 自定义组件的配置
```json
{
"usingComponents": {
"wxParse": "/miniprogram_npm/wx-minicomponent/wxParse"
}
}
```
- `wxml` 文件中引用 wxParse
```xml
```
## 组件扩展
基础的富文本组件只支持基础的标签解析，出于小程序包体积考虑，读者可以根据需要按需引入组件，打包构建。
名称|功能|构建命令
:--|:--|:--
wxAudio | 音频播放器 | npm run pack:wxAudio
highLight | 代码块高亮显示 | npm run pack:highLight
**使用方法：**
1. 需要引入音频播放器组件，执行命令:
```shell
npm run pack:wxAudio
```
2. 执行构建压缩命令，打包到 `dist` 目录下：
```shell
npm run build
```
3. 将dist目录下的`wxParse目录`和`wxAudio目录`克隆到你的项目组件目录，正常引入wxParse组件即可。
## 参数文档
### wxParse：富文本解析组件
参数|说明|类型|例子
:--|:--|:--|:--
nodes|富文本字符|String|"\test\"
language|语言|String| 可选："html" \| "markdown" ("md")
**标签使用说明补充：**
1. `a` 标签的内外链跳转根据的是 `http` 字符判断；
2. `a` 标签的跳转顺序为：
- 如果page页面有定义 `handleTagATap` 方法，优先执行该方法
- 如果page页面没有定义 `handleTagATap` 方法，将根据 `a标签` 的 `href` 字段判断采用内外链跳转方式，外链跳转需要在 `app.json` 文件中新增 `自定义webview` 页面配置，如下所示：
**webview页面配置：**
1. 原生webview页面配置：
```json
// app.json
{
"pages" [
"components/wxParse/webviewPage/webviewPage"
]
}
```
2. npm 包webview配置：
```json
// app.json
{
"pages" [
"miniprogram_npm/wx-minicomponent/wxParse/webviewPage/webviewPage"
]
}
```
3. `code` 标签代码高亮：
- `code` 标签添加 `lang`属性，默认值是`javascript` ；支持 `javascript|typescript|css|xml|sql|markdown|c++|c` 可选值
- 支持高亮解析结构如下：
```html
const name = 'csonchen'
```
**受信任的节点**
节点|例子
:--|:--
audio|\