實戰使用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