vue项目预览图片(只适用于微信浏览器开发)

此预览图片使用的是微信JSSDK中的wx.previewImage接口，但是我们一般vue项目不使用jQuery，所以基于原生封装了一个方法,把下面的一段代码放到util.js(公用js)里
引入微信sdk

import wx from "weixin-js-sdk";

我是自定义一个混合开发的方法，在main.js中引用，全局都可以直接调用该方法

goPreviewImg(el){
    //el 当前组件的根元素
    el.onclick = function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        var oElements  = el.getElementsByTagName('*');
        if(target.nodeName.toLowerCase() == 'img'&&target.className.indexOf('preview_img') != -1){
            var imgArray = [];
            var curImageSrc =target.src;
            for(var i=0;i<oElements.length;i++){
                if(oElements[i].className.indexOf('preview_img') != -1&&oElements[i].nodeName.toLowerCase() == 'img'){
                    imgArray.push(oElements[i].src);
                }
            }
            wx.previewImage({
            	current: curImageSrc,
            	urls: imgArray
            });
        }
    }
},

使用方法：哪一个图片需要预览 就给img加上 calss=preview_img ，类名可以自己定义，但需要跟方法里一致。在mounted生命周期里面调用。

<img src="xxxxx.jpg" class="preview_img" />
 
mounted(){
    //this.$el当前组件的根元素
    this.goPreviewImg(this.$el);

手机就可以查看当前的预览图片了
tips：

1. base64位图片不支持预览
2. 需要先引入js文件 //res.wx.qq.com/open/js/jweixin-1.4.0.js