微信公眾號,圖片預覽功能 有單個圖片,


 

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;
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM