AngularJS进阶(二十七)实现二维码信息的集成思路
AngularJS实现二维码信息的集成思路
需求
实现生成的二维码包含订单详情信息。
思路
获取的内容数据如下:
现在可以获取到第一级数据,第二级数据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
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
美文美图
AngularJS进阶(二十七)实现二维码信息的集成思路的更多相关文章
- 程序猿媛 九:Adroid zxing 二维码3.1集成(源码无删减)
Adroid zxing 二维码3.1集成 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段. 转载请保留原文出处“http://my.oschina.net/gluoyer/blog”, ...
- 使用Typescript重构axios(二十七)——添加请求状态码合法性校验
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- com.google.zxing.NotFoundException-识别图片二维码信息错误
一.问题由来 自己在做一个小程序项目的后台,其中需要使用到识别图片二维码信息,而且是必须在Java后台进行识别二维码操作.去百度里面很快找到一个方法, 可以识别简单的二维码,而且自己生成的简单的二维码 ...
- (转)OpenFire源码学习之二十七:Smack源码解析
转:http://blog.csdn.net/huwenfeng_2011/article/details/43484199 Smack Smack是一个用于和XMPP服务器通信的类库,由此可以实现即 ...
- Java扫描二维码进行会议签到思路
1:签到页面都是同一个JSP页面 2:根据不同的会议ID进行拼接URL跳转页面进行签到 JSP页面代码如下 <%@ page language="java" pageEnco ...
- Unity 游戏框架搭建 2019 (二十七、二十八)弃用的代码警告解决&弃用的代码删除
在前两篇,我们把所有的示例重头到尾整理了一遍. 当前的状态如下: 要做的事情: (完成) 备份:导出文件,并取一个合理的名字. 遗留问题: (完成) 第八个示例与之前的示例代码重复,功能重复. (完成 ...
- Pytest 学习(二十七)- Jenkins+Allure+Pytest的持续集成
一.配置 allure 环境变量 1.下载 allure是一个命令行工具,可以去 github 下载最新版:https://github.com/allure-framework/allure2/re ...
- AngularJS进阶(三十七)IE浏览器兼容性后续
IE浏览器兼容性后续 前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery.angularjs.IE的版本. 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js ...
- Android进阶笔记06:Android 实现扫描二维码实现网页登录
一. 扫描二维码登录的实现机制: 详细流程图: (1)PC端打开网页(显示出二维码),这时候会保存对应的randnumber(比如:12345678). (2)Android客户端扫码登录,Andro ...
随机推荐
- windows下python3.5使用pip离线安装whl包
0. 绪论 Windows离线断网环境下安装Python包,配置环境,准备用来生成word模版.姑且记录一下 生产环境 : windows 7 windows10 python 3.5.2 pip 1 ...
- Jeff Atwood倾情推荐——程序员必读之书
英文版:<Code Complete 2>中文版:<代码大全(第二版)>作者:Steve McConnell译者:金戈 汤凌 陈硕 张菲出版社:电子工业出版社出版日期:2 ...
- md编辑器测试
markdown 这是一个代码 print
- proc文件系统探索 之 根目录下的文件[二]
包括对proc根目录下stat,uptime,swaps三个文件的解析. /proc/stat 文件包含了系统启动后的一些系统统计信息. Cat /proc/stat: cpu 77781 1077 ...
- 高端技巧:如何使用#define定义变量
Introduction 想在源文件中定义一个跟行号有关的变量,每次都手动输入实在是太慢了,本文介绍如何使用宏定义来定义与行号有关的变量. 例如:我们想在源代码的第10行定义A_10这样的一个整形变量 ...
- 制作pypi上的安装库
下载地址 如何制作分发工具呢 setuppy 源码包 其他文件 制作过程 首先上场的肯定是setuppy了如下 然后是LICENCE 注册 测试 总结 自从接触Python以来也有几个月了,虽然主要的 ...
- Android之使用参数改变ProgressDialog的位置、大小、背景透明度、屏幕透明度
废话不多说,这个改变ProgressDialog的一些配置属性和前面我讲的AlertDialog的设置参数方法一模一样,这里就为了更直观,直接贴实现代码吧: ProgressDialog mProgr ...
- [ExtJS5学习笔记]第二十三节 Extjs5中表格gridpanel的列格式设置
本文地址:http://blog.csdn.net/sushengmiyan/article/details/39665979 官方文档:http://docs.sencha.com/extjs/5. ...
- Servlet之Request对象
下面的方法可用在 Servlet 程序中读取 HTTP 头.这些方法通过HttpServletRequest 对象可用. 1 Cookie[] getCookies() 返回一个数组,包含客户端 ...
- erMaster插件
需求: 在做开源项目时,了解基本业务后.试图从数据库表设计来分析项目.通过visio时绘制操作繁琐,另外不能与数据库连动.于是想找一款快速绘制er图,并且能够和数据库连动的软件工具. eclipse插 ...