实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能
2015-09-15 10:31
597 查看
系列文章
实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求实战使用Axure设计App,使用WebStorm开发(2) – 构建页面架构实战使用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 |
相关文章推荐
- iOS 禁止横屏
- Xamarin.Android使用教程之Android开发所需的模拟器
- Android中SharedPreferences使用方法介绍
- 【iOS】OC与JS交互 网页中调用JS与JS注入
- JNI_Android项目中调用.so动态库实现详解【转】
- Android之xml解析2,3
- Android USER 版本与ENG 版本的差异
- 获取手机里所有的app并点击相应的图标开启相应的程序
- Android数据存储(3)——SQLite数据库的操作_增删改查完整输出
- Cordova for iOS —— 创建Cordova工程
- Android之xml解析
- iOS界面设计切图小结
- Android手机 Fildder真机抓包
- Android(java)学习笔记251:ContentProvider使用之添加数据到联系人(掌握)
- IOS中的音频视频处理
- 【iOS】关联属性存取数据
- android iw
- Android AndroidStudio环境下控制状态栏颜色
- Android 中Activity,Window和View之间的关系
- iOS 识别系统内部地址、电话信息并点击可跳转至系统自带软件