微信开发预览图片_微信公众号开发文档上传图片预览 - CSDN
  • //这个是调用微信图片浏览器的函数   //下面是获取当前页面所有的img的src 转成数组 并且 转换成json格式   var aa=[];   var i=0;   var src=[];   aa=$('img');   for (i
     //这个是调用微信图片浏览器的函数   
                //下面是获取当前页面所有的img的src 转成数组 并且 转换成json格式  
                var aa=[];  
                var i=0;  
                var src=[];  
                aa=$('img');  
                for (i=0;i<aa.length;i++){  
                    src[i]=aa[i].src;    //把所有的src存到数组里  
                }  
             
                //下面是点击图片的时候获取当前第几个图片并且启用咱们做的调用微信图片浏览器的函数  
                $('img').click(function(){  
                var index = $('img').index(this);  
                    imagePreview(src[index],src);  
                });
                function imagePreview(curSrc,srcList) {  
                    //这个检测是否参数为空  
                    if(!curSrc || !srcList || srcList.length == 0) {  
                        return;  
                    }  
                      
                    //这个使用了微信浏览器提供的JsAPI 调用微信图片浏览器  
                    WeixinJSBridge.invoke('imagePreview', {   
                        'current' : curSrc,  
                        'urls' : srcList  
                    });  
    };
    展开全文
  • 微信公众号开发 图片预览功能,例如 多张产品图片浏览 ,微信JSSDK 已经提供了 预览图片接口。效果图如下: 点击上面图片,弹出以下(这两张图,只是类似示例) 方案思路 wx.previewImage({ current: '', // ...
        

    应用场景

    在微信公众号开发 图片预览功能,例如 多张产品图片浏览 ,微信JSSDK 已经提供了 预览图片接口。效果图如下:

    clipboard.png

    点击上面图片,弹出以下(这两张图,只是类似示例)

    clipboard.png

    方案思路

    wx.previewImage({
        current: '', // 当前显示图片的http链接
        urls: [] // 需要预览的图片http链接列表
    });
    

    根据以上微信提供的 预览图片接口,给需要预览的图片绑定点击事件,获取当前点击图片的 src 地址传到 接口的current参数,获取所有需要预览图片元素,循环遍历,把每一个图片元素 src地址 存储到数组,并传到接口的 urls 参数。

    实现代码

        //加载微信JSSDK
        <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
        
         //这行代码,引入了第三方微信SDK,也可以具体参考微信手册配置。
         wx.config(<?php echo  $js->config(array('previewImage'), false,false,true)  ?>);
            
         $('.imglist').click(function(event) {//绑定图片点击事件
                
                var thisimg=$(this).attr('src');
                var imglist=$('.imglist');
                var srcs=new Array();
                for (var i =0; i <imglist.length; i++) {
                
                    srcs.push(imglist.eq(i).attr('src'));
                
                }
                
          
                wx.ready(function(){
                    wx.previewImage({
                        current: thisimg, // 当前显示图片的http链接
                        urls: srcs // 需要预览的图片http链接列表
                    });
                });
          
                
        }); 
    
    
    展开全文
  • 调用微信接口实现图片预览效果

    万次阅读 2016-12-08 12:04:17
    最近在微信开发中用到了点击图片查看预览图的效果。在网上搜到了两种解决方案,大家可以作为参考: 解决方案一:http://www.mamicode.com/info-detail-124081.html 解决方案二:...
    
    
    最近在微信开发中用到了点击图片查看预览图的效果。在网上搜到了两种解决方案,大家可以作为参考:

    解决方案一:http://www.mamicode.com/info-detail-124081.html

    解决方案二:http://www.cnblogs.com/xinlinux/p/4223338.html

    经过测试发现都有bug,所以自己理解分析了一下,说一下调用微信接口实现图片预览效果 双指放大图片的实现思路。

    1. 获取到当前显示的图片的http链接,预览的图片的http连接列表

    2. 在图片上绑定click事件,调用微信预览图片接口

    微信JS-SDK——预览图片接口

    wx.previewImage({
        current: '', // 当前显示图片的http链接
        urls: [] // 需要预览的图片http链接列表
    });


    <script src="js/jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
    $(function(){
    	var imgsurl=[];
    	var nowurl='';
    	var imgObj=$("#content img");
    	for(var i=0;i<imgObj.length;i++){
    		imgsurl[i]=imgObj[i].src;
    		imgObj[i].οnclick=function(){
    			nowurl=this.src;
    			wx.previewImage({
    			    current: nowurl,
    			    urls: imgsurl
    			});				
    		}
    	}
    });
    </script>


    展开全文
  • 微信公众号:预览图片

    千次阅读 2018-05-12 09:12:55
    其实也没啥。。就一段代码:wx.previewImage({ current: '', // 当前显示图片的http链接 urls: [] // 需要预览图片http链接列表 });当然。是在微信公众号上抄袭的

    其实也没啥。。就一段代码:

    wx.previewImage({
    current: '', // 当前显示图片的http链接
    urls: [] // 需要预览的图片http链接列表
    });
    当然。是在微信公众号上抄袭的
    展开全文
  • 使用微信内置浏览器预览图片

    千次阅读 2017-05-24 11:29:05
    微信H5开发预览图片,可以使用其他的一些图片预览插件,但是这样却不能把其中的某张图片发送给好友。对于 这种情况可以使用微信内置浏览器图片预览功能,就可以解决这个问题。不说废话直接看代码:
  • &lt;div class="weui-flex shenheimg_center"&gt; &lt;div class="weui-flex__item"&gt; &lt;a&gt; &lt;img src="../img/img1.png"...
  • 微信网页图片预览问题

    千次阅读 2018-05-23 09:43:32
    最近在做微信公众号开发开发过程中遇到了一个图片全屏预览,用微信JSSDK的previewImage({current: curImg, urls: imgUrls})接口写,后面发现点击图片的时候出现了两次预览,要后退两次才能退出,查了好久查不到...
  • 预览图片使用的是微信JSSDK中的wx.previewImage接口,但是我们一般vue项目不使用jQuery,所以基于原声封装了一个方法,把下面的一段代码放到util.js(公用js)里 引入微信sdk import wx from "weixin-js-sdk"; 我是...
  • <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> $(document).ready(function(){ var imgObj = $(".cont").find('img');/...
  • 微信公众号开发踩了很多坑,在此处以作笔记。 需求重现 微信公众号H5网页,图片点击放大实现预览,这是微信自己的接口,Android可以完美的自己实现,可是ios却不能实现。 解决办法 html文件 var ...
  • 微信开发(二)--上传图片和附件

    千次阅读 2018-06-22 11:11:36
    今天整理一下微信开发中遇到的图片和附件的上传问题。 开发环境参考:微信开发(一)--分享接口 点击打开链接 由于是基于weixin-java-tools 封装的java sdk,所以在微信底层处理上我们可以直接调用WxMpService. ...
  • 目前中js-sdk 1.0版本中,预览...1.预览图片接口目前只支持微信手机版 2.预览图片只支持http连接,对于weixin:// 无法预览 3.预览图片的地址需要进行加密处理,尤其路径中有中文的情况下,需要使用window.encode
  • 博主微信JSSDK&图片上传预览基于微信分享做拓展,所以一些配置操作请点击查阅JAVA微信公众号开发第7篇JSSDK&微信分享博文 页面 html>head> title>理赔申请title> meta charset="utf-8"> meta name="keywords" ...
  • 微信小程序预览图片

    2019-07-08 11:58:09
    选择图片时可设置图片是否是原图,图片来源。这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用 主要方法: wx.chooseImage(object) wxml <!--监听按钮--> <button type=...
  • 微信开发,单击图片可以进行图片的单独预览,写个随笔,以防我的金鱼记忆 步骤; 1.引入微信的api的cdn(网上很多) 2.调用微信提供的api,如下 3.给需要预览效果的图片<img >标签添加点击事件,即上面...
  • vue中调用微信公众号的图片预览

    千次阅读 2018-09-27 16:44:21
    今天做项目的时候遇到这个问题,不多说废话,直接上步骤:  引入wxjs &lt;script src="...&gt;&lt;/script&... /*调用微信预览图片的方法*/ funcReadImgInfo(value) { ...
  • 最近做了公众号的项目,需要用jssdk,研究了一段时间也走了一些弯路,现在做一些记录 1.首先引入 <script src = ...</script> 2.配置jssdk //配置jssdk ......
  • 微信开发 — 调用微信上传图片接口,并保存到自己的服务器 整体思路是这样的: 1.先把手机上的图片上传到微信服务器,然后返回一个图片ID 2.在通过后台根据ID从微信后台拿到流,保存到服务器 前几个步骤在之前的博客上有...
  • 在这粘贴上三篇博文链接,方便大家查阅互相学习: ... 微信公众号开发《二》发送模板...本次讲解微信开发第四篇:调用微信JS-SDK实现上传手机图片到服务器,是非常常见的功能。如我们看到的用户上传头像 下面是本次要...
1 2 3 4 5 ... 20
收藏数 9,885
精华内容 3,954
关键字:

微信开发预览图片