AngularJS进阶(二十七)实现二维码信息的集成思路

需求

      实现生成的二维码包含订单详情信息。

思路

获取的内容数据如下:

 

      现在可以获取到第一级数据，第二级数据data获取不到。利用第一级数据的获取方法获取不到第二级数据。

[javascript] view plain copy

print?

1. for(i in data){  
2. alert(i);           //获得属性   
3. if(typeof(data[i]) == "object"){  
4. var tmp = data[i];  
5. for(j in tmp){  
6. alert(tmp[j]);  
7. }  
8. }else{  
9. alert(data[i]);  //获得属性值  
10. }  
11. }  

      经过层层解析，获取到的数据结构如下所示:

 

      经过进一步的优化改进，获取到的数据详情如下所示:

 

      接下来面临的问题就是:如何实现两个html页面间传值？通过搜索,不同页面之间的传值方法有:1.地址传值(get)  2.cookie  3.localstorage  4.sessionStorage  5.flash  6.依赖后端服务器。根据不同场景和需求选择不同方案。

      经过自己的多次尝试，终于在localstorage这条路上走通了。

      但是在二维码显示的环节上遇到了问题，太大(见下图左)的话影响布局，太小(见下图右)的话二维码无法解析。

                                       

      自己必须找到一个折中的办法，看来得重新布局一下了，原始布局如下所示:

 

      改善的页面布局如下：

 

核心代码

js

[javascript] view plain copy

print?

1. var tmp;  
2. var medInfo = "{";  
3. for(i in data){  
4. //alert(i);           // 获得属性   
5. var trans;  
6. //  对获取信息进行筛选  
7. if(typeof(i) != "undefined" && i != "stat" && i != "merch_uid" && i != "result" && i != "errtext") {  
8. switch (i) {  
9.     case "tx_time":  
10.         trans = "交易时间";  
11.         break;  
12.     case "buy_uid":  
13.         trans = "购药者账号";  
14.         break;  
15.     case "buy_addr":  
16.         trans = "收货地址";  
17.         break;  
18.     case "receiver":  
19.         trans = "收货人";  
20.         break;  
21.     case "receiver_tel":  
22.         trans = "收货人电话";  
23.         break;  
24.     case "old_amt":  
25.         trans = "药品总价";  
26.         break;  
27.     case "amt":  
28.         trans = "支付金额";  
29.         break;  
30.     case "merch_name":  
31.         trans = "配送药店";  
32.         break;  
33.     case "msg":  
34.         trans = "客户留言";  
35.         break;  
36.     case "cnt":  
37.         trans = "药品种类";  
38.         break;  
39.     case "data":  
40.         trans = "药品列表";  
41.         break;  
42.     default:  
43. }  
44. medInfo += "\"" + trans + "\":";  
45. if(typeof(data[i]) == "object"){  
46. tmp = data[i];  
47. //alert("这是一个object对象");  
48. }else{  
49. //alert(data[i]);  // 获得属性值  
50. medInfo += "\"" + data[i] + "\",\n";  
51. }  
52. }  
53. }  
54. //alert(tmp.length);  
55. tag = 1;  
56. // 获取二级数据(购物车内容)  
57. for(k = 0; k < tmp.length; k++){  
58. zqy = tmp[k];  
59. for(j in zqy){  
60. //alert(j);  
61. var trans;  
62. //  对获取信息进行筛选  
63. switch (j) {  
64.   case "medcnt":  
65.     trans = "药品数量";  
66.      break;  
67.   case "medamt":  
68.     trans = "金额总计";  
69.     break;  
70.   case "medname":  
71.     trans = "药品名称";  
72.     break;  
73.   case "medprice":  
74.     trans = "药品价格";  
75.     break;  
76.    case "medid":  
77.     trans = "药品ID";  
78.     break;  
79.    default:  
80.          
81. }  
82. if(tag == 1){  
83. medInfo += "\n[\"" + trans + "\":";  
84. tag = 2;  
85. }else{  
86. medInfo += "\"" + trans + "\":";  
87. }  
88. //alert(zqy[j]);  
89. medInfo += "\"" + zqy[j] + "\",\n";  
90. }  
91. if(k == tmp.length-1){  
92. medInfo += "]";  
93. }else{  
94. medInfo += "],[";  
95. }  
96. }  
97. medInfo += "}";  
98. //alert(medInfo);// 最终的订单详情  
99. document.getElementById("sunny").innerHTML = medInfo;  
100. //alert(document.getElementById("sunny").innerHTML);  
101. localStorage.setItem('billInfo', medInfo);  

Html js

[javascript] view plain copy

print?

1. <script>  
2.  // 当页面加载的时候可以调用某些函数  
3.     window.onload = function(){  
4. //     alert(localStorage.getItem('billInfo'));  
5. console.log(localStorage.getItem('billInfo'));  
6.         var a = parent.document.getElementById("sunny");  
7.         var qrcode = new QRCode(document.getElementById("qrcode"), {  
8.             width : 96, // 设置二维码宽高96  
9.             height : 96  
10.         });  
11.         qrcode.makeCode(localStorage.getItem('billInfo'));  // 默认二维码内容  
12. //    qrcode.makeCode("http://192.168.1.105:8088/lmapp/billInformation.html");  
13.     };  
14. </script>  

有图有真相

扫码后效果图

 

参考文献

1. http://blog.csdn.net/zccst/article/details/6185856

2. http://zhidao.baidu.com/link?url=Jktv0wA9m7BO-K52gozTBHKGetj-dywKAZokiO1FQQ8cvOyVd5iK8Zas9O6YZ_OEg4byCgUI75_53pJ4aPfayRMKebfeyfGXjQPC1ShQTs_

3. http://www.cnblogs.com/wangxiang/p/3332797.html

4. http://blog.csdn.net/happyflyingave/article/details/25415413

5. http://www.jb51.net/article/47692.htm

6. http://my.oschina.net/adamboy/blog/74162

7. http://www.w3school.com.cn/tiy/t.asp?f=html_table_span

8. http://cli.im/text?text37aa640da147831f1126ba0e06e10797