`

微信图片预览JS遇到的坑

 
阅读更多

微信图片预览遇到的一些问题总结:

1,图片路径要绝对路径,否则点击时,显示的是大图是第一张图。而不是点击的图片。

2,网站加载是http或https,jweixin-1.0.0.js的加载要对应起来。

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js?v=1"></script>

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js?v=1"></script>

 

 

 

 

 

                        $('.sccn-list-imgs li').unbind('click');
                        $('.sccn-list-imgs li').click(function(){
                            var baseUrl = document.location.protocol + '//'+location.host;
                            var id = $(this).attr('id');
                            var srcList = [];
                            var curSrc = baseUrl + $(this).find('img').attr('src');
                            //console.log(curSrc);
                            $.each($('.list_pic_'+id),function(i,item){
                               if(item.src) {
                                   srcList.push(baseUrl + $(this).attr('src'));
                               }
                            });
                            wx.previewImage({
                                current: curSrc, // 当前显示图片的http链接
                                urls: srcList // 需要预览的图片http链接列表
                            });
                        });

 

分享到:
评论

相关推荐

    上传图片带预览功能.支持手机微信预览

    这样,用户就能在上传前看到图片预览,而无需等待完整的文件上传到服务器。 3. **JavaScript/jQuery处理**:利用JavaScript或jQuery,我们可以监听`change`事件,当用户选择文件后触发预览。代码会读取选定文件,...

    微信小程序-图片展示源码

    在这个“微信小程序-图片展示源码”中,我们主要关注的是如何在微信小程序环境中创建一个图片展示的功能模块。这个资源包括了源码、教程文档以及一些必要的指导材料,帮助开发者从零开始搭建一个能够稳定运行的图片...

    详解微信JS-SDK选择图片遇到的坑

    有个需求要在微信企业号里面做开发,有个功能是选择图片,使用input标签肯定是不管用了,Android手机上不能多选,所以使用了微信的JS-SDK提供的相关API,这个地方真的是有坑,记录一下。按照文档直接引入js文件即可...

    仿微信朋友圈图片上传

    2. **图片预览**:在选择图片后,用户能够预览所选图片,这需要图片加载库的支持,如Glide、Fresco或SDWebImage等,它们能快速加载和显示大图。 3. **图片裁剪**:为了满足用户对图片尺寸和比例的需求,往往提供...

    微信小程序视频封面使用图片

    在本文中,我们将深入探讨如何在微信小程序中使用自定义图片作为视频封面,因为默认的`poster`属性可能在某些情况下无法正常工作。 微信小程序提供了丰富的API和组件来实现各种功能,包括视频播放。在默认情况下,...

    微信小程序封装上传文件组件

    在实际应用中,可能还需要考虑更多细节,例如图片预览、裁剪、压缩等功能,以及如何处理不同场景下的权限问题。总的来说,封装上传文件组件是微信小程序开发中常见的任务,理解并掌握其原理和实践方法对提升开发效率...

    微信小程序项目-美食列表

    10. **调试与测试**:掌握微信开发者工具的使用,进行代码编辑、预览、调试和性能优化。 通过实践“美食列表”项目,初学者可以熟悉微信小程序的开发流程,从界面设计到业务逻辑的实现,同时还能锻炼到前后端数据...

    微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

    微信小程序开发中,经常会遇到需要对图片进行操作的场景,例如图片预览、保存、识别二维码以及转发等功能。这些操作可以通过微信小程序提供的API接口实现,并且在实现中往往需要结合wxml和js文件来完成前端页面的...

    微信小程序图片裁剪we-cropper工具

    微信小程序在开发过程中,经常会遇到需要对用户上传的图片进行裁剪的需求,以满足特定的显示或上传格式。为了方便开发者实现这一功能,社区中诞生了许多优秀的第三方组件,其中之一便是`we-cropper`。`we-cropper`是...

    微信小程序 防斗鱼

    2. **编程语言**:微信小程序使用基于JavaScript的WXML(WeiXin Markup Language)作为结构层语言,WXSS(WeiXin Style Sheets)作为样式层语言,以及JavaScript(或更推荐的TypeScript)作为逻辑层语言。...

    微信小程序图片浏览组件

    在实际开发中,我们可能会遇到性能优化的问题,例如大量图片可能导致内存占用过高。这时,可以考虑使用懒加载策略,只在图片进入可视区域时才加载。另外,对于大图的缩放,可以考虑使用CSS的`transform`属性而不是...

    校园互助微信小程序democampusTaskWxapp-master.zip

    通过分析"campusTaskWxapp-master"这个项目,我们可以深入理解微信小程序的开发流程,学习到如何构建一个功能完整的小程序,同时也能了解到微信小程序在实际开发中可能遇到的问题及解决策略。对于想学习或提升微信小...

    微信小程序开发必备100Tip 图片+源码

    "微信小程序开发必备100Tip 图片+源码" 是一个针对微信小程序开发者的重要资源集合,包含了100条关于微信小程序开发的关键技巧和实践案例,同时附带了相关的图片和源代码,对于学习和提升小程序开发技能大有裨益。...

    微信开发者工具-小游戏.zip

    7. **文档支持**:微信开发者工具通常会附带详细的开发文档,指导开发者如何使用各种API和功能,解决开发过程中遇到的问题。 8. **社区交流**:微信开发者社区也是学习和交流的重要平台,开发者可以通过社区获取...

    微信群聊生成九宫格形式的头像

    对于“仿微信”的部分,意味着我们需要考虑微信特定的设计风格和交互效果,例如圆角头像、头像点击后的放大预览、滑动浏览等。这些可以通过以下方式实现: 1. 圆角头像:使用Shape Drawable或自定义View,设置边框...

    微信浏览器内显示遮罩层提示点击右上角

    在微信浏览器中,为了提供更好的用户体验和安全性,有时开发者会遇到需要用户手动操作才能正常访问外部链接的情况。本文将详细探讨如何实现“微信浏览器内显示遮罩层提示点击右上角,选择在浏览器中打开链接”的功能...

    Linux版微信开发者工具安装包

    1. **源代码编辑**:提供了一个集成的代码编辑器,支持多种编程语言,如JavaScript、WXML(微信小程序的结构层语言)和WXSS(微信小程序的样式层语言)。 2. **实时预览**:允许开发者在编写代码的同时,通过手机扫...

    微信小程序 实例汇总 完整项目源代码

    `index.js` 是逻辑处理文件,基于 JavaScript 实现业务逻辑;而 `index.wxss` 则是页面的 JSON 配置文件,用于设置页面特有的配置。 学习微信小程序开发,你需要熟悉其特有的开发环境——微信开发者工具(Tencent ...

    微信小程序仿饿了么外卖小程序源码(源码+源码导入视频教程+源码导入文档教程)小程序精选源码亲测可用

    2. **源码结构分析**:源码通常包括多个页面(pages)、公共组件(components)、样式表(wxss)、JSON配置文件、JavaScript逻辑文件(js)以及图片资源(如这里的img文件夹)。在`code`目录下,你可以找到每个页面...

Global site tag (gtag.js) - Google Analytics