文章出處

系列文章

接上一篇系列文章，在本文中，將進一步的去實現頁面功能。去實現輸入頁面功能，二維碼掃描功能。完成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