Java開發公眾號系列教程(一)：微信js-sdk上傳手機相簿照片相容IOS和安卓裝置
阿新 • • 發佈：2018-12-16
很多開發者朋友在進行微信公眾號開發時，遇到微信js-sdk上傳手機相簿照片時IOS裝置無法正常預覽的情況，今天筆者結合多多年的開發經驗，把相容IOS的解決方案分享給廣大微信開發者朋友。
一、首先申明一點筆者本案例用的微信JSSDK版本是1.2.0的，官方文件給出的最新的1.4.0親測暫時不能用。
二、微信js-sdk的chooseImage Api在不同版本的差異
頁面通過LocalID預覽圖片 變化：微信JSSDK的1.1.0及以下版本IOS裝置使用chooseImage Api返回的圖片本地地址欄位是wxlocalresource，安卓裝置返回的圖片本地地址欄位是wxLocalResource，實際開發時需要進行replace處理，否則IOS裝置預覽不了圖片。微信JSSDK的1.2.0及以上版本IOS裝置使用chooseImage Api返回的圖片本地地址欄位是localData，安卓裝置返回的圖片本地地址欄位是localld。
localld欄位的值示例如下：”img src=resourceid://50114659201332”的方式預覽圖片。 三、chooseImage Api介面相容安卓手機和IOS裝置做特殊處理
備註：此介面僅在 iOS WKWebview 下提供，用於相容 iOS WKWebview ，不支援 localId 直接顯示圖片的問題。具體可參考《iOS網頁開發適配指南》，據廣大開發者說只有IOS8及以上的手機才能用wx.getLocalImgData這個本地圖片介面。具體IOS哪些版本不能用，筆者沒有挨個去試一試，主要是太窮了，用不起iPhone，更不說擁有多個iPhone去測相容版本(同情筆者的可以在文末加筆者好友發個大紅包救濟一下筆者，哈哈) 。目前測試wx.getLocalImgData這個介面在IOS裝置上正常，其他IOS8以下版本暫時未知，直接上程式碼如下：
<script type="text/javascript"> var images = { localId: [], serverId: [] }; var carPicUrl = [];//存放車輛照片的url var count = 6; var ios = false; var $imgContainer; //通過Jquery選擇器獲取的Dom物件型別是$物件 function chooseImg(obj){ if("add-drivingLicense-front"==obj.getAttribute("id")){ $imgContainer = $(".drivingLicense-front");//行駛證正本圖片容器 }else if("add-drivingLicense-back"==obj.getAttribute("id")){ $imgContainer = $(".drivingLicense-back");//行駛證副本圖片容器 }else if("add-idCard-front"==obj.getAttribute("id")){ $imgContainer = $(".idCard-front");//身份證正面圖片容器 }else if("add-idCard-back"==obj.getAttribute("id")){ $imgContainer = $(".idCard-back");//身份證反面圖片容器 }else if("add-car"==obj.getAttribute("id")){ $imgContainer = $(".car");//車輛圖片容器 } $.ajax({ url:"http:***/my/getWxConfig", dataType:"json", type:"post", success:function(res){ wx.config({ debug: false, appId:res.appId, // 必填，公眾號的唯一標識 timestamp: res.timestamp, // 必填，生成簽名的時間戳 nonceStr: res.noncestr, // 必填，生成簽名的隨機串 signature: res.signature,// 必填，簽名，見附錄1 jsApiList: ['chooseImage', 'uploadImage','previewImage','downloadImage'] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2 }); var ua = navigator.userAgent; if (/(iPhone|iOS)/i.test(ua)) { ios = true; } else { ios = false; } alert("是否是IOS裝置"+ios); wx.ready(function(){ if($imgContainer.attr("data-count") == "1"){ wx.chooseImage({ count: 1, // 微信預設9 sizeType: ['original', 'compressed'], sourceType: ['album','camera'], success: function (res) { images.localId = res.localIds; uploadImage(images.localId,$imgContainer); }, fail:function(res){ alert("失敗的原因1"+JSON.stringify(res)); }, }) }else{ wx.chooseImage({ count: count, // 微信預設9 sizeType: ['original', 'compressed'], sourceType: ['album','camera'], success: function (res) { count = count-res.localIds.length; images.localId = res.localIds; uploadImage(images.localId,$imgContainer); }, fail:function(res){ alert("失敗的原因2"+JSON.stringify(res)); }, }) } }); }, error:function(){ alert("獲取JSAPI介面許可權引數失敗"); } }) } function uploadImage(localIds,imgContainer) { var i = 0,picNum = images.localId.length; images.serverId = []; function upload(){ wx.uploadImage({ localId: localIds[i], // 需要上傳的圖片的本地ID，由chooseImage介面獲得 isShowProgressTips: 1, // 預設為1，顯示進度提示 success: function (res) { images.serverId.push(res.serverId); var localId = localIds[i]; //此處判斷是安卓裝置還是IOS或者iphone裝置做圖片預覽相容處理 if(ios){ wx.getLocalImgData({ localId: localId, success: function (res) { var localData = res.localData; // localData是微信IOS端圖片的base64資料,可以用img標籤顯示 localData = localData.replace('jgp', 'jpeg'); // $(".img_container").append('<div style="width:45%;padding: 0 5px;"><img width="100%" height="80px" style="margin-right: 10px;" src="'+localData+'"/></div>'); if(imgContainer.attr("data-count") == "1"){//單張圖片的處理 imgContainer.append('<div style="height:160px;" class="uploadImg" >' + '<div class="close" style="position: absolute;top:5px;right:15px;"><img src="/img/delPic.png" onclick="delPic(this);"></div>' + '<img width="100%" height="100%" src="'+localData+'"/></div>'); imgContainer.next().css("display",'none'); }if(imgContainer.attr("data-count") == "6"){ //多張圖片的處理 if(count == 0){ imgContainer.next().css("display",'none'); } imgContainer.append('<div style="width:50%;height:120px;padding: 5px 5px" class="multiImg">' + '<div class="close"><img src="/img/delPic.png" onclick="delImg(this);"></div>' + '<img name = "pic" style="width:100%;height:100%;margin-top:-32px;" src="'+localData+'"/></div>'); } }, fail: function () { alert('該圖片暫時無法檢視'); } }) }else{ if(imgContainer.attr("data-count") == "1"){//單張圖片的處理 imgContainer.append('<div style="height:160px;" class="uploadImg" >' + '<div class="close" style="position: absolute;top:5px;right:15px;"><img src="/img/delPic.png" onclick="delPic(this);"></div>' + '<img width="100%" height="100%" src="'+localId+'"/></div>'); imgContainer.next().css("display",'none'); }if(imgContainer.attr("data-count") == "6"){ //多張圖片的處理 if(count == 0){ imgContainer.next().css("display",'none'); } imgContainer.append('<div style="width:50%;height:120px;padding: 5px 5px" class="multiImg">' + '<div class="close"><img src="/img/delPic.png" onclick="delImg(this);"></div>' + '<img name = "pic" style="width:100%;height:100%;margin-top:-32px;" src="'+localId+'"/></div>'); } } var mediaId = res.serverId; // 返回圖片的伺服器端ID，即mediaId //將獲取到的 mediaId 傳入後臺 方法savePicture $.post("<%=request.getContextPath()%>/my/savePicture",{mediaId:mediaId,picType:imgContainer.attr("data-type")},function(res){ if("drivingLicense-front"==imgContainer.attr("class")){ $("input[name='drivingLicense-front-url']").val(res); }else if("drivingLicense-back"==imgContainer.attr("class")){ $("input[name='drivingLicense-back-url']").val(res); }else if("idCard-front"==imgContainer.attr("class")){ $("input[name='idCard-front-url']").val(res); }else if("idCard-back"==imgContainer.attr("class")){ $("input[name='idCard-back-url']").val(res); }else if("car"==imgContainer.attr("class")){ var multi = imgContainer.find(".multiImg"); $(multi[multi.length-1]).append('<input type="hidden" name="car-url" class="car-url" value="'+res+'" />'); // alert(multi[multi.length-1].innerHTML); } i++; if(i < picNum){ upload(); } }) }, fail: function (res) { alert('上傳失敗，請重新上傳！'+res); } }); } upload(); }
截止目前，本案例就分享到這裡，歡迎廣大開發者朋友一起學習交流，筆者電話(同微信)：18629374628
