系列文章

實(shí)戰(zhàn)使用Axure設(shè)計(jì)App,使用WebStorm開(kāi)發(fā)(1) – 用Axure描述需求?

實(shí)戰(zhàn)使用Axure設(shè)計(jì)App,使用WebStorm開(kāi)發(fā)(2) – 創(chuàng)建 Ionic 項(xiàng)目??

實(shí)戰(zhàn)使用Axure設(shè)計(jì)App,使用WebStorm開(kāi)發(fā)(3) – 構(gòu)建頁(yè)面架構(gòu)?

實(shí)戰(zhàn)使用Axure設(shè)計(jì)App,使用WebStorm開(kāi)發(fā)(4) – 實(shí)現(xiàn)頁(yè)面UI

實(shí)戰(zhàn)使用Axure設(shè)計(jì)App,使用WebStorm開(kāi)發(fā)(5) – 實(shí)現(xiàn)頁(yè)面功能

實(shí)戰(zhàn)使用Axure設(shè)計(jì)App,使用WebStorm開(kāi)發(fā)(6) – 邁向后端

?接上一篇系列文章，在本文中，將在WebStorm中繼續(xù)開(kāi)發(fā)，實(shí)現(xiàn)頁(yè)面的功能。這需要一個(gè)頁(yè)面一個(gè)頁(yè)面的開(kāi)發(fā)，來(lái)完成功能。本文將側(cè)重把所有頁(yè)面的UI都實(shí)現(xiàn)出來(lái)，先把前端的工作都完成了，然后再去鏈接后端的 RESTful Service。

登陸頁(yè)面

給頁(yè)面添加 login.html 添加頁(yè)面Html代碼。?

<ion-view title="用戶登錄">
<ion-content class="padding">
<div class="login-title">
<h2 class="energized">方便每一天</h2>
<h2 class="assertive">配送系統(tǒng)</h2>
</div>
<div>
<form novalidate="novalidate" on-valid-submit="doLogin()">
<label class="item item-input validated">
<span class="input-label" for="account">賬號(hào)</span>
<input id="account" type="text" ng-model="user.name" placeholder="賬號(hào)" 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>

為了實(shí)現(xiàn)，輸入框的驗(yàn)證功能，需要給AngularJS加入兩個(gè)自定義的標(biāo)簽: on-valid-submit, validated 由于這是一個(gè)全局的驗(yàn)證功能就把它添加到app.js ddApp module下，如果只針對(duì)某個(gè)頁(yè)面，可以只添加到這個(gè)頁(yè)面的 controller 下。

到這里登陸頁(yè)面的UI就完成了。


列表頁(yè)面

首先構(gòu)建派送列表頁(yè)的Html內(nèi)容:

<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()">手動(dòng)輸入</li>
<li class="button icon ion-qr-scanner icon-text" ng-click="goScan()">掃描二維碼</li>
</div>
</div>
</ion-view>

為了展示數(shù)據(jù)，這里在Service里做了一個(gè)MockDB使用這個(gè)MockDB為App提供數(shù)據(jù)，這樣當(dāng)請(qǐng)求使用后端數(shù)據(jù)的時(shí)候，只要后端的RESTful Service 也返回同樣規(guī)格的數(shù)據(jù)就可以了。

這里代碼比較多，具體代碼在 services.js 中。

接下來(lái)處理 派送列表 的 controller 把頁(yè)面動(dòng)作交互和數(shù)據(jù)連上：


到這里派送列表頁(yè)，就處理完了:


詳細(xì)頁(yè)面

添加 詳細(xì)頁(yè)面 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()">手動(dòng)輸入</li>
<li class="button icon ion-qr-scanner icon-text" ng-click="goScan()">掃描二維碼</li>
</div>
</div>
</ion-view>

添加頁(yè)面 controller :

到這一步 詳細(xì)頁(yè)面完成了:


接下來(lái)就是手動(dòng)輸入頁(yè)面，和掃描頁(yè)面，這兩個(gè)頁(yè)面比較簡(jiǎn)單，類似于前面的頁(yè)面，寫好頁(yè)面Html，配置好 controller 的內(nèi)容，就可以了。
到這里所有頁(yè)面的 UI 都完成了。 你可以到?https://github.com/zhangsichu/DeliveryApp/releases/tag/AllPageUI?下載這個(gè)階段的代碼。
也可以使用 git checkout AllPageUI 取得

git checkout AllPageUI

原文鏈接：http://zhangsichu.com/blogview.asp?Content_Id=158

?

總結(jié)

以上是生活随笔為你收集整理的实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。