由于原作者仓库 wxParse 不再维护,我们项目中商品信息展示又是以wxParse这个用做富文本解析的;
于是乎,决定采用 递归Component 的方式对其进行重构一番;
原项目使用的 template
模板的方式渲染节点,存在以下问题:
节点渲染支持到12层,超出会原样输出 html
代码;
每一层级的循环模板都重复了一遍所有的可解析标签,代码十分臃肿。
li
标签不支持 ol
有序列表渲染(统一采用的是 ul
无序列表),a
标签无法实现跳转,也无法获取点击事件回调等等;
节点渲染没有绑定 key
值,一是在开发工具看到一堆的 warning
信息(看着十分难受),二是节点频繁删除添加,无法比较key值
,造成 dom
节点频繁操作。
目前该项目已经可以支持以下标签的渲染:
audio
音乐播放器的样式处理)【扩展组件】克隆 项目 代码,把 dist目录下的wxParse目录 拷贝到你的小程序组件目录下面;
在你的 page页面 对应的 json
文件引入 wxParse
组件
{
"usingComponents": {
"wxParse": "/components/wxParse/wxParse"
}
}
<wxParse nodes="{{ htmlText }}" />
npm install --save wx-minicomponent
小程序开发工具的 工具
栏找到 构建npm
,点击构建;
在页面的 json 配置文件中添加 wxParse
自定义组件的配置
{
"usingComponents": {
"wxParse": "/miniprogram_npm/wx-minicomponent/wxParse"
}
}
wxml
文件中引用 wxParse<wxParse nodes="{{ htmlText }}" />
基础的富文本组件只支持基础的标签解析,出于小程序包体积考虑,读者可以根据需要按需引入组件,打包构建。
名称 | 功能 | 构建命令 |
---|---|---|
wxAudio | 音频播放器 | npm run pack:wxAudio |
highLight | 代码块高亮显示 | npm run pack:highLight |
使用方法:
npm run pack:wxAudio
dist
目录下:npm run build
wxParse目录
和wxAudio目录
克隆到你的项目组件目录,正常引入wxParse组件即可。参数 | 说明 | 类型 | 例子 |
---|---|---|---|
nodes | 富文本字符 | String | "\<div>test\</div>" |
language | 语言 | String | 可选:"html" | "markdown" ("md") |
标签使用说明补充:
a
标签的内外链跳转根据的是 http
字符判断;
a
标签的跳转顺序为:
如果page页面有定义 handleTagATap
方法,优先执行该方法
如果page页面没有定义 handleTagATap
方法,将根据 a标签
的 href
字段判断采用内外链跳转方式,外链跳转需要在 app.json
文件中新增 自定义webview
页面配置,如下所示:
webview页面配置:
// app.json
{
"pages" [
"components/wxParse/webviewPage/webviewPage"
]
}
// app.json
{
"pages" [
"miniprogram_npm/wx-minicomponent/wxParse/webviewPage/webviewPage"
]
}
code
标签代码高亮:code
标签添加 lang
属性,默认值是javascript
;支持 javascript|typescript|css|xml|sql|markdown|c++|c
可选值
支持高亮解析结构如下:
<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 | \ 跳转到百度 \ \ 站内跳转 \ |
code | \ const name = "csonchen"; <\/code> |
p | |
div | |
span | |
li | |
ul | |
ol | |
img | |
button | |
hr | |
h1 | |
h2 | |
h3 | |
h4 | |
table | |
tr | |
th | |
td | |
.... |
参数 | 说明 | 类型 | 例子 |
---|---|---|---|
codeText | 原始高亮代码字符 | String | "var num = 10;" |
language | 代码语言类型 | String | 可选值:"javascript/typescript/css/xml/sql/markdown/c++/c" |
提示:如果是html语言,language的值为xml
参数 | 说明 | 类型 | 例子 |
---|---|---|---|
title | 标题 | String | "test" |
desc | 副标题 | String | "sub test" |
src | 音频地址 | String |
2021-5-17:feat
将wxAudio音频播放器
和highLight代码块高亮组件
抽离出来作为扩展组件,可根据需要自行构建打包
2021-3-26: feat
修复图片二次请求加载的bug,优化图片懒加载 + 展示渐变动画
2021-2-6: fix
修复单层元素(如:img
标签)渲染时候获取不到组件实例唯一id,导致大图预览失败的bug
2021-1-19:
fix
修复 page页面
多 wxParse组件
实例绑定唯一性的bug
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
迁移utils目录到wxParse目录下;
富文本增加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
增加图片预览功能
image
标签加载,避免出现一闪而过,优化加载体验;template
方式渲染(因为递归组件会引入组件生命周期,节点过多可能对性能有影响);wxParse
项目中的 issue