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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SDNLAB

【每日播报】如何升级Mininet的Open vSwitch版本

因为Mininet的方便且易用,以及实验条件及真实设备的不足,它已经被越来越多的SDN学习者使用。但在Mininet使用中,安装使用的内置Open vSwitc...

40450
来自专栏GIS讲堂

Arcgis Server服务中rest服务和wms服务的对应关系

我们在用Arcgis Server发布服务时,会发布Mapserver的同时发布Wmsserver服务,但是,调用的图层的顺序却相反,本文从几个例子详细介绍下r...

22240
来自专栏娱乐心理测试

40条微信小程序技巧分享

21630
来自专栏ArrayZoneYour的专栏

借助Babel 7和Webpack构建React Toolchain

React不是完全开箱即用的。它使用了一些最近node才支持的关键字和语法(在本教程中我使用了v 9.3.0版本)。因此需要一些很麻烦的设置,但是Faceboo...

27040
来自专栏java、Spring、技术分享

wireshark

1) src host 192.168.1.1 && dst port 80 抓取源地址为192.168.1.1目地为80端口的流量

41140
来自专栏企鹅号快讯

React多页面应用1

1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,...

39080
来自专栏分享达人秀

Android应用实战,不懂代码也可以开发

通过上一期的学习,我们成功开发了Android学习的第一个应用程序,不仅可以在Android模拟器上运行,同时还能在我们的Android手机上运行,是不...

20990
来自专栏假装我会写代码

highlight.js 在 Vue 中使用的一点儿经验

30420
来自专栏安恒信息

预警 | WordPress存在多个高危漏洞

CVE-2016-10033 PHPMailer命令执行漏,在WordPress 中的利用 CVE-2017-8295 WordPress密码重置漏洞 一、漏洞...

32860
来自专栏Python小屋

Python批量导入图片生成PowerPoint 2007+文件

使用方法:安装扩展库python-pptx,然后把上文中抓取的图片和本程序放在同一个文件夹。 import os import pptx from pptx.u...

33330

扫码关注云+社区

领取腾讯云代金券