小程序实现富文本图片点击预览

文本图片点击预览"/>

小程序实现富文本图片点击预览

前言

微信小程序的rich-text组件是不能获取里面节点标签的，也不能添加事件

实现

1.引入Parser富文本组件

组件下载地址：parser.min.zip、组件官方文档地址：parser官方文档

2.将组件放入项目指定目录内、并在app.json注册组件

"usingComponents": {"parser": "/utils/parser.min/parser"}

3.在wxml中使用

<!--<rich-text nodes="{{rithText}}"></rich-text>-->
<parser html="{{rithText}}" />

4.这是data中的数据

Page({data: {rithText: `<div>↵<img src=".jpg" style="max-width:100%;">↵</div>`}
})

• 效果图：点击图片可以预览并且预览时长按可以弹出操作菜单