微信小程序可添加图片描述的wx.previewMedia

前言

产品说什么也要在大图预览下加图片描述，我说微信小程序不支持，wx.previewImage和wx.previewMedia都是我们自己改不了的。但是无奈非得要，那我说：加可以，但是做不到像wx.preview那样完美，右上角会有胶囊按钮，其它体验也会也些差距。为了加这个图片描述，我是抽业余时间搞了好多天才搞出来，真是。。。

示例动图

实现思路和方案

1. 将navigationBar隐藏掉，然后黑色背景一搞，左右切换使用swiper。
2. 因为考虑到swiper加载item太多会有渲染问题，我们在这里使用之前写的库swiper-limited-load。
3. 图片使用movable-view来实现双指缩放和移动功能，此外图片还应该有双击缩放，单击退出等功能.
4. 视频使用video组件，要考虑到只有滑动到当前item，才去渲染当前item的video组件，要不然出现左右两个video也跟着一起播放的情况就尴尬了。
5. 视频要实现宽度铺满，按宽高比例显示，需要知道视频的宽高比，这里可以用wx.getImageInfo来获取视频封面图片的信息（网络图片需要配置download域名），或者如果你们的接口会返回视频的宽高信息，根据屏幕宽度，直接设置高度也行。

总结

微信自带的wx.previewImage和wx.previewVideo其实已经挺好用了。就为了一个图片描述，我们自己造这么个轮子，得好几天时间，而且这个轮子还不如原来的好用。面对这种情况，这就看是要如何取舍了，是要开发效率，还是要用户体验。既然产品需要，那就硬刚吧。。。

项目地址：https://github.com/pengboboer/preview-media-desc

如果错误，欢迎指出。

如有新的需求也可以提出来，如果有时间的话，我会帮你们完善。

如果能帮到你们，记得给一个star，谢谢。