There can be no Triumph without Loss,No Victory without Suffering,No Freedom without Sacrifice.
All you have to decide is what to do with the time that is given to you.
Get busy Living, or Get busy Dying?
  首页 | 留言给我 | 订阅 Rss | CLI | 黄白之恋 Posts:158   Hits: 5544965    Comments: 173    
 日历归档
<<  <  2024 - 11  >  >>
SuMoTuWeThFrSa
     12
3456789
10111213141516
17181920212223
24252627282930
 About Me
 Name: ZhangSichu
 Sex: Male
 Age: 32
 Email: ZhangSichu@gmail.com
 MSN: ZhangSichu@hotmail.com
 Home: ZhangSichu.com
 WeiBo: weibo.com/zhangsichu
 个人推荐
 分类归档
  ·C++/C(5)  RSS
  ·软件工程(1)  RSS
  ·杂事/随感(26)  RSS
  ·.Net/Java(30)  RSS
  ·面向对象程序设计(5)  RSS
  ·汇编/破解(0)  RSS
  ·平面设计(3)  RSS
  ·SQL(5)  RSS
  ·COM/COM+(2)  RSS
  ·Web开发(81)  RSS
 My Friends
Back Forward Refresh Home 2024年11月22日 星期五 RSS CLI Mine Sweeper. In Javascript.

  实战使用Axure设计App使用WebStorm开发 – 实现页面功能
字体大小 [大 中 小]

接上一篇系列文章，在本文中，将进一步的去实现页面功能。去实现输入页面功能，二维码扫描功能。完成App的前端工作。

输入页面

当派送员输入订单号码的时候，首先检查一下单号是否有效，如果有效直接进入订单详情页面，如果无效则提示订单无效，提示用户重新输入。
Click to Open in New Window

最后完成的效果
Click to Open in New Window


扫描二维码页面

首先安装 Barcode Scanner 支持 http://ngcordova.com/docs/plugins/barcodeScanner/
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git

Click to Open in New Window

然后安装 ng-cordova https://github.com/driftyco/ng-cordova/releases 下载Javascript 文件，将文件放到lib/angular下，并在 index 里引入 ng-cordova的引用
Click to Open in New Window

在 app 里 注入 ngCordova
Click to Open in New Window

最后就是使用 $cordovaBarcodeScanner 对象，分别处理扫描成功和失败的操作。
Click to Open in New Window

由于扫描功能打开了一个单独的摄像头页面，在这个页面就可以完成扫描功能了，所以之前设计的扫描页面可以不用了。
扫描功能需要连接实际的机器才能测试，模拟器不好测试扫描功能。
Click to Open in New Window

到这里所有的页面基础功能就完成了，在下一篇中将连接后端服务，实现用户登录功能，并去掉前端的MockDB，使用服务器端的数据。
本阶段代码可以在 https://github.com/zhangsichu/DeliveryApp/releases/tag/PageFunctions 下载到。 也可以 git checkout PageFunctions
git checkout PageFunctions
  Posted @ 8/6/2015 3:01:25 PM | Hits (11094) | Comment (0) 

  Post Comment
标题 *
作者 *
密码 记住我
评论 *
    


Stable in Firefox 1.5 2.0Stable in IE6 IE7Stable in MozillaStable in Netscape
ZhangSichu.com V0.1.7507
Powered By ZhangSichu
Copyright © ZhangSichu
Download ZhangSichu.com source code. Download source code