当前位置: 首页 > news >正文

【微信小程序】富文本rich-text的图片预览效果的几种方法

前言

使用原生小程序开发,实现在富文本rich-text中的图片预览效果的几种方法对比。

1.正则+wx.previewImage(有明显不足)

一个不需要用额外组件或插件的方法:
思路:使用正则把图片的url进行剖离出来,push进一个数组中,点击富文本组件,运行wx.previewImage方法。
不足:在预览图片时,无法知道用户点击的当前是哪个图片。所以,含有多张图片时,预览始终会从第一张图片开始,只能左右滑动。
参考

2.小程序富文本组件:mp-html(uniapp可用)

一个强大的小程序富文本组件

github地址与使用方法
gitee功能详细介绍
思路:安装组件包并注册使用
优势:支持在多个主流的小程序平台和 uni-app 中使用

3.小程序插件:wxParser-plugin

github地址与使用方法

wxParser-plugin 为 wxParser 的微信小程序插件版本,与 wxParser 相比,wxParser-plugin 减少了很多繁琐的使用步骤,同时简化了接口。

最后选择使用这个方法实现,更简单轻量。

该插件的使用过程

  1. 登录微信公众平台,小程序。
  2. 右下角菜单“设置” -> 第三方设置 -> 插件管理,根据github上提供的使用方法继续即可。
  3. 版本号也按照它说的来。(在插件管理里好像是0.4.0,但是使用有点问题)

完成!

还是很简单的~

参考:【微信小程序】添加插件 并配置

富文本的简介和图片预览实现的原理

http://www.lryc.cn/news/28926.html

相关文章:

  • 通信网络-Socket、Java中的网络支持、多线程服务器
  • 搞懂 JS this、call、apply、bind
  • 力扣209长度最小的子数组
  • 【mysql是怎样运行的】-InnoDB数据页结构
  • VIM实用指南(10)语法自动补全插件coc.nvim
  • 【Vue3 第二十二章】过渡动画
  • 【linux】:进程状态(僵尸进程等)以及环境变量
  • 【C语言——练习题】指针,你真的学会了吗?
  • Linux用户空间与内核空间通信(Netlink通信机制)
  • 3.3日报
  • 并发编程-进程
  • LeetCode196_196. 删除重复的电子邮箱
  • Auto.js Pro 替代品
  • 红日(vulnstack)2 内网渗透ATTCK实战
  • 一个好的工程项目管理软件所包含的主要功能
  • 【大数据监控】Grafana、Spark、HDFS、YARN、Hbase指标性能监控安装部署详细文档
  • 面试题---CSS
  • 【C++】vector
  • RocketMQ安装
  • Spring——什么是IOC?
  • 力扣(LeetCode)430. 扁平化多级双向链表(2023.03.04)
  • 条款13:优先考虑const_iterator而非iterator
  • 23考研 长安大学846计算机考研复试《数据库》
  • Android 9.0 系统去掉省电模式
  • 3 mmmmm
  • nvidia Jetson nano Linux内核编译
  • 理想汽车2023年销量冲击30万辆有戏吗?
  • 借助CatGPT让turtlesim小乌龟画曲线
  • Java面试总结(四)
  • 强强联合,再强的英伟达NVIDIA也不落俗套