微信開發之JSSDK介面開發（Java）

PM進階者發表於2017-06-07
JSJava

    前不久做了一個微信公眾號專案，有用到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）



       

 

   

相關文章