微信js-sdk接口的使用及ios深坑

時間 2019-11-09

原文原文鏈接

最近再作微信公衆號開發，涉及到手機上傳圖片和拍照的功能。css

思路一：使用<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg"multiple="multiple" />進行多張圖片選擇上傳html

　　　　　　<!DOCTYPE html>
　　　　　　<head>
　　　　　　<meta charset="UTF-8">
　　　　　　<title>多圖預覽</title>
　　　　　　</head>
　　　　　　<script>
　　　　　　var result=document.getElementById("result");
　　　　　　var file=document.getElementById("file");

　　　　　　function readAsDataURL(){ jquery

　　　　　　var file = document.getElementById("file").files;
　　　　　　var result=document.getElementById("result"); ios

　　　　　　for(i = 0; i< file.length; i ++) {
　　　　　　var reader = new FileReader();
　　　　　　reader.readAsDataURL(file[i]);
　　　　　　reader.onload=function(e){
　　　　　　//多圖預覽
　　　　　　result.innerHTML = result.innerHTML + '<img src="' + this.result +'" alt="" />';
　　　　　　}api

　　　　　　}

　　　　　　}

　　　　　　</script>
　　　　　　<p>
　　　　　　<label>請選擇一個文件：</label>
　　　　　　<input type="file" id="file" multiple="multiple" />
　　　　　　<input type="button" value="讀取圖像" onclick="readAsDataURL()" />
　　　　　　</p>
　　　　　　<div id="result" name="result"></div>數組

在pc端是沒有任何問題的，但在手機端，雖然能夠多張上傳，可是要一次一選屢次顯示多張，並不能一次多選多顯，因此放棄。安全

思路二：調用微信接口，觀看了網上的demo感受比較實用，因此開始研究。
微信

1.登錄微信公衆號平臺，註冊帳號，綁定本身的公衆號，主要是對公衆號開發有所瞭解。在微信公衆號中找到js安全域接口配置，必定要綁定本身開發的網站域名，這樣才能使用接口，且不能是本地，只能是測試服或者正式服。cookie

2.js安全域名綁定成功後，須要下載微信js文件，而後再開發的頁面上引入，還需作接口權限配置：app

　　　　　　　　　　　　　　wx.config({
   　　　　　　　　　　　　　　 debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
   　　　　　　　　　　　　　　 appId: '', // 必填，公衆號的惟一標識，這個能夠在公衆號開發平臺上取到。
   　　　　　　　　　　　　　　 timestamp: , // 必填，生成簽名的時間戳，生成簽名時的時間。
    　　　　　　　　　　　　　　nonceStr: '', // 必填，生成簽名的隨機串，利用方法隨機生成一段字符串
    　　　　　　　　　　　　　　signature: '',// 必填，簽名，見微信文檔獲取。   http://www.360doc.com/content/15/0111/21/19291760_439977810.shtml   附錄五必看，否則簽名永遠不成功
    　　　　　　　　　　　　　　jsApiList: [] // 必填，使用什麼接口，就放入什麼接口名。
　　　　　　　　　　　　　　　　})

有坑：後臺不能直接對域名進行生成簽名，而是前臺經過請求加密傳給後臺，否則後臺在加密過程當中url會發生變化。前臺工做；url = location.href.split('#')[0];url = encodeURIComponent(url);經過post請求傳給後臺。

3.經過微信選擇接口獲取相冊照片的本地地址，可做爲img src 進行顯示，

　　　　　　　　　　　　　　wx.chooseImage({
   　　　　　　　　　　　　 success: function (res) {        //success選擇了圖片纔會執行的方法，compolete選擇了和未選擇都會執行的方法
        　　　　　　　　　　var localIds = res.localIds; // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片
   　　　　　　　　　　　　　　 }
　　　　　　　　　　　　　　});
                      angular坑來了，ng-show不能解析微信本地地址連接，致使沒法顯示圖片。無奈只能經過js賦值來實現，剛開始是動態建立致使標籤並添加angular指令，因爲angular的安全機制，這樣建立已經沒法監聽到變量的變化，因此angular指令失效。
                      因此將angularJS中的ng-chang、ng-click都改爲js原生的onclick、onchange。如此亂串總感受有隱患。所以使用angular的另外一種方法，利用服務directive建立標籤

