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

前言

使用原生小程序开发，实现在富文本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"
  }
}

2. 在需要使用到该插件的小程序页面的 json 配置文件中，做如下配置：

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

3. 使用

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

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

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

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