# wxParse —— 微信小程序富文本解析
![](https://img.shields.io/github/stars/csonchen/wxParse?style=flat-square)
![](https://img.shields.io/github/forks/csonchen/wxParse?style=flat-square)
![](https://img.shields.io/github/license/csonchen/wxParse?style=flat-square)
## 原因
由于原作者仓库 [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
<wxParse nodes="{{ htmlText }}" />
```
### 2. npm组件使用方法
- 安装组件
```shell
npm install --save wx-minicomponent
```
- 小程序开发工具的 `工具` 栏找到 `构建npm`,点击构建;
- 在页面的 json 配置文件中添加 `wxParse` 自定义组件的配置
```json
{
"usingComponents": {
"wxParse": "/miniprogram_npm/wx-minicomponent/wxParse"
}
}
```
- `wxml` 文件中引用 wxParse
```xml
<wxParse nodes="{{ htmlText }}" />
```
## 组件扩展
基础的富文本组件只支持基础的标签解析,出于小程序包体积考虑,读者可以根据需要按需引入组件,打包构建。
名称|功能|构建命令
:--|:--|:--
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|"\<div\>test\</div\>"
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
<pre>
<code lang="javascript">
const name = 'csonchen'
</code>
</pre>
```
**受信任的节点**
节点|例子
:--|:--
audio|\<audio title="我是标题" desc="我是小标题" src="https://media.lycheer.net/lecture/25840237/5026279_1509614610000.mp3?0.1" /\>
a|\<a href="https://www.baidu.com"> 跳转到百度 \</a> </br> \<a href="/pages/highLightPage/highLightPage"> 站内跳转 \</a>
code| \<code lang="javascript"> const name = "csonchen"; <\/code>
p|
div|
span|
li|
ul|
ol|
img|
button|
hr|
h1|
h2|
h3|
h4|
table|
tr|
th|
td|
....|
### highLight:代码高亮解析组件
参数|说明|类型|例子
:--|:--|:--|:--
codeText|原始高亮代码字符|String|"var num = 10;"
language|代码语言类型|String|可选值:"javascript/typescript/css/xml/sql/markdown/c++/c"
**提示:如果是html语言,language的值为xml**
### wxAudio:仿微信公众号文章音频播放组件
参数|说明|类型|例子
:--|:--|:--|:--
title|标题|String|"test"
desc|副标题|String|"sub test"
src|音频地址|String|
## 示例展示
1. **富文本解析**
- **html文本解析实例**
<left>
<figure>
<img src="./static/code.png" style="height: 500px"/>
<img src="./static/wxParse.gif" style="height: 500px"/>
</figure>
</left>
- **markdown文本解析实例**
<left>
<figure>
<img src="./static/md.png" style="height: 500px" />
</figure>
</left>
2. **代码高亮(highLight组件)**
<left>
<figure>
<img src="./static/wxHigh.gif" style="height: 500px" />
</figure>
</left>
## 更新历史
- 2021-5-17:**`feat`** 将`wxAudio音频播放器`和`highLight代码块高亮组件`抽离出来作为扩展组件,可根据需要自行构建打包
- 2021-3-26: **`feat`** 修复图片二次请求加载的bug,优化图片懒加载 + 展示渐变动画
- 2021-2-6: **`fix`** 修复单层元素(如:`img`标签)渲染时候获取不到组件实例唯一id,导致大图预览失败的bug
- 2021-1-19:
1. **`fix`** 修复 `page页面` 多 `wxParse组件` 实例绑定唯一性的bug
2. **`feat`** 新增 `hr`标签解析实现
- 2020-12-10:**`fix`** 修复页面跳转之后图片预览大图失效的bug
- 2020-12-8: **`feat`** 新增 `code` 标签的代码高亮功能,并修复解析语言注册失败的bug
- 2020-12-7:**`fix`** 修复 `code` 标签解析错误以及换行符被替换成空字符的bug
- 2020-8-17:**`feat`** 增加设置image标签的width,height属性以及内联样式属性设置
- 2020-8-10: **`feat`** 文本节点添加选中复制功能
- 2020-8-6:**`fix`** table,tr,td等相关元素标签去掉style样式内嵌,避免表格样式错乱问题
- 2020-8-5: **`feat`** 新增支持a标签的内外链跳转功能,并支持page页面点击方法回调控制
- 2020-6-18:**`fix`** 修复table渲染错位和image图片在个别情况无法预览的问题
- 2020-5-31: **`reflator`**
1. 迁移utils目录到wxParse目录下;
2. 富文本增加markdown文本解析支持;
- 2020-5-21: **`reflator`** 富文本组件image标签添加loading过渡态,优化图片加载体验
- 2020-5-17: **`doc`** 完善组件参数文档,增加wxParse对audio标签标题,副标题的解析功能
- 2020-5-13: **`feat`** 增加css,html,ts,sql,markdown代码高亮提示支持
- 2020-5-6:**`feat`** 增加图片预览功能
## TODO
- [x] 图片占位图优化,优化 `image`标签加载,避免出现一闪而过,优化加载体验;
- [ ] 编写插件,小程序可以通过插件方式引入;
- [ ] 支持 `template` 方式渲染(因为递归组件会引入组件生命�
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序富文本解析.zip
共106个文件
js:49个
json:16个
wxss:14个
需积分: 1 0 下载量 45 浏览量
2024-01-07
21:06:53
上传
评论
收藏 1.61MB ZIP 举报
温馨提示
小程序,轻量级设计,无需下载安装,即开即用,释放手机内存压力,轻松应对日常各种需求。无论是购物支付、信息查询,还是休闲娱乐、生活服务,我们都一应俱全,满足您的多元化需求。 丰富功能,贴心体验。无论您是追求效率的工作达人,还是热爱生活的品质人群,在这里都能找到属于您的独特价值。指尖轻触,尽享智能科技带来的美好生活。
资源推荐
资源详情
资源评论
收起资源包目录
微信小程序富文本解析.zip (106个子文件)
wxParse.gif 971KB
wxHigh.gif 372KB
playing.gif 4KB
playing.gif 4KB
.gitignore 14B
index.html 634B
showdown.js 70KB
highlight.code.js 35KB
showdown.js 29KB
sql.js 14KB
highlight.code.js 12KB
sql.js 12KB
html2json.js 10KB
c-like.js 9KB
wxDiscode.js 7KB
javascript.js 6KB
wxParse.js 6KB
typescript.js 5KB
htmlparser.js 5KB
richTextPage.js 5KB
wxDiscode.js 5KB
c-like.js 4KB
xml.js 4KB
html2json.js 4KB
css.js 3KB
regex.js 3KB
javascript.js 3KB
typescript.js 3KB
htmlparser.js 3KB
markdown.js 2KB
wxAudio.js 2KB
wxParse.js 2KB
highLightPage.js 2KB
xml.js 2KB
util.js 2KB
css.js 1KB
index.js 1KB
wxAudio.js 1KB
markdown.js 1KB
app.js 1KB
regex.js 1KB
gulpfile.js 979B
highLight.js 928B
config.js 763B
util.js 586B
index.js 562B
c.js 558B
highLight.js 544B
index.js 539B
cpp.js 366B
webviewPage.js 224B
cpp.js 173B
c.js 116B
webviewPage.js 103B
index.js 8B
package-lock.json 130KB
project.config.json 2KB
package.json 970B
app.json 405B
sitemap.json 191B
highLight.json 87B
highLight.json 87B
highLightPage.json 86B
richTextPage.json 80B
wxParse.json 75B
wxParse.json 75B
wxAudio.json 48B
wxAudio.json 48B
index.json 30B
webviewPage.json 27B
webviewPage.json 27B
LICENSE 1KB
README.md 8KB
README.md 6KB
.nojekyll 0B
demo.png 84KB
md.png 61KB
code.png 14KB
highlight.png 13KB
pause.png 1KB
pause.png 1KB
wxParse.wxml 7KB
wxParse.wxml 7KB
highLightPage.wxml 888B
wxAudio.wxml 691B
wxAudio.wxml 691B
richTextPage.wxml 421B
index.wxml 363B
highLight.wxml 83B
highLight.wxml 83B
webviewPage.wxml 26B
webviewPage.wxml 26B
wxParse.wxss 4KB
wxParse.wxss 4KB
app.wxss 1KB
wxAudio.wxss 1KB
rainbow.wxss 980B
wxAudio.wxss 837B
rainbow.wxss 768B
highLight.wxss 768B
共 106 条
- 1
- 2
资源评论
极致人生-010
- 粉丝: 3293
- 资源: 3077
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功