　　　　　　　　　　　　appofproduct.directive('wxImg', function() {
　　　　　　　　　　　　　　return {
　　　　　　　　　　　　　　　　restrict: 'E',
　　　　　　　　　　　　　　　　replace: true,
　　　　　　　　　　　　　　　　template: '<div class="maxsize background-add"></div>',
　　　　　　　　　　　　　　　　link: function(scope, elem, attr) {
　　　　　　　　　　　　　　　　scope.$watch('pic', function(nowVal) {
　　　　　　　　　　　　　　　　elem.css('backgroundImage','url("'+nowVal+'")'); //這裏能夠使用jquery的方法進行添加，是否是最開始能夠利用angu.element（elem）.css('backgroundImage','url("'+nowVal+'")')來一個循環賦值，就不用這麼麻煩了。
　　　　　　　　　　　　　　　　});
　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　};
　　　　　　　　　　　　});

這裏解決了圖片展現的問題，微信可沒這麼簡單，誰知道ios並不能展現，坑！！！解決方案

　　　　　　　　　　　　　　wx.getLocalImgData({
　　　　　　　　　　　　　　　　localId: result.localIds[i], // 圖片的localID 並且不能以數組的形式，只能一張一張的解析展現。
　　　　　　　　　　　　　　　　success: function (res) {
　　　　　　　　　　　　　　　　var localData = res.localData; // localData是圖片的base64數據，能夠用img標籤顯示
　　　　　　　　　　　　　　　　$scope.localids.push(localData);
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　});

　　　　　　　　　　　　接下來調用sdk uplod上傳接口，坑又來了，沒有想象的那麼簡單。ios上傳的圖片沒法展現。解決方案：

　　　　　　　　　　　　　　　　uploadImages(uploadString); //uploadString爲wx.getLocalImgData解析後的ios地址組成的數組，這裏若是使用微信原生沒解析的地址進行上傳會不會出現問題呢，當時項目代碼太多，沒有多想，之後用到在嘗試吧。
　　　　　　　　　　　　　　　　function uploadImages(localImagesIds) {
　　　　　　　　　　　　　　　　if (localImagesIds.length === 0) {
　　　　　　　　　　　　　　　　　　return ;
　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　var localId = localImagesIds[0];
　　　　　　　　　　　　　　　　　　//解決IOS沒法上傳的坑
　　　　　　　　　　　　　　　　if (localId.indexOf("wxlocalresource") != -1) {
　　　　　　　　　　　　　　　　localId = localId.replace("wxlocalresource", "wxLocalResource");
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　wx.uploadImage({
　　　　　　　　　　　　　　　　isShowProgressTips:0,
　　　　　　　　　　　　　　　　localId: localId, // 須要上傳的圖片的本地ID，由chooseImage接口得到。參數只能爲字符串，不能爲數組　　　　　　　　　　　　　　　　success: function (res) { 　　　　　　　　　　　　　　　　　　$http.get(api_EndPoint + "/wechat/imgToOss?token=" + $cookieStore.get("token") + "&mediaId=" + res.serverId).then(function(result) { 　　　　　　　　　　　　　　　　if(result.data.code == 0) { 　　　　　　　　　　　　　　　　$scope.order.orderSkuWarpList[index].aliSrc.push(result.data.data); 　　　　　　　　　　　　　　　　　　} else { 　　　　　　　　　　　　　　　　mAlert("error", result.data.msg); 　　　　　　　　　　　　　　　　　　}; 　　　　　　　　　　　　　　　　　}); 　　　　　　　　　　　　　　　　uploadString.shift(); 　　　　　　　　　　　　　　　　　uploadImages(uploadString); 　　　　　　　　　　　　　　　　　　}, 　　　　　　　　　　　　　　　　fail: function (res) { 　　　　　　　　　　　　　　　　mAlert('info','上傳失敗，請從新上傳！'); 　　　　　　　　　　　　　　　　　} 　　　　　　　　　　　　　　　　}); 　　　　　　　　　　　　　　　　}