wxParse
微信小程序富文本解析
原因
由于原作者仓库 wxParse 不再维护，我们项目中商品信息展示又是以wxParse这个用做富文本解析的；
于是乎，决定采用 递归Component 的方式对其进行重构一番；
原项目使用的 template 模板的方式渲染节点，存在以下问题：
-
节点渲染支持到12层，超出会原样输出
html代码； -
每一层级的循环模板都重复了一遍所有的可解析标签，代码十分臃肿。
-
li标签不支持ol有序列表渲染（统一采用的是ul无序列表），a标签无法实现跳转，也无法获取点击事件回调等等； -
节点渲染没有绑定
key值，一是在开发工具看到一堆的warning信息（看着十分难受），二是节点频繁删除添加，无法比较key值，造成dom节点频繁操作。
功能标签
- 目前该项目已经可以支持以下标签的渲染：
- 支持 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: 增加图片预览功能
大佬不支持简析空格吗？
请问换行支持吗
在swiper组件中，多个swiper-item，每个swiper-item下都有多张图片，点击图片预览时，始终显示的是第一个swiper-item中的第一张图片
你好，感谢分享，目前使用出现一个问题，a标签可以渲染出来，但是点击无法跳转，我又用了官方提供的富文本好像也是跳转不了。
好的，以下这段：<ul><li>一起站在互联网的前端，打造健康的物业生态圈</li>- 以第三方机构的角色提供专业性的物业管理辅导li><li>着力提升物业管理服务质量</li>
- 加强与业主的互动li><li>成为一个可以相信又能真正了解物业管理的角色</li>
- 使普通业主更加清楚了解物业管理，更加理性看待与物业之间的关系li></ul>
p><div class="media-wrap video-wrap"><video controls="" src="https://tt.wo.cn/codeshop-web-zsc/api/common/oss/getBiImg?fileId=2020/08/03/uocua4qcsugf7r6gvc41kumke3.mp4"></video>div><p></p>
为啥子我在页面上渲染不出来？？
我之前用的是wxparse，请问，你这个解析的是不是在原先的那个基础上进行了升级？说得简单点就是，解析的更全面了，不知道这么理解对不对
可以商用吗请问
音频可以正常播放吗？这边一直报Cannot read property 'play' of undefined
= =不是升级为wxParser了么
大佬，有个问题请教你，关于富文本解析的。
假设用来循环渲染页面的数组，它的每一项的数据格式如下：
{
text: '<p>这是一段html代码</p><image src=""></image>',
id: 112,
flag: true,
......
}
每一项中都有一个字段的值是一段HTML代码，如果需要将这一个数组的数据全部同时渲染进页面，那么该怎么写啊？因为以前做的都是每一个页面单独解析一个或者特定几个富文本，所以遇上需要循环解析的数组，就不知道该怎么办了。恳请大佬指点
<wxParse wx:for="{{ nodeArray }}" wx:for-item="item" wx:key="id" nodes="{{item.text}}" />