調用微信接口實現圖片預覽效果


最近在微信開發中用到了點擊圖片查看預覽圖的效果。在網上搜到了兩種解決方案,大家可以作爲參考:

解決方案一:http://www.mamicode.com/info-detail-124081.html

解決方案二:http://www.cnblogs.com/xinlinux/p/4223338.html

經過測試發現都有bug,所以自己理解分析了一下,說一下調用微信接口實現圖片預覽效果 雙指放大圖片的實現思路。

1. 獲取到當前顯示的圖片的http鏈接,預覽的圖片的http連接列表

2. 在圖片上綁定click事件,調用微信預覽圖片接口

微信JS-SDK——預覽圖片接口

wx.previewImage({
    current: '', // 當前顯示圖片的http鏈接
    urls: [] // 需要預覽的圖片http鏈接列表
});


<script src="js/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
$(function(){
	var imgsurl=[];
	var nowurl='';
	var imgObj=$("#content img");
	for(var i=0;i<imgObj.length;i++){
		imgsurl[i]=imgObj[i].src;
		imgObj[i].onclick=function(){
			nowurl=this.src;
			wx.previewImage({
			    current: nowurl,
			    urls: imgsurl
			});				
		}
	}
});
</script>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章