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

news/2024/12/2 19:03:08/

前言

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

update:因为方案3wxparser后续没有再维护,解析微信公众号文章时会出现排版错误的问题。作为插件也很难二次开发。换成mp-html

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

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

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

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

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

  • 使用时注意引用的路径即可。
    参考:小程序富文本解析利器mp-html

3.小程序插件:wxParser-plugin(已停止维护)

github地址与使用方法

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

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

该插件的使用过程

  1. 登录微信公众平台,小程序。
  2. 右下角菜单“设置” -> 第三方设置 -> 插件管理,根据github上提供的appid查找并添加。

项目中使用

  1. 在 app.json 中声明插件引入。
    • 插件版本可以用 0.3.1(在插件管理里好像是0.4.0,但是使用有点问题)
    • provider 为该插件的 APPID
    • wxparserPlugin 为自定义的插件名称。
"plugins": {"wxparserPlugin": {"version": "0.3.1","provider": "wx9d4d4ffa781ff3ac"}
}
  1. 在需要使用到该插件的小程序页面的 json 配置文件中,做如下配置:
{"usingComponents": {"wxparser": "plugin://wxparserPlugin/wxparser"}
}
  1. 使用
<wxparser rich-text="{{richText}}" />

完成!文档里也说的很清楚了,也比较简单。

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

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


http://www.ppmy.cn/news/74149.html

相关文章

【面试题】如何实现vue虚拟列表,纵享丝滑

大厂面试题分享 面试题库 前后端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 web前端面试题库 VS java后端面试题库大全 前言 最近在工作中遇到了一个列表的需求&#xff0c;因为做的是C端&#xff0c;所以对性能…

无效数据大揭秘——你不知道的那些坑!

进行数据管理时&#xff0c;无效数据可能会对生产力和决策质量造成严重的影响。如何发现和处理无效数据变得愈发重要。一起来唠唠各位大佬是如何处理的&#xff1f; ⭐ 什么是无效数据&#xff1f;⭐ 如何处理无效数据&#xff1f;⭐ 如何减少无效数据&#xff1f;⭐ 无效数据管…

Windows 环境 Rust postgress dll报错

本文将主要阐述三个bug&#xff0c;具体如下&#xff1a; 报错1&#xff1a; LNK1181: cannot open input file “libpq.lib” 命令行中输入setx PQ_LIB_DIR "C:\Program Files\PostgreSQL\14\lib" 重新 cargo build 问题解决 报错2&#xff1a;Exit code: 0xc000…

Executor 框架实现线程池,以及利用多线程读取文件

Java 中实现多线程的方式有以下几种: 1.使用 Thread 类实现多线程。 创建线程的第一种方式是继承 Java 的 Thread 并重写 run() 方法。 public class MyThread extends Thread {@Overridepublic void run() {// 线程执行的逻辑} }MyThread myThread1 = new MyThread(); myT…

计算机图形学 | 实验九:纹理贴图和天空盒

计算机图形学 | 实验九&#xff1a;纹理贴图和天空盒 计算机图形学 | 实验九&#xff1a;纹理贴图和天空盒实验概述顶点数据立方体顶点数据天空盒顶点数组 纹理载入创建纹理纹理读取纹理绑定 使用纹理立方体着色器顶点着色器片元着色器 天空盒着色器顶点着色器片元着色器 立方体…

Linux【工具 02】OpenStreetMap数据处理工具OSMCTools下载安装使用举例(osmconvert命令说明)如何获取区域边界说明

OSMCTools安装使用实例 1.Tools2.官网安装步骤3.实际安装步骤3.1 环境3.2 步骤 4.工具使用实例 OpenStreetMap的下载地址&#xff1a;Geofabrik Download Server。 OSMCTools的GitHub地址&#xff1a;https://github.com/ramunasd/osmctools Windows操作系统&#xff0c;可以…

图像比对、人像比对和人脸识别的区别是什么?

图像比对、人像比对和人脸识别都是图像处理技术&#xff0c;但是它们的实现方式和应用场景均有所不同。 图像比对 图像比对是指通过计算机视觉技术将两张或多张图片进行相似度比较。主要包括图像特征提取、匹配和评估等步骤&#xff0c;通常使用神经网络等深度学习技术来实现…

深度学习上采样下采样概念以及实现

#pic_center 400x 系列文章&#xff1a; 文章目录 参考博客概念上采样下采样 实现上采样下采样 参考博客 【深度学习】上采样&#xff0c;下采样&#xff0c;卷积 torch.nn.functional.interpolate函数 概念 上采样 简单说将图片放大&#xff0c;通过在像素键插入数据 1.…