前言

產(chǎn)品說什么也要在大圖預(yù)覽下加圖片描述，我說微信小程序不支持，wx.previewImage和wx.previewMedia都是我們自己改不了的。但是無奈非得要，那我說：加可以，但是做不到像wx.preview那樣完美，右上角會有膠囊按鈕，其它體驗也會也些差距。為了加這個圖片描述，我是抽業(yè)余時間搞了好多天才搞出來，真是。。。

示例動圖

實現(xiàn)思路和方案

1. 將navigationBar隱藏掉，然后黑色背景一搞，左右切換使用swiper。
2. 因為考慮到swiper加載item太多會有渲染問題，我們在這里使用之前寫的庫swiper-limited-load。
3. 圖片使用movable-view來實現(xiàn)雙指縮放和移動功能，此外圖片還應(yīng)該有雙擊縮放，單擊退出等功能.
4. 視頻使用video組件，要考慮到只有滑動到當(dāng)前item，才去渲染當(dāng)前item的video組件，要不然出現(xiàn)左右兩個video也跟著一起播放的情況就尷尬了。
5. 視頻要實現(xiàn)寬度鋪滿，按寬高比例顯示，需要知道視頻的寬高比，這里可以用wx.getImageInfo來獲取視頻封面圖片的信息（網(wǎng)絡(luò)圖片需要配置download域名），或者如果你們的接口會返回視頻的寬高信息，根據(jù)屏幕寬度，直接設(shè)置高度也行。

總結(jié)

微信自帶的wx.previewImage和wx.previewVideo其實已經(jīng)挺好用了。就為了一個圖片描述，我們自己造這么個輪子，得好幾天時間，而且這個輪子還不如原來的好用。面對這種情況，這就看是要如何取舍了，是要開發(fā)效率，還是要用戶體驗。既然產(chǎn)品需要，那就硬剛吧。。。

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

如果錯誤，歡迎指出。

如有新的需求也可以提出來，如果有時間的話，我會幫你們完善。

如果能幫到你們，記得給一個star，謝謝。