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

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

开发微信公众平台时,碰到文章中有非常多图片,须要能够点开图片浏览;那么点击图片直接调用微信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)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • VMWare虚拟机的三种网络配置

    VMWare虚拟机的三种网络配置背景:当前物理机ip:192.168.18.8,路由器IP:192.168.18.1(相当于网关)我学习linux系统时,在主机上配置了二种网络类型,其中NAT模式不需要关闭防火墙即可与主机相互pin

    2022年7月1日
  • java面向对象的三大特性

    java面向对象的三大特性java面向对象的三大特性包括:封装、继承、多态一、封装1.含义:封装就是把同一类事物的共性(包括属性和方法)归到同一类中,方便使用。封装也称信息隐藏,是指利用抽象数据类型把数据和基于数据的操作封装起来,使其成为一个不可分割的整体,数据隐藏在抽象数据内部,尽可能的隐藏数据细节,只保留一些接口使其与外界发生联系。也就是说用户无需知道内部的数据和方法的具体实现细节,只需根据留在外部的接口进行操作就行。2.封装的实现需要修改属性的访问控制符(修改为private);创建getter/setter方

    2022年7月9日
  • PhpStorm2017.1版激活方法、汉化方法以及界面配置「建议收藏」

    PhpStorm2017.1版激活方法、汉化方法以及界面配置「建议收藏」本教程仅对2017.1版有效!!!!!!PhpStorm激活和汉化文件下载网址(提取密码:62cg)PhpStorm的介绍PhpStorm是一个轻量级且便捷的PHPIDE,其旨在提高用户效率,

    2022年7月2日
  • js 保留小数点后两位。或小数点后为0的话 显示为整数

    num.toFixed(2)四舍五入varnum=2.446242342;num=num.toFixed(2);console.log(num);//2.45console.log(typeofnum);//string不四舍五入向下取整num=Math.floor(num*100)/100;console.log(num);//2…

    2022年4月7日
  • 0xFFFFFFFF解读[通俗易懂]

    0xFFFFFFFF解读[通俗易懂]十六进制颜色AndroidAPP程序坞显示颜色值必须使用十六进制颜色,刚开始完全不知道怎么解读0xFFFFFF,百度上也没说出来个123来,最后经过查阅各种资料,解读到:0x十六进制数开头前面两个FF代表透明度后面的跟平常使用的颜色值一样例如0xFFFFFFFF等同于#FFFFFF…

    2022年5月13日
  • 数学分析 反常积分(第11章)

    数学分析 反常积分(第11章)一.反常积分的概念相对于普通的定积分(称为正常积分),下面提出2类反常积分1.无穷积分的提出:2.瑕积分的提出:二.无穷积分1.定义:2.性质三.瑕积分1.定义:

    2022年11月1日

发表回复

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

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