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

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

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


相关推荐

  • 学习Oracle这一篇就够了

    学习Oracle这一篇就够了配套资料,免费下载链接:https://pan.baidu.com/s/1yjJY3IstA8aMQBPYhWNlCw提取码:qmpd复制这段内容后打开百度网盘手机App,操作更方便哦第一章数据库概述1.1、数据库的好处将数据持久化到本地提供结构化查询功能1.2、数据库的常见概念DB:数据库,存储数据的仓库DBMS:数据库管理系统,又称为数据库软件或者数据库产品,用于创建和管理数据库,常见的有MySQL、Oracle、SQLServerDBS:数据库系统,数据库系统是一个通称

    2022年10月8日
    5
  • java如何向数组里添加元素

    java如何向数组里添加元素java篇哇,菜鸟第一次写这个东西,当加深印象,大佬们请略过,欢迎有错指出。向数组里添加一个元素怎么添加,这儿总结有三种方法:1、一般数组是不能添加元素的,因为他们在初始化时就已定好长度了,不能改变长度。但有个可以改变大小的数组为ArrayList,即可以定义一个ArrayList数组,然后用add(element)方法往里添加元素即可,还可add(index,element)往指…

    2022年6月9日
    116
  • 前端调用rpc接口_api接口调用

    前端调用rpc接口_api接口调用问题背景需要根据id通过rpc调用查询具体信息,因为没有提供批量查询的接口,所以做法是挨个遍历查询,那意味着:如果有100个id,就需要顺序进行100次rpc调用,假设每次rpc接口的调用时间是50ms(这个速度很快了),那单单rpc调用就要占用5s,所以接口的响应会非常慢。下面进行优化。优化方案:方案一:让服务方提供批量查询接口,需要服务提供方配合,这里暂不采用。方案二:rpc服务的调用由顺序调用修改为并行调用,采用线程池实现rpc的并发调用。具体实现如下:1)创建线程的类public

    2022年10月11日
    4
  • 生成pdf有的内容显示不出来_为什么ug程序生成导轨不显示

    生成pdf有的内容显示不出来_为什么ug程序生成导轨不显示TFRecord  TensorFlow提供了TFRecord的格式来统一存储数据,TFRecord格式是一种将图像数据和标签放在一起的二进制文件,能更好的利用内存,在tensorflow中快速的复制,移动,读取,存储等等。  TFRecords文件包含了tf.train.Example协议内存块(protocolbuffer)(协议内存块包含了字段Features)。我们可以写一

    2025年8月12日
    3
  • 单源最短路径算法[通俗易懂]

    单源最短路径算法[通俗易懂]最短路径问题:如果从图中某一顶点(称为源点)到达另一顶点(称为终点)的路径可能不止一条,如何找到一条路径使得沿此路径上各边上的权值总和达到最小。当然这只是最基础的应用,关于单源最短路径还有很多变体:1.单源最短路径2.单目的地最短路径3.单节点对最短路径4.所有节点对最短路径最短路径定义:路径p=的权是指组成p的所有边的权值之和从u到v的最短路径的权为

    2022年5月20日
    67
  • springmvc + excel代

    springmvc + excel代

    2022年1月17日
    41

发表回复

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

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