微信开发之JSSDK接口开发(Java)

    前不久做了一个微信公众号项目,有用到JSSDK接口,今晚正好有空,就开始动手整理。如何获得accesstoken和jsapitiket以及生成签名就不细说了,大家看接口文档,有不明白的地方可以给我留言。本文主要介绍了如何去使用JSSDK的部分接口,包括选择图片、上传图片、下载图片、获取地理位置、调用微信扫一扫,其他接口以后补充,代码我贴出来了,测试通过。

     接口文档官方地址:https://mp.weixin.qq.com/wiki

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

	<head>
		<title>接入微信JSSDK</title>
		<base href="<%=basePath%>">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

		<head>
			<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
			<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
			<script type="text/javascript">
			
		
				$(function() {
					var appId = '${sign.appId}';
					var nonceStr = '${sign.nonceStr}';
					var timestamp = '${sign.timestamp}';
					var signature = '${sign.signature}';
					wx.config({
						debug: true,
						appId: appId,
						timestamp: timestamp,
						nonceStr: nonceStr,
						signature: signature,
						jsApiList: [
							'checkJsApi',
							'chooseImage',
							'uploadImage',
							'downloadImage',
							'getLocation',
							'scanQRCode'
						]
					});
					var images = {
						localId: [],
						serverId: [],
						downloadId: []
					};

					//选择图片
					$("#chooseImage").bind("click", function() {
						wx.chooseImage({
							count: 9, // 默认9,最多可选9张图片
							sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
							sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
							success: function(res) {
								images.localId = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
							}
						});
					});
					
					//上传图片
				    $("#uploadImage").bind("click", function() {
						var i = 0,
							len = images.localId.length;
						if(len == 0) {
							alert('请先使用 chooseImage 接口选择图片', null);
							return;
						}
						// if(images.localId.length > 1) {
						//    alert('目前仅支持单张图片上传,请重新上传');
						//   images.localId = [];
						//   return false;
						//  }
						function wxUpload() {
							wx.uploadImage({
								localId: images.localId[i], // 需要上传的图片的本地ID,由chooseImage接口获得
								isShowProgressTips: 9, // 默认为1,显示进度提示
								success: function(res) {
									i++;
									alert('已上传:' + i + '/' + len);
									//将上传成功后的serverId保存到serverid
									images.serverId.push(res.serverId);
									//上传成功,下载到本地
									wxImgCallback(res.serverId);
									if(i < len) {
										wxUpload();
									}
								},
								fail: function(res) {
									alert('上传失败');
								}
							});
						}
						wxUpload();
					});
				    
					//下载图片
				    $("#downloadImage").bind("click", function() {
						var i = 0,
							len = images.serverId.length;
						if(len == 0) {
							alert('请先使用 chooseImage 接口选择图片', null);
							return;
						}

						function wxDownload() {
							wx.downloadImage({
								serverId: images.serverId[i], // 需要下载的图片的服务器端ID,由uploadImage接口获得
								isShowProgressTips: 1, // 默认为1,显示进度提示
								success: function(res) {
									i++;
									alert('已下载:' + i + '/' + len);
									images.downloadId.push(res.localId);
									if(i < len) {
										wxDownload();
									}
								}
							});
						}
						wxDownload();
					});

					//获取地理位置
		            $("#openLocation").bind("click", function() {
						wx.getLocation({
							success: function(res) {
								alert(JSON.stringify(res));
							},
							cancel: function(res) {
								alert('用户拒绝授权获取地理位置');
							},
							fail: function(res) {
								alert(JSON.stringify(res));
							}
						});
					});
					
					//调用扫一扫
					$("#scanQRCode").bind("click", function() {
						wx.scanQRCode({
						    needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
						    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
						    success: function (res) {
							    var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
							    alert(result);
							}
						});
					});
				});

				function wxImgCallback(serverId) {
					$.ajax({
						type: "get",
						url: "${base}/mall/download",
						contentType: "application/json;charset=utf-8",
						data: "serverId=" + serverId,
						success: function(data) {
							if(data == 1){
								alert("下载成功");
							}
						},
						error: function(data) {
							alert("失败");
						}
					});

				}

				wx.error(function(res) {
					alert("出错了:" + res.errMsg);
				});
			</script>
		</head>

		<body>
			<input type="button" id="chooseImage" value="选择图片" /> <br>
			<input type="button" id="uploadImage" value="上传图片" /> <br>
			<input type="button" id="downloadImage" value="下载图片" /> <br>
			<input type="button" id="openLocation" value="查看位置" /> <br>
			<input type="button" id="scanQRCode" value="扫一扫" /> <br>
		</body>
</


      


(转载注明出处,原文地址:http://blog.csdn.net/ke7in1314/article/details/72904491



       

 

   

上一篇:Use high resolution webcam Logitech C930c on Linux


下一篇:微软收购GitHub:欲在云计算市场对抗AWS,这次微软能打破收购惨败的魔咒吗