前言

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

示例動(dòng)圖

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

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

總結(jié)

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

項(xiàng)目地址：https://github.com/pengboboer/preview-media-desc

如果錯(cuò)誤，歡迎指出。

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

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