实战使用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) – 实现页面功能

接上一篇系列文章,在本文中,将进一步的去实现页面功能。去实现输入页面功能,二维码扫描功能。完成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-07-30 13:49:31

实战使用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) – 实现页面功能 接上一篇系列文章,在本文中,将在WebStorm中继续开发,实现页面的功

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

系列文章 实战使用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开发 – 构建页面架构

在本文中,将继续介绍在 WebStorm 中开发,去实现App的功能需求. 就像盖房子一样,第一步需要把整个工程的页面结构先勾勒出来,先让各个页面流转起来,然后再去细化每个页面. 所有工程代码放在了 https://github.com/zhangsichu/DeliveryApp 同时上篇文章中创建的初始化工程,也Tag了 TheInitialProject,您可以使用 Git checkout 这个Tag, 也可以直接到:https://github.com/zhangsichu/Deliv

实战厕所在哪APP视频教程 react native服务端实战项目实战开发教程

一个很好且包含服务端的实战项目视频教程!学习本视频最后有Node基础! ------------------课程目录------------------ <react native 快速开发App>├reactnative厕所在哪源码.zip├<第八章 App阅读模块开发>│  ├8-1 阅读模块功能设计.avi│  ├8-10 列表使用listview组件.avi│  ├8-11 数据列表展示.avi│  ├8-12 完善详情页.avi│  ├8-2 五大模块创建和加载.avi│

使用Axure制作App原型的尺寸设置

想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?这里直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置即可. 如: iPhone4 320*480iPhone5  320*568 iPhone6  375*667 iPhone 6 Plus 414*736 Samsung Galaxy S

上门洗车APP --- Android客户端开发 前言及业务简介

上门洗车APP --- Android客户端开发 前言及业务简介 最近有些小累,私自接了一个项目,利用空余时间在开发,也比较乏力,时间和精力上有时候分配不过来,毕竟公司的事情要忙,只能自己抽时间来完成了,男人嘛,累点好,舒服是留给死人的(套用了一句逼格的话,o_O"~). 项目目前还在开发中,接口的调试以及业务的分析,框架的搭建,客户端这边已进行的差不多了,明天端午节,先祝大家节日快乐,汗~,看了下时间,貌似博客写完发表已经是端午节了,好吧,咕嘟咕嘟...... 大晚上的也是睡不着,写写博客,总

BI之SSAS完整实战教程6 -- 设计维度、细化维度上:创建维度定义特性关系

前面我们使用过数据源向导.数据源视图向导.Cube向导来创建相应的对象. 本篇我们将学习使用维度向导来创建维度. 通过前面几个向导的学习,我们归纳一下共同点,主要分成两步 1. 使用某种对象类型的向导创建对象,完成主要结构搭建 2. 使用相应的设计器完成最终对象的修改和细化 有点像送快递,先通过大的物流(创建对象向导)把货物送到相应的城市,再通过快递员(设计器进行细化)送到具体顾客手中. 同样的,我们使用维度向导以一种通用的方式来创建维度,然后根据自己的业务需求,使用维度设计器将创建的维度放置到

“简密”App Store处女作开发总结

前言 今天是我的iOS App Store上架应用处女作"简密"第一天上线的日子,简密是我从事iOS开发三年以来的第一款个人上架应用,之前做过两年的企业级应用开发以及公司的电商应用开发,有不少应用上架的经验,但要是论全然从头到尾,设计.制图.开发.測试.文案.广告以及部署上架全然由自己一人完毕,"简密"确实是我的处女作.不论上架之后销售效果怎样,这次开发的过程帮我又一次梳理了一遍iOS App Store应用开发上架的整个流程,这点是我认为做这件事意义最大的地方,当

用WebStorm开发TypeScript

为什么是TypeScript 最近在做H5的游戏,最终选定的TypeScript作为开发语言.主要是看重他有强类型和Class,作为习惯使用AS3,Java等强类型编程的人来说,还是习惯这种编程写法.听一些直接使用JavaScript开发稍微大的游戏的同事说,没有强类调试什么的都比较困难.我个人平时做小游戏用得比较多是纯js,比较大型的倒没尝试,所以这个不好下断论.另外一个主要原因是因为用TypeScript随时可以生成兼用不同ES版本和浏览器的代码,这个很重要.最后,国内比较流行的Egret和