微信開發之JSSDK介面開發(Java)
阿新 • • 發佈:2019-02-02
前不久做了一個微信公眾號專案,有用到JSSDK介面,今晚正好有空,就開始動手整理。如何獲得accesstoken和jsapitiket以及生成簽名就不細說了,大家看介面文件,有不明白的地方可以給我留言。本文主要介紹了如何去使用JSSDK的部分介面,包括選擇圖片、上傳圖片、下載圖片、獲取地理位置、呼叫微信掃一掃,其他介面以後補充,程式碼我貼出來了,測試通過。
<!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> </