前言
使用原生小程序开发,实现在富文本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 减少了很多繁琐的使用步骤,同时简化了接口。
最后选择使用这个方法实现,更简单轻量。
该插件的使用过程:
- 登录微信公众平台,小程序。
- 右下角菜单“设置” -> 第三方设置 -> 插件管理,根据github上提供的appid查找并添加。
项目中使用
- 在 app.json 中声明插件引入。
- 插件版本可以用 0.3.1(在插件管理里好像是0.4.0,但是使用有点问题)
- provider 为该插件的 APPID
- wxparserPlugin 为自定义的插件名称。
"plugins": {"wxparserPlugin": {"version": "0.3.1","provider": "wx9d4d4ffa781ff3ac"}
}
- 在需要使用到该插件的小程序页面的 json 配置文件中,做如下配置:
{"usingComponents": {"wxparser": "plugin://wxparserPlugin/wxparser"}
}
- 使用
<wxparser rich-text="{{richText}}" />
完成!文档里也说的很清楚了,也比较简单。
参考:【微信小程序】添加插件 并配置
富文本的简介和图片预览实现的原理