微信JSSDK接口，previewImage

原文:https://www.hackhp.com/801.html 

在微信里看过文章的应该知道，文章里的图片点击后可以放大、分享和保存。

然而自己在微信里开发的网页，里面的图片点击后没办法实现这个效果，然后就去看了下微信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>