小程序怎么点击富文本里的图片出现预览效果

最新推荐文章于 2024-05-17 17:15:50 发布
最新推荐文章于 2024-05-17 17:15:50 发布
阅读量1.3k 收藏
点赞数
分类专栏： 笔记 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49552046/article/details/115949561
版权
想必大家都知道微信开发者文档里的rich-text标签不能获取里面的图片和给图片添加点击事件，那么我们该怎么办呢

我们可以引入一个组件，Parser可以点击富文本里的图片，使图片出现预览状态
组件下载地址：parser.min.zip

下载好后直接把文件拉进编辑器里就行
在这里插入图片描述
下面需要在app.json里进行配置
在这里插入图片描述配置完成直接在html里直接输出就行
下面是html里的内容
在这里插入图片描述
然后就是js里data里的内容
在这里插入图片描述

郭辰羽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用递归实现钉钉小程序点击富文本，进行图片预览效果
weixin_43930421的博客
05-25 750
问题 钉钉小程序的 rich-text 富文本组件，提供了在手机上浏览图文信息的富文本内容功能。 但是如何实现点击富文本信息，实现其中图片的预览？ rich-text 组件提供了下列事件，但是很难通过这些事件定位到用户具体点击了哪张图片（富文本中可能存在多张图片，也可能没有图片） 解决 退而求其次，只要点击了组件内容，如果其中存在图片信息，就调用 previewImage 接口实现预览。 其中难点在于使用递归查询 nodes 数组是否存在图片节点。 // 点击富文本预览图片 const richTap =
微信小程序富文本解析点击图片放大_小程序富文本提取图片可放大缩小
weixin_39815310的博客
12-22 2221
本文实例为大家分享了小程序富文本提取图片可放大缩小的具体代码，供大家参考，具体内容如下启发：因为最近有需求说在小程序商品的详情页里所有图片可以放大缩小，网上好像不太好找，就写了篇博客，供大家参考step1获取到富文本内容，怎么获取就是请求数据嘛，这个不在赘述了。var nodes = res.data.data.content;step2检测 nodes中是否有img标签，这个有很多方法，我这里用...
微信小程序点击 rich-text 组件之后预览富文本中的图片
narukeu的博客
10-20 976
在小程序开发时，常常会碰见一种需求，就是当用户点击 rich-text 中渲染的富文本时，需要预览图片，这里提供一个思路，就是通过正则匹配 HTML 中的图片链接，然后存到一个数组中，再将数组放入。
rich-text 内预览当前图片
最新发布
xiaobo_99的博客
05-17 317
根据以往的项目经验， 首先想到了rich-text 组件无法点击，那就需要换一种思路，网页的灵活性很高，而且可以进行图片预览，还有小程序自带原生 web-view 组件。为了完成思路，将小程序原生语言开发的详情页面放弃，使用uniapp重新写了一遍详情页，然后打包输出网页（网页接收QueryString参数：详情ID，访问口令）。以上是一种“曲线救国”的方式实现小程序内预览当前图片的办法，重点在于理解 replace，其可以将值替换为函数。并且点击哪张图片就预览哪张图片，，要求实现这个功能，
富文本上传图片，点击图片实现预览的效果
weixin_45786429的博客
08-02 265
富文本图片上传，点击图片实现预览功能
小程序富文本中的图片实现点击预览效果
weixin_48566374的博客
02-03 1140
小程序富文本中的图片实现点击预览效果 这里推荐使用mp-html小程序富文本组件。 具体用法不多赘述，这边就留一个git地址： 链接: mp-html.
小程序实现富文本图片点击预览
徐三岁的博客
10-16 502
2.在需要使用页面的添加。1.在项目根目录下执行。
网页和小程序实现放大预览富文本中的图片
a_靖的博客
12-29 1979
实现用户点击富文本中的某个图片，进行放大预览、保存富文本内容中的某个图片
【微信小程序】富文本rich-text的图片预览效果的几种方法
记录
03-04 3764
使用原生小程序开发，实现在富文本rich-text中的图片预览效果的几种方案对比。
微信小程序实现点击图片放大预览
12-13
这个强大的API( wx.previewImage() )，接下来我们来讲一下微信小程序中图片点击放大预览的实现步骤！ 思路： 1.点击事件 2.放大 3.左右滑动查看上、下一张 在绑定点击事件的时候我们需要同时获取到点击图片的url和这...
微信小程序实现图片预览功能
08-28
本文详细介绍了微信小程序实现图片预览功能的方法，包括使用 wx.chooseImage API 选择图片，使用 wx.previewImage API 预览图片，以及使用 WXML、WXSS 和 JavaScript 编写小程序的界面和逻辑。希望本文能够对大家的...
微信小程序富文本渲染引擎
01-27
注：wxParser 已提供小程序插件版 ，使用起来更加简单快捷 步骤 把 wxParser 目录放到小程序项目的根目录下 ...是否启用富文本内的图片预览功能，默认是 tapLink Function 否 点击超链接时的回调函数 示例 W
微信小程序富文本渲染引擎的详解
08-29
微信小程序富文本渲染引擎的详解 微信小程序富文本渲染引擎是微信小程序中的一种文本渲染引擎，能够将 HTML 内容渲染到小程序中。微信小程序富文本渲染引擎的主要特点是它可以将 HTML 内容渲染到小程序中，而不需要...
APP，微信小程序富文本编辑器（包含图片视频上传，地图选点）
12-22
在这款APP和微信小程序富文本编辑器中，用户可以方便地进行文字编辑，同时享受到多媒体元素的添加功能。 图片上传功能是现代编辑器不可或缺的一部分。用户可以方便地将本地图片导入到编辑器中，以便在文章或内容中...
微信小程序源码模版_图片自适应 ，富文本解析.rar
06-10
在这个“微信小程序源码模版_图片自适应 ，富文本解析.rar”压缩包中，包含的资源是关于如何在微信小程序中实现图片自适应和富文本解析的关键代码和模板。 1. 图片自适应：在移动设备上，由于屏幕尺寸和分辨率的...
微信小程序-微信小程序 HTML 富文本解析
08-05
是否启用富文本内的图片预览功能，默认是 tapLink Function 否 点击超链接时的回调函数 示例 WXML JS const wxParser = require('../../wxParser/index'); Page({ data: {}, onLoad: function () {
微信小程序-微信小程序富文本渲染引擎
08-05
是否启用富文本内的图片预览功能，默认是 tapLink Function 否 点击超链接时的回调函数 示例 WXML JS const wxParser = require('../../wxParser/index'); Page({ data: {}, onLoad: function () { l
微信小程序实现图片选择并预览功能
10-16
预览图片的功能可以通过`wx.previewImage`接口实现，它允许用户在全屏模式下预览多张图片。例如： ```javascript wx.previewImage({ urls: tempFilePaths, // 需要预览的图片http链接列表，此处应替换为实际的图片...
微信小程序开发技巧与常见问题总结
37. **全屏预览图片**：在新的页面中实现全屏查看图片。 38. **显示提示信息**：如`wx.showToast()`用于显示简单的提示信息。 39. **存储数据**：使用`wx.setStorage()`等方法将数据持久化到本地。 40. **公共API...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值