在微信裡看過文章的應該知道，文章裡的圖片點選後可以放大、分享和儲存。

然而自己在微信裡開發的網頁，裡面的圖片點選後沒辦法實現這個效果，然後就去看了下微信JS文件，裡面有個previewImage可以呼叫。

previewImage是微信客戶端給內建瀏覽器增加的一個Javascript Interface，通過呼叫這個API，可以調起微信客戶端提供的大圖片檢視元件。

官方說明和例子：

1. wx.previewImage({
2. current:'',// 當前顯示圖片的http連結
3. urls:[]// 需要預覽的圖片http連結列表
4. });

1. document.querySelector(
   '#previewImage').onclick =function(){
2. wx.previewImage({
3. current:'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
4. urls:[
5. 'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
6. 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
7. 'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
8. ]
9. });
10. };

可以看出例子中的資料是寫死在裡面的，所以要自己寫個JS，然後把指定div裡面圖片載入到wx.previewImage中

1. <div id="previewImage">
2. <img src="https://www.hackhp.com/1.jpg"><img src="https://www.hackhp.com/2.jpg">
3. </div>

把圖片連結都新增到wx.previewImage裡

1. <script>
2. $(document).on('click','#previewImage img',function(event
   ){
3. var imgArray =[];
4. var curImageSrc = $(this).attr('src');
5. var oParent = $(this).parent();
6. if(curImageSrc &&!oParent.attr('href')){
7. $('#previewImage img').each(function(index, el){
8. var itemSrc = $(this).attr('src');
9. imgArray.push(itemSrc);
10. });
11. wx.previewImage({
12. current: curImageSrc,
13. urls: imgArray
14. });
15. }
16. });
17. </script>