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>

有图有真相

扫码后效果图

参考文献

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

美文美图

AngularJS进阶(二十七)实现二维码信息的集成思路的更多相关文章

  1. 程序猿媛 九:Adroid zxing 二维码3.1集成(源码无删减)

    Adroid zxing 二维码3.1集成 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段. 转载请保留原文出处“http://my.oschina.net/gluoyer/blog”, ...

  2. 使用Typescript重构axios(二十七)——添加请求状态码合法性校验

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  3. com.google.zxing.NotFoundException-识别图片二维码信息错误

    一.问题由来 自己在做一个小程序项目的后台,其中需要使用到识别图片二维码信息,而且是必须在Java后台进行识别二维码操作.去百度里面很快找到一个方法, 可以识别简单的二维码,而且自己生成的简单的二维码 ...

  4. (转)OpenFire源码学习之二十七:Smack源码解析

    转:http://blog.csdn.net/huwenfeng_2011/article/details/43484199 Smack Smack是一个用于和XMPP服务器通信的类库,由此可以实现即 ...

  5. Java扫描二维码进行会议签到思路

    1:签到页面都是同一个JSP页面 2:根据不同的会议ID进行拼接URL跳转页面进行签到 JSP页面代码如下 <%@ page language="java" pageEnco ...

  6. Unity 游戏框架搭建 2019 (二十七、二十八)弃用的代码警告解决&弃用的代码删除

    在前两篇,我们把所有的示例重头到尾整理了一遍. 当前的状态如下: 要做的事情: (完成) 备份:导出文件,并取一个合理的名字. 遗留问题: (完成) 第八个示例与之前的示例代码重复,功能重复. (完成 ...

  7. Pytest 学习(二十七)- Jenkins+Allure+Pytest的持续集成

    一.配置 allure 环境变量 1.下载 allure是一个命令行工具,可以去 github 下载最新版:https://github.com/allure-framework/allure2/re ...

  8. AngularJS进阶(三十七)IE浏览器兼容性后续

    IE浏览器兼容性后续 前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery.angularjs.IE的版本. 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js ...

  9. Android进阶笔记06:Android 实现扫描二维码实现网页登录

    一. 扫描二维码登录的实现机制: 详细流程图: (1)PC端打开网页(显示出二维码),这时候会保存对应的randnumber(比如:12345678). (2)Android客户端扫码登录,Andro ...

随机推荐

  1. windows下python3.5使用pip离线安装whl包

    0. 绪论 Windows离线断网环境下安装Python包,配置环境,准备用来生成word模版.姑且记录一下 生产环境 : windows 7 windows10 python 3.5.2 pip 1 ...

  2. Jeff Atwood倾情推荐——程序员必读之书

    英文版:<Code Complete 2>中文版:<代码大全(第二版)>作者:Steve McConnell译者:金戈  汤凌  陈硕  张菲出版社:电子工业出版社出版日期:2 ...

  3. md编辑器测试

    markdown 这是一个代码 print

  4. proc文件系统探索 之 根目录下的文件[二]

    包括对proc根目录下stat,uptime,swaps三个文件的解析. /proc/stat 文件包含了系统启动后的一些系统统计信息. Cat /proc/stat: cpu 77781 1077 ...

  5. 高端技巧:如何使用#define定义变量

    Introduction 想在源文件中定义一个跟行号有关的变量,每次都手动输入实在是太慢了,本文介绍如何使用宏定义来定义与行号有关的变量. 例如:我们想在源代码的第10行定义A_10这样的一个整形变量 ...

  6. 制作pypi上的安装库

    下载地址 如何制作分发工具呢 setuppy 源码包 其他文件 制作过程 首先上场的肯定是setuppy了如下 然后是LICENCE 注册 测试 总结 自从接触Python以来也有几个月了,虽然主要的 ...

  7. Android之使用参数改变ProgressDialog的位置、大小、背景透明度、屏幕透明度

    废话不多说,这个改变ProgressDialog的一些配置属性和前面我讲的AlertDialog的设置参数方法一模一样,这里就为了更直观,直接贴实现代码吧: ProgressDialog mProgr ...

  8. [ExtJS5学习笔记]第二十三节 Extjs5中表格gridpanel的列格式设置

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/39665979 官方文档:http://docs.sencha.com/extjs/5. ...

  9. Servlet之Request对象

    下面的方法可用在 Servlet 程序中读取 HTTP 头.这些方法通过HttpServletRequest 对象可用. 1    Cookie[] getCookies() 返回一个数组,包含客户端 ...

  10. erMaster插件

    需求: 在做开源项目时,了解基本业务后.试图从数据库表设计来分析项目.通过visio时绘制操作繁琐,另外不能与数据库连动.于是想找一款快速绘制er图,并且能够和数据库连动的软件工具. eclipse插 ...