小程序富文本解析
wxParse
微信小程序富文本解析
原因
由于原作者仓库 wxParse 不再维护,我们项目中商品信息展示又是以wxParse这个用做富文本解析的;
于是乎,决定采用 递归Component 的方式对其进行重构一番;
原项目使用的 [代码]template[代码] 模板的方式渲染节点,存在以下问题:
节点渲染支持到12层,超出会原样输出 [代码]html[代码] 代码;
每一层级的循环模板都重复了一遍所有的可解析标签,代码十分臃肿。
[代码]li[代码]标签不支持 [代码]ol[代码] 有序列表渲染(统一采用的是 [代码]ul[代码] 无序列表),[代码]a[代码]标签无法实现跳转,也无法获取点击事件回调等等;
节点渲染没有绑定 [代码]key[代码] 值,一是在开发工具看到一堆的 [代码]warning[代码]信息(看着十分难受),二是节点频繁删除添加,无法比较[代码]key值[代码],造成 [代码]dom[代码] 节点频繁操作。
功能标签
目前该项目已经可以支持以下标签的渲染:
audio标签(可自行更换组件样式,暂时采用微信公众号文章的[代码]audio[代码]音乐播放器的样式处理)
ul标签
ol标签
li标签
a标签
img标签
video标签
br标签
button标签
h1, h2, h3, h4标签
文本节点
其余块级标签
其余行级标签
支持 npm包 引入
[代码]npm install --save wx-minicomponent
[代码]
使用
原生组件使用方法
克隆 项目 代码,把 components目录 拷贝到你的小程序根目录下面;
在你的 page页面 对应的 [代码]json[代码] 文件引入 [代码]wxParse[代码] 组件
[代码]{
"usingComponents": {
"wxParse": "/components/wxParse/wxParse"
}
}
[代码]
组件调用
[代码]<wxParse nodes="{{ htmlText }}" />
[代码]
npm组件使用方法
安装组件
[代码]npm install --save wx-minicomponent
[代码]
小程序开发工具的 [代码]工具[代码] 栏找到 [代码]构建npm[代码],点击构建;
在页面的 json 配置文件中添加 [代码]wxParse[代码] 自定义组件的配置
[代码]{
"usingComponents": {
"wxParse": "/miniprogram_npm/wx-minicomponent/wxParse"
}
}
[代码]
[代码]wxml[代码] 文件中引用 wxParse
[代码]<wxParse nodes="{{ htmlText }}" />
[代码]
提示:详细步骤可以参考小程序的npm使用文档
补充组件:代码高亮展示组件使用
在 [代码]page[代码]的 [代码]json[代码] 文件里面引入 [代码]highLight[代码] 组件
原生引入:
[代码]{
"usingComponents": {
"highLight": "/components/highLight/highLight"
}
}
[代码]
npm组件引入:
[代码]{
"usingComponents": {
"highLight": "/miniprogram_npm/wx-minicomponent/highLight"
}
}
[代码]
组件调用
[代码]<highLight codeText="{{codeText}}" />
[代码]
参数文档
wxParse:富文本解析组件
参数
说明
类型
例子
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
…
highLight:代码高亮解析组件
参数
说明
类型
例子
codeText
原始高亮代码字符
String
“var num = 10;”
language
代码语言类型
String
可选值:“javascript/typescript/css/xml/sql/markdown”
提示:如果是html语言,language的值为xml
wxAudio:仿微信公众号文章音频播放组件
参数
说明
类型
例子
title
标题
String
“test”
desc
副标题
String
“sub test”
src
音频地址
String
示例展示
富文本解析
html文本解析实例
[图片]
markdown文本解析实例
[图片]
代码高亮
[图片]
更新历史
2020-5-31
迁移utils目录到wxParse目录下;
富文本增加markdown文本解析支持;
2020-5-21: 富文本组件image标签添加loading过渡态,优化图片加载体验
2020-5-17: 完善组件参数文档,增加wxParse对audio标签标题,副标题的解析功能
2020-5-13: 增加css,html,ts,sql,markdown代码高亮提示支持
2020-5-6: 增加图片预览功能
项目地址
项目地址:https://github.com/csonchen/wxParse