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

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

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


相关推荐

  • 人脸去重算法_哈希去重算法

    人脸去重算法_哈希去重算法对比其他算法『百度的去重算法』百度的去重算法最简单,就是直接找出此文章的最长的n句话,做一遍hash签名。n一般取3。工程实现巨简单,据说准确率和召回率都能到达80%以上。『shingle算法』shingle原理略复杂,不细说。shingle算法我认为过于学院派,对于工程实现不够友好,速度太慢,基本上无法处理海量数据。『其他算法』具体看微博上的讨论…

    2022年10月26日
    0
  • mqtt服务器搭建php,Windows搭建MQTT服务器

    mqtt服务器搭建php,Windows搭建MQTT服务器MQTT,是IBM推出的一种针对移动终端设备的基于TCP/IP的发布/预订协议,可以连接大量的远程传感器和控制设备:轻量级的消息订阅和发布(publish/subscribe)协议建立在TCP/IP协议之上物联网,MQTT在这方面应用较多这里MQTT分客户端服务器端网上的确有很多代码,但是服务器端的配置很少,而MQTT是通过TCP/IP协议连接的,MQTT是协议类型HTTP协议一样,也需要对应的服…

    2022年5月8日
    64
  • jeecg主从数据库读写分离配置「建议收藏」

    1、修改Dbconfig.properties数据库配置文件:注意:从库属性的名字要与主库的属性名字区分开,属性名将会在后面的配置文件中用到。#数据库配置主库-写入库#MySQLhibernate.dialect=org.hibernate.dialect.MySQLDialectvalidationQuery.sqlserver=SELECT1jdbc.url=jdbc\:mys…

    2022年4月16日
    36
  • HTML a标签去除下划线

    HTML a标签去除下划线a{text-decoration:none;}//这个是设置a标签的默认状态去除下划线a:visited{text-decoration:none;}//这个是设置a标签的访问过后的状态去除下划线a:hover{text-decoration:none;}//这个是设置a标签的鼠标覆盖状态去除下划线a:active{text-decoration:none;}

    2022年6月3日
    37
  • PXE 批量安装 Ubuntu 20.04

    PXE 批量安装 Ubuntu 20.04原文链接:https://www.cpweb.top/1698一、介绍  Ubuntu20.04的服务器安装程序支持新的操作模式:自动安装(automatedinstallation)。自动安装可以通过自动安装配置提前回答所有这些配置问题,并使安装过程无需任何交互即可运行。  在Ubuntu18.04中,用的应答文件是preseeds(预配置文件),它基于debian-installer(akadi)来实现自动安装的。需要注意的是,如果你使用的是cobbler,那你应…

    2022年6月17日
    37
  • 没钱买珍珠首饰,能够画一个[通俗易懂]

    没钱买珍珠首饰,能够画一个

    2022年2月3日
    51

发表回复

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

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