实战使用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) – 迈向后端
接上一篇系列文章,在本文中,将在WebStorm中继续开发,实现页面的功能。这需要一个页面一个页面的开发,来完成功能。本文将侧重把所有页面的UI都实现出来,先把前端的工作都完成了,然后再去链接后端的 RESTful Service。
登陆页面
给页面添加 login.html 添加页面Html代码。
<ion-view title="用户登录"> <ion-content class="padding"> <div class="login-title"> <h2 class="energized">方便每一天</h2> <h2 class="assertive">配送系统</h2> </div> <div> <form novalidate="novalidate" on-valid-submit="doLogin()"> <label class="item item-input validated"> <span class="input-label" for="account">账号</span> <input id="account" type="text" ng-model="user.name" placeholder="账号" required="required" name="account" /> <i class="icon ion-alert-circled error"></i> </label> <label class="item item-input validated"> <span class="input-label" for="password">密码</span> <input id="password" type="password" ng-model="user.password" placeholder="********" required="required" name="password" /> <i class="icon ion-alert-circled error"></i> </label> <label class="item"> <button type="submit" class="button button-block button-positive icon ion-person icon-text">登录</button> </label> </form> </div> </ion-content></ion-view>
为了实现,输入框的验证功能,需要给AngularJS加入两个自定义的标签: on-valid-submit, validated 由于这是一个全局的验证功能就把它添加到app.js ddApp module下,如果只针对某个页面,可以只添加到这个页面的 controller 下。
到这里登陆页面的UI就完成了。
列表页面
首先构建派送列表页的Html内容:
<ion-view view-title="{{now | date:yyyy年M月d日}}"> <ion-nav-bar class="bar bar-balanced" align-title="center"> <ion-nav-buttons side="left"> <li class="button icon icon-left ion-chevron-left" ng-click="doLogout()">退出</li> </ion-nav-buttons> </ion-nav-bar> <ion-content class="list order-list"> <ion-item class="item order-item" ng-repeat="order in orders"> <img class="order-img" ng-src="{{order.qrSrc}}" ng-click="goDetail(order.id)" /> <div class="order-text"> <h2 ng-click="goDetail(order.id)">{{order.code}}</h2> <h3>{{order.pickTime}}</h3> </div> <div class="order-check" ng-click="goDetail(order.id)"> <a class="button icon-right ion-chevron-right button-clear button-assertive"></a> </div> </ion-item > </ion-content> <div class="bar bar-footer bar-positive"> <div class="button-bar"> <li class="button icon ion-ios-keypad icon-text" ng-click="goManual()">手动输入</li> <li class="button icon ion-qr-scanner icon-text" ng-click="goScan()">扫描二维码</li> </div> </div></ion-view>
为了展示数据,这里在Service里做了一个MockDB使用这个MockDB为App提供数据,这样当请求使用后端数据的时候,只要后端的RESTful Service 也返回同样规格的数据就可以了。
这里代码比较多,具体代码在 services.js 中。
接下来处理 派送列表 的 controller 把页面动作交互和数据连上:
到这里派送列表页,就处理完了:
详细页面
添加 详细页面 html 代码:
<ion-view view-title="{{now | date:yyyy年M月d日}}"> <ion-nav-bar class="bar bar-balanced" align-title="center"> <ion-nav-buttons side="left"> <li class="button icon icon-left ion-chevron-left" ng-click="doLogout()">退出</li> </ion-nav-buttons> </ion-nav-bar> <ion-content class="list order-list"> <ion-item class="item order-item" ng-repeat="order in orders" ng-click="goDetail(order.id)"> <img class="order-img" ng-src="{{order.qrSrc}}" ng-click="goDetail(order.id)" /> <div class="order-text"> <h2 ng-click="goDetail(order.id)">{{order.code}}</h2> <h3>{{order.pickTime}}</h3> </div> <div class="order-check"> <a class="button icon-right ion-chevron-right button-clear button-assertive"></a> </div> </ion-item > </ion-content> <div class="bar bar-footer bar-positive"> <div class="button-bar"> <li class="button icon ion-ios-keypad icon-text" ng-click="goManual()">手动输入</li> <li class="button icon ion-qr-scanner icon-text" ng-click="goScan()">扫描二维码</li> </div> </div></ion-view>
添加页面 controller :
到这一步 详细页面完成了:
接下来就是手动输入页面,和扫描页面,这两个页面比较简单,类似于前面的页面,写好页面Html,配置好 controller 的内容,就可以了。
到这里所有页面的 UI 都完成了。 你可以到 https://github.com/zhangsichu/DeliveryApp/releases/tag/AllPageUI 下载这个阶段的代码。
也可以使用 git checkout AllPageUI 取得
git checkout AllPageUI |
原文链接:http://zhangsichu.com/blogview.asp?Content_Id=158
实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI相关推荐
- uni-app实战之社区交友APP(9)我的页面开发
文章目录 前言 一.个人中心和设置页面开发 1.pages.json配置 2.个人中心UI构建 3.设置页UI构建 二.修改密码和邮箱页面开发 1.修改密码UI构建 2.修改密码表单验证功能实现 3. ...
- Axure 设计App界面
首先下载,元件库才行 然后手机模型: 大小:https://www.axure.com.cn/2322/ iPhone4 320480 iPhone5 320568 iPhone6 375*667 i ...
- 实战:移动APP项目产品开发流程详解
问题补充:移动端APP产品的开发流程是如何的?开发移动端APP,从产品需求规划到最终上线发版,都有哪些必要流程,其中需要重点注意的事情有哪些,可以基于你当前的工作情况酌情回答. 黄沐秋Moon NBP ...
- uni-app实战之社区交友APP(15)聊天功能开发和后端API部署
文章目录 前言 一.APP版本更新模块开发 1.数据表设计 2.检查更新API开发 二.聊天模块开发 1.数据表设计 2.发送消息API开发 三.后端API源码部署 1.云服务器部署项目代码 2.配置 ...
- uni-app实战之社区交友APP(11)API环境搭建和登录API开发
文章目录 前言 一.后端API环境搭建 1.后端线上环境部署 2.Postman安装使用 3.PyCharm和数据库管理 4.创建项目 5.数据库创建和配置 二.API开发准备 1.数据表设计 2.封 ...
- 专业App开发:设计App图标的三个关键点
每个App都需要一个漂亮的图标,而每个设计师也都力图让自己App的图标看起来漂亮而吸引人.为了在App Store 和App列表中脱颖而出,优质的图标设计是如此的让设计师渴求.失败的App图标设计有着 ...
- uni-app实战之社区交友APP(5)搜索和发布页开发
文章目录 前言 一.搜索页开发 1.搜索页面搭建 2.搜索结果显示和优化 二.发布页开发 1.自定义导航栏开发 2.文本域组件使用 3.底部操作条组件开发 4.多图上传功能开发 5.删除选中图片功能实 ...
- Java生鲜电商平台-App系统架构开发与设计
Java生鲜电商平台-App系统架构开发与设计 说明:阅读此文,你可以学习到以下的技术分享 1.Java生鲜电商平台-App架构设计经验谈:接口的设计 2.Java生鲜电商平台-App架构设计经验谈: ...
- AXURE RP8 - 实战手册 网站和APP原型制作案例精粹
AXURE RP8 - 实战手册 网站和APP原型制作案例精粹 扫码时备注或说明中留下邮箱 付款后如未回复请至https://shop135452397.taobao.com/ 联系店主 posted ...
最新文章
- (0075)iOS开发之cocoapods使用OpenSSL报target has libraries with conflicting names: libcrypto.a and libssl.a
- [vue-cli] vue-cli中你经常的加载器有哪些?
- 【Python实战】使用python批量生成发票
- XP下安装装SQL2000企业版本
- VUE颜色选择器插件vColorPicker
- 2022考研-高等数学教程
- html css手机端响应式登录页面
- 强烈推荐非常好用的网站
- OA系统实施:理清OA需求很关键
- pytorch:自定义损失函数total variation loss
- addrule android用法,RelativeLayout.LayoutParams 使用addRule失效的问题解决办法
- 【GANs学习笔记】目录
- 小天才z6官方禁用怎么关闭_我告诉你小天才z6隐藏功能
- Nature计算社会科学特刊:如何对21世纪人类社会进行有意义的度量?
- sysconfig看不了怎么更新_sysconfig老版本下载-sysconfig稳定版(能看的版本)_5577安卓网...
- android view 曝光,Android 曝光采集(商品view曝光量的统计)第二弹
- 使用sql语句实现 报表的小计合计
- 益智小游戏《测试脑力》源码H5+安卓+IOS三端源码
- OpenShift 4 - 有关 Operator 相关概念和运维操作
- 2022-2028全球与中国在线招聘软件市场现状及未来发展趋势
热门文章
- Less Css 教程
- OpenSSL漏洞补救办法详解(转)
- 博弈论入门 HDU 1850
- 知识点 - 学习过程中积累
- 全国计算机等级考试题库二级C操作题100套(第50套)
- 清理localstorage_vue 界面刷新数据被清除 localStorage的使用详解
- fastdfs 吗 支持windows_主流开源文件存储系统-fastdfs是否支持windows?你可以选择minio...
- java 负数存储结构_负数在java中的存储和读取过程 | 学步园
- php外联样式,css外联样式不起作用怎么办
- 15 张图,了解一下 TCP/IP 必知也必会的 10个要点