实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

 系列文章

实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 

实战使用Axure设计App,使用WebStorm开发(2) – 建立 Ionic 项目  

实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构 

实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI

实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

 

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

输入页面

当派送员输入订单号码的时候，首先检查一下单号是否有效，若是有效直接进入订单详情页面，若是无效则提示订单无效，提示用户从新输入。


最后完成的效果



扫描二维码页面

首先安装 Barcode Scanner 支持 http://ngcordova.com/docs/plugins/barcodeScanner/

cordova plugin add https://github.com/wildabeast/BarcodeScanner.git

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


在 app 里 注入 ngCordova


最后就是使用 $cordovaBarcodeScanner 对象，分别处理扫描成功和失败的操做。


因为扫描功能打开了一个单独的摄像头页面，在这个页面就能够完成扫描功能了，因此以前设计的扫描页面能够不用了。
扫描功能须要链接实际的机器才能测试，模拟器很差测试扫描功能。


到这里全部的页面基础功能就完成了，在下一篇中将链接后端服务，实现用户登陆功能，并去掉前端的MockDB，使用服务器端的数据。
本阶段代码能够在 https://github.com/zhangsichu/DeliveryApp/releases/tag/PageFunctions 下载到。 也能够 git checkout PageFunctions

 

git checkout PageFunctions

 

原文连接：http://zhangsichu.com/blogview.asp?Content_Id=159