AngularJS進階(二十七)實現二維碼資訊的整合思路
阿新 • • 發佈:2019-02-19
AngularJS實現二維碼資訊的整合思路
贈人玫瑰,手留餘香。若您感覺此篇博文對您有用,請花費2秒時間點個贊,您的鼓勵是我不斷前進的動力,與君共勉!需求
實現生成的二維碼包含訂單詳情資訊。
思路
獲取的內容資料如下:
現在可以獲取到第一級資料,第二級資料data獲取不到。利用第一級資料的獲取方法獲取不到第二級資料。
for(i in data){ alert(i); //獲得屬性 if(typeof(data[i]) == "object"){ var tmp = data[i]; for(j in tmp){ alert(tmp[j]); } }else{ alert(data[i]); //獲得屬性值 } }
經過層層解析,獲取到的資料結構如下所示:
經過進一步的優化改進,獲取到的資料詳情如下所示:
接下來面臨的問題就是:如何實現兩個html頁面間傳值?通過搜尋,不同頁面之間的傳值方法有:1.地址傳值(get) 2.cookie 3.localstorage 4.sessionStorage 5.flash 6.依賴後端伺服器。根據不同場景和需求選擇不同方案。
經過自己的多次嘗試,終於在localstorage這條路上走通了。
但是在二維碼顯示的環節上遇到了問題,太大(見下圖左)的話影響佈局,太小(見下圖右)的話二維碼無法解析。
自己必須找到一個折中的辦法,看來得重新佈局一下了,原始佈局如下所示:
改善的頁面佈局如下:
核心程式碼
js
var tmp; var medInfo = "{"; for(i in data){ //alert(i); // 獲得屬性 var trans; // 對獲取資訊進行篩選 if(typeof(i) != "undefined" && i != "stat" && i != "merch_uid" && i != "result" && i != "errtext") { switch (i) { case "tx_time": trans = "交易時間"; break; case "buy_uid": trans = "購藥者帳號"; break; case "buy_addr": trans = "收貨地址"; break; case "receiver": trans = "收貨人"; break; case "receiver_tel": trans = "收貨人電話"; break; case "old_amt": trans = "藥品總價"; break; case "amt": trans = "支付金額"; break; case "merch_name": trans = "配送藥店"; break; case "msg": trans = "客戶留言"; break; case "cnt": trans = "藥品種類"; break; case "data": trans = "藥品列表"; break; default: } medInfo += "\"" + trans + "\":"; if(typeof(data[i]) == "object"){ tmp = data[i]; //alert("這是一個object物件"); }else{ //alert(data[i]); // 獲得屬性值 medInfo += "\"" + data[i] + "\",\n"; } } } //alert(tmp.length); tag = 1; // 獲取二級資料(購物車內容) for(k = 0; k < tmp.length; k++){ zqy = tmp[k]; for(j in zqy){ //alert(j); var trans; // 對獲取資訊進行篩選 switch (j) { case "medcnt": trans = "藥品數量"; break; case "medamt": trans = "金額總計"; break; case "medname": trans = "藥品名稱"; break; case "medprice": trans = "藥品價格"; break; case "medid": trans = "藥品ID"; break; default: } if(tag == 1){ medInfo += "\n[\"" + trans + "\":"; tag = 2; }else{ medInfo += "\"" + trans + "\":"; } //alert(zqy[j]); medInfo += "\"" + zqy[j] + "\",\n"; } if(k == tmp.length-1){ medInfo += "]"; }else{ medInfo += "],["; } } medInfo += "}"; //alert(medInfo);// 最終的訂單詳情 document.getElementById("sunny").innerHTML = medInfo; //alert(document.getElementById("sunny").innerHTML); localStorage.setItem('billInfo', medInfo);
Html js
<script>
// 當頁面載入的時候可以呼叫某些函式
window.onload = function(){
// alert(localStorage.getItem('billInfo'));
console.log(localStorage.getItem('billInfo'));
var a = parent.document.getElementById("sunny");
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 96, // 設定二維碼寬高96
height : 96
});
qrcode.makeCode(localStorage.getItem('billInfo')); // 預設二維碼內容
// qrcode.makeCode("http://192.168.1.105:8088/lmapp/billInformation.html");
};
</script>
有圖有真相
掃碼後效果圖