zoukankan      html  css  js  c++  java
  • 微信公众号,图片预览功能 有单个图片,

    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;
    }
  • 相关阅读:
    ajax的基础知识
    前端必备的php的基础知识点
    关于事件的简单汇总
    Django rest-framework(目录)
    Django(目录)
    前端(目录)
    数据库知识(目录)
    数据库基础
    并发编程(目录)
    网络编程
  • 原文地址:https://www.cnblogs.com/zc290987034/p/8819356.html
Copyright © 2011-2022 走看看