微信JSSDK介面,previewImage
阿新 • • 發佈:2019-02-04
在微信裡看過文章的應該知道,文章裡的圖片點選後可以放大、分享和儲存。
然而自己在微信裡開發的網頁,裡面的圖片點選後沒辦法實現這個效果,然後就去看了下微信JS文件,裡面有個previewImage可以呼叫。
previewImage是微信客戶端給內建瀏覽器增加的一個Javascript Interface,通過呼叫這個API,可以調起微信客戶端提供的大圖片檢視元件。
官方說明和例子:
- wx.previewImage({
- current:'',// 當前顯示圖片的http連結
- urls:[]// 需要預覽的圖片http連結列表
- });
- document.querySelector(
- wx.previewImage({
- current:'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
- urls:[
- 'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
- 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
- 'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
- ]
- });
- };
可以看出例子中的資料是寫死在裡面的,所以要自己寫個JS,然後把指定div裡面圖片載入到wx.previewImage中
- <div id="previewImage">
- <img src="https://www.hackhp.com/1.jpg"><img src="https://www.hackhp.com/2.jpg">
- </div>
把圖片連結都新增到wx.previewImage裡
- <script>
- $(document).on('click','#previewImage img',function(event
- var imgArray =[];
- var curImageSrc = $(this).attr('src');
- var oParent = $(this).parent();
- if(curImageSrc &&!oParent.attr('href')){
- $('#previewImage img').each(function(index, el){
- var itemSrc = $(this).attr('src');
- imgArray.push(itemSrc);
- });
- wx.previewImage({
- current: curImageSrc,
- urls: imgArray
- });
- }
- });
- </script>