2019獨角獸企業重金招聘Python工程師標準>>>

在微信瀏覽器中，出現在網頁上的圖片通過點按一小段時間，可以調出微信隱藏的圖片播放器，在播放器中看圖可以隨意放大縮小，體驗更炫酷。不過這個功能默認只對通過微信后臺編輯的圖文網頁有效。想讓其他網頁在微信瀏覽器中打開時也擁有這個功能？imagePreview接口可以幫到你。

主要有如下幾步：

獲取網頁中所有圖片url，特別注意最后的格式

/**/ var?host='http://'+window.location.host;/*獲取完整域名*/ var?imgs=$('img'); for?(i=0;i<imgs.length;i++){f(src===''){src+=?"['"+?host?+imgs[i].src?+"'"?;}else{src+=?",'"+?host?+imgs[i].src?+"'"?;} } src+=']'; src=eval('('+src+')'); /* *最后src為一個數組，console.log(src)的結果是這樣： [0:?"http://localhost/images/9549.jpeg",1:?"http://localhost/images/205.jpeg",2:?"http://localhost/images/449549.jpeg"] 特別注意：src結果不是這種格式可能會出錯，或者iphone上顯示不出圖片,或者iphone和android上都顯示不出圖片 */

2.綁定圖片的點擊事件,在手機上最好使用touch事件而不是click

/**/ (function(){var?startPos;imgs[k].addEventListener('touchstart',imgtouchstart,false);function?imgtouchstart(){var?touch?=?event.targetTouches[0];startPos?=?{time:+new?Date};touch.target.addEventListener('touchend',imgtouchend,false);}function?imgtouchend(){var?touch?=?event.targetTouches[0];var?duration?=?+new?Date?-?startPos.time;if(duration>300){/*手指按下停留300毫秒觸發*/var?srcList=src;var?index?=?imgs.index(this);var?thissrc=host?+this.getAttribute('data-original');/**thissrc:當前點擊圖片的url*srcList:圖片url數組*/imagePreview(thissrc,srcList);}} })()

3.實現imagePreview接口,沒什么特別的，直接這樣寫

/**/ function?imagePreview(curSrc,srcList)?{//這個檢測是否參數為空if(!curSrc?||?!srcList?||?srcList.length?==?0)?{return;}//這個使用了微信瀏覽器提供的JsAPI?調用微信圖片瀏覽器if(window.WeixinJSBridge){?WeixinJSBridge.invoke('imagePreview',?{?'current'?:?curSrc,'urls'?:?srcList});} };

如上三步，微信6.0以上，android/iphone4,5,6上都可以看到正常效果

轉載于:https://my.oschina.net/codespring/blog/478774

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的imagePreview接口调用微信自带图片播放器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。