调用微信内置浏览器实现微信打开的网页上的图片能点击打开的效果

为啥微信打开的网页有的图片能点击打开，有的不能呢？因为微信内置浏览器对打开的网页做了限

制。一般我们使用微信的时候都不会特意修改浏览器，所以如果不做处理的话，微信打开的网页上的图

片一般是无法点开的。要想点开微信打开的网页上的图片，就要调用微信的内置私有接口

WeixinJSBridge 中的图片查看器的预览属性imagePreview 。

1. 引用jQuery

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js">script>

2. 编写JS代码

需要注意的点：
①因为是测试版本，我的html和静态资源是放在 一起，然后直接部署到服务器上的，所以需要拼接字符串。不需要的直接采用注释里的代码。
②获取指定的img对象，需要把要点击的图片的img标签上添加 class = “openImg”。

<script type="text/javascript">
    $(function(){
        var imgs = [];
        
        // 获取指定img对象
        var imgObj = $(".openImg");
        //因为这是个测试版本，我的静态资源和html是放在一起的，所以我需要拼接字符串去拿到图片的url
        //这里是项目访问的域名
        var Uheader = "https://***/";

        for(var i=0; i<imgObj.length; i++){
            var urlT = imgObj.eq(i).attr('src');
            //拼接图片的url
            var allUrl = Uheader + urlT;
            imgs.push(allUrl);
            
            //若不需要拼接字符串，则采用下列代码
            //imgs.push(imgObj.eq(i).attr('src'));

            // 调用微信内置图片浏览组件
            imgObj.eq(i).click(function(){
                // 获取当前点击图片url，切记 url必须是http开头链接
                var srcC = $(this).attr('src');
                
                //拼接图片的url
                var nowImgurl = Uheader + srcC ;
                
                //若不需要拼接字符串，则采用下列代码
            	//var nowImgurl = $(this).attr('src');
                
                //调用微信内置浏览器的私有接口
                WeixinJSBridge.invoke("imagePreview",{
                    "urls":imgs,
                    "current":nowImgurl
                });
            });
        }
    });
script>

部署到服务器上在微信上就可以看到效果啦~