# AngularJS實現二維碼信息的集成思路 贈人玫瑰，手留余香。若您感覺此篇博文對您有用，請花費2秒時間點個贊，您的鼓勵是我不斷前進的動力，與君共勉！ [**注：點擊此處進行知識充電。**](http://blog.csdn.net/sunhuaqiang1/article/details/50475429) ### 需求 實現生成的二維碼包含訂單詳情信息。 ### 思路 獲取的內容數據如下: ? 現在可以獲取到第一級數據，第二級數據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> ~~~ ### 有圖有真相 掃碼后效果圖  ? ### 參考文獻 1.?[http://blog.csdn.net/zccst/article/details/6185856](http://blog.csdn.net/zccst/article/details/6185856) 2.?[http://zhidao.baidu.com/link?url=Jktv0wA9m7BO-K52gozTBHKGetj-dywKAZokiO1FQQ8cvOyVd5iK8Zas9O6YZ_OEg4byCgUI75_53pJ4aPfayRMKebfeyfGXjQPC1ShQTs_](http://zhidao.baidu.com/link?url=Jktv0wA9m7BO-K52gozTBHKGetj-dywKAZokiO1FQQ8cvOyVd5iK8Zas9O6YZ_OEg4byCgUI75_53pJ4aPfayRMKebfeyfGXjQPC1ShQTs_) 3.?[http://www.cnblogs.com/wangxiang/p/3332797.html](http://www.cnblogs.com/wangxiang/p/3332797.html) 4.?[http://blog.csdn.net/happyflyingave/article/details/25415413](http://blog.csdn.net/happyflyingave/article/details/25415413) 5.?[http://www.jb51.net/article/47692.htm](http://www.jb51.net/article/47692.htm) 6.?[http://my.oschina.net/adamboy/blog/74162](http://my.oschina.net/adamboy/blog/74162) 7.?[http://www.w3school.com.cn/tiy/t.asp?f=html_table_span](http://www.w3school.com.cn/tiy/t.asp?f=html_table_span) 8.?[http://cli.im/text?text37aa640da147831f1126ba0e06e10797](http://cli.im/text?text37aa640da147831f1126ba0e06e10797) ### 美文美圖