微信公众号，图片预览功能 有单个图片，

 

html

　　　　　　　　　　<div class="zc_img">
                    <volist name="remark['img']" id="img_vo">
                        <i class="zc_img_i a{$remark['id']}" data-img="{$img_vo}" data-id="{$remark['id']}" style="background-image: url('{$img_vo}')" onClick="img('a'+{$remark['id']},'zc_img','a'+{$remark['id']})"></i>
                       </volist>
                </div>

 

js

{:wx_jssdk_config("false")}/*封装的方法*/
<script>
    
    /*调用微信预览图片的 循环 方法*/
    function img(a,b,c){
        var nowImgurl = $('.'+a).attr("data-img");
        var imgs = [];
        var imgObj = $("."+b+' '+'.'+c);//这里改成相应的对象
        $.each(imgObj,function(index,el){
            imgs.push(imgObj.eq(index).attr("data-img"));
        });
        wx.ready(function(){
            wx.previewImage({
                current: nowImgurl, // 当前显示图片的http链接
                urls: imgs // 需要预览的图片http链接列表
            });
        });
    }
    
    /*调用微信预览图片的 单个 方法*/
    $('.zc_img').on("click",".zc_img_i",function(){
        var nowImgurl = $(this).attr("data-img");
        var imgs = [];
        var imgObj = $(".zc_img .zc_img_i");//这里改成相应的对象
        $.each(imgObj,function(index,el){
            imgs.push(imgObj.eq(index).attr("data-img"));
        });
        wx.ready(function(){
            wx.previewImage({
                current: nowImgurl, // 当前显示图片的http链接
                urls: imgs // 需要预览的图片http链接列表
            });
        });
    })


</script>

 

function.php 

/**
 * 直接生成微信jssdk_config
 * @echo string $jssdk Jssdk_config
 * @author 5heAtMin9 <sheatming@foxmail.com>
 */

function wx_jssdk_config($debug='true'){
    $getSignPackage = wx_getSignPackage();
    $jssdk = '<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>';
    $jssdk .= '<script>
    wx.config({
        debug: '.$debug.', 
        appId: "'.$getSignPackage['appId'].'",
        timestamp: "'.$getSignPackage['timestamp'].'",
        nonceStr: "'.$getSignPackage['nonceStr'].'",
        signature: "'.$getSignPackage['signature'].'",
        jsApiList: ["checkJsApi","onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ", "onMenuShareWeibo","onMenuShareQZone","hideMenuItems","showMenuItems","hideAllNonBaseMenuItem","showAllNonBaseMenuItem","translateVoice","startRecord","stopRecord","onVoiceRecordEnd","playVoice","onVoicePlayEnd","pauseVoice","stopVoice","uploadVoice","downloadVoice","chooseImage","previewImage","uploadImage","downloadImage","getNetworkType","openLocation","getLocation","hideOptionMenu","showOptionMenu","closeWindow","scanQRCode","chooseWXPay","openProductSpecificView","addCard","chooseCard","openCard"],
    });
</script>';
    echo $jssdk;
}