【微信公众平台开发】借用微信内置图片浏览功能

【微信公众平台开发】借用微信内置图片浏览功能

开发微信公众平台时,碰到文章中有非常多图片,须要能够点开图片浏览;那么点击图片直接调用微信client自带的图片播放组件会省非常多事。否则你得去摆弄折腾各种图片浏览插件,比方photoswipe。


个人封装功能成一个js文件。把该文件放到你须要的网页里面就可以,这样文章当你点击图片时,就会调用图片浏览功能!

<script>
		function addLoadEvent(func){ 
			//将函数作为參数,此函数就是 onload 触发时须要运行的某个函数
			    var oldonload=window.onload; 
			    //将原来的 onload 的值赋给暂时变量 oldonload。
			    if(typeof window.onload!="function"){
			    //推断 onload 的类型是否是 function。假设已经运行window.onload=function(){...} 赋值,那么此时 onload 的类型就是 function
			    //否,则说明 onload 还没有被赋值,当前任务 func 为第一个添�的任务
			        window.onload=func(); 
			        
			        //作为第一个任务,给 onload 赋值
			    }else{ 
			    //是,则说明 onload 已被赋值,onload 中先前已有任务添�
			        window.onload=function(){
			            oldonload();
			            func(); 
			            //作为兴许任务,追加到先前的任务后面
			        }
			    }
		}
		var imgs=new Array();
		var nowImgurl="";
		function getPicInfo()
		{
			var imgObj=document.getElementsByTagName('img');  //获取图文中全部的img标签对象
			
			for(var i=0; i<imgObj.length; i++)
			{
				imgs.push(imgObj[i].src); 
				
				//以下调用微信内置图片浏览组建
				imgObj[i].onclick=function(){
					nowImgurl = this.src;	//获取当前点击图片url
					WeixinJSBridge.invoke("imagePreview",{
						"urls":imgs,
						"current":nowImgurl
						})
				}
			}
		}
		
		addLoadEvent(getPicInfo);	//监听事件
		
</script>


版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/118997.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 如何利用js生成二维码_前端生成二维码

    如何利用js生成二维码_前端生成二维码问题来源最近在做一个项目,有这么个需求,通过生成二维码来实现网页的分享。问题分析脑海的第一反应,当然是用js来实现,自己手写?当然不是。解决方案使用QRCode.js。QRCode.js是一个用于生成二维码的JavaScript库。主要是通过获取DOM的标签,再通过HTML5Canvas绘制而成,不依赖任何库。QRCode.js:使用JavaScript生成二维码代码编写<!DOCTYPEhtml><htmllang=”en.

    2022年10月18日
  • 正规矩阵(酉矩阵)[通俗易懂]

    正规矩阵(酉矩阵)[通俗易懂]英文名:Unitarymatrix

    2022年11月1日
  • onmouseover 和onmousemove的区别「建议收藏」

    onmouseover 和onmousemove的区别「建议收藏」时间上 onmousemove事件触发后,再触发onmouseover事件。按钮上 不区分鼠标按钮。动作上 onmouseover只在刚进入区域时触发。onmousemove除了刚进入区域触发外,在区域内移动鼠标,也会触发该事件。当鼠标移动很快时,可能不会触发这两个事件。 onmouseover与onmousemove的区别是:当鼠标移过当…

    2022年8月30日
  • Android注册表_手机注册表文件在哪里

    Android注册表_手机注册表文件在哪里/data/system/packages.plist com.google.android.ears100430/data/data/com.google.android.earsdefault3003,1028,1015com.qualcomm.timeservice100680/data/data/com.qualcomm.timeserviceplatformno

    2022年10月15日
  • burpsuite 越权_挖洞经验 | 用BurpSuite实现越权漏洞(IDOR)的自动发现识别

    burpsuite 越权_挖洞经验 | 用BurpSuite实现越权漏洞(IDOR)的自动发现识别这里分享一个自动化发现IDOR(越权)漏洞的方法,那就是在BurpSuite中利用Autozie和Autorepeater插件实现IDOR漏洞的探测识别,而无需针对每个请求手动去变化参数或请求。IDOR(越权)漏洞:也称“不安全的直接对象引用”,场景发生于当用户对内部资源的访问请求,或基于用户提供的输入对象进行访问时,服务端未进行合理的权限验证,导致当前用户可以未经授权访问获取到不属于自己账户权限…

    2022年6月4日
  • Db4o数据库:快速入门「建议收藏」

    Db4o数据库:快速入门「建议收藏」偶遇Db4o,非常有感觉,就推荐给大家吧。它是一种开源对象数据库。百分之百的面对对象,操作数据库就像操作对象一样简单快速。它有Java和.Net两个版本,在其官网可下载安装包及源代码。以.Net版本为例,给大家介绍Db4o的使用。安装完成后,在omn文件夹下,有一个VisualStudio的插件(ObjectManagerEnterprise),利用它可以像其他数据库工具一样,可以快速访问对

    2022年7月21日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号