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

这篇具有很好参考价值的文章主要介绍了【微信小程序】富文本rich-text的图片预览效果的几种方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

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

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

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

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

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

github地址与使用方法

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

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

该插件的使用过程：

项目中使用

在 app.json 中声明插件引入。
- 插件版本可以用 0.3.1（在插件管理里好像是0.4.0，但是使用有点问题）
- provider 为该插件的 APPID
- wxparserPlugin 为自定义的插件名称。

"plugins": {
  "wxparserPlugin": {
    "version": "0.3.1",
    "provider": "wx9d4d4ffa781ff3ac"
  }
}

{
  "usingComponents": {
    "wxparser": "plugin://wxparserPlugin/wxparser"
  }
}

<wxparser rich-text="{{richText}}" />

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

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

富文本的简介和图片预览实现的原理文章来源地址https://www.toymoban.com/news/detail-402382.html

到了这里，关于【微信小程序】富文本rich-text的图片预览效果的几种方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！