实战使用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

时间: 2024-09-11 16:47:04

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

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

系列文章 实战使用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) –

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

系列文章 实战使用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) –

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

 系列文章 实战使用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)

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

系列文章 实战使用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) –

《妥协的完美主义:优秀产品经理的实践指南(卷二)》一第1章 App产品设计团队进化史1.1 在没有产品设计团队的软件开发时期

第1章 App产品设计团队进化史 妥协的完美主义:优秀产品经理的实践指南(卷二) 在App的开发过程中,常常有两股主要矛盾力量:开发人员和市场人员. 尽管市场人员精通市场.定价,善于掌握商机,但他们对产品设计和过程的要求,只局限在需求列表.需求清单上,列出他们所需功能,这些需求同用户的实际需要和期望有一定差距,主要在于如何超越竞争对手,如何赚取更多的利润,这些需求的来源基于市场调研和对用户心理的猜测: "市场数据的表现是这样的,用户可能是因为某某原因不喜欢使用我们的产品." "

网易严选App感受Weex开发

自打出生的那一天起,WEEX就免不了被拿来同React Native"一决高下"的命运.React Native宣称「Learn Once, Write Anywhere」,而WEEX宣称「Write Once, Run Everywhere」.在我看来,并没有谁更好,只有谁更合适.下面我将围绕WEEX入门进行讲解. (如果你尚不了解React Native,并想简单入门,可以阅读[整理]ReactNative快速入门笔记) 网易严选App感受Weex开发 什么都不说,先给你感受下we

html5-开发HTML5 web和移动app用什么开发工具好呢?

问题描述 开发HTML5 web和移动app用什么开发工具好呢? 看了些html5的一些新闻,有推荐使用HBuilder的,试了下,是挺快的. 但是不知道现在主流的开发工具是什么? http://www.25xt.com/html5css3/6817.html 这个网站说2015必火的5个开发工具 解决方案 其实最牛逼的一种方式是用text文件编写,或者用Editplus这种方式比较好,特别是对于初学者来说.

android开发-app网上商城开发,后台架构如何

问题描述 app网上商城开发,后台架构如何 如题,只用serverlet和javabean可行吗?不用ssh框架,图片和视频存储方案是怎样的 解决方案 你可以试试Bmob,连租服务器的钱都省了 解决方案二: 你可以试试Bmob,连租服务器的钱都省了

ios-IOS上是否可以开发这些方面的功能?

问题描述 IOS上是否可以开发这些方面的功能? 我想开发一个IOS的APP,下面两个功能能不能实现?也就是IOS是否开放了相关的API接口: 就是有来电时,APP能自动接听来电,并且能够截取到语音的内容,并且把语音转换成G711文件. 能够用APP发起呼叫,并且把指定的语音文件作为通话的语音发送给对方. 请牛人帮忙解答一下.谢谢! 解决方案 肯定能有这方面的功能,你可以下载一个微会看看,这个aap实现了功能二,而功能一,这不是电话答录机的功能吗?