Practical Use of Axure to design the App and use WebStorm (5)-implement the page function, axurewebstorm

Practical Use of Axure to design the App and use WebStorm (5)-implement the page function, axurewebstorm
Series of articles

Practical Use of Axure to design apps and use WebStorm for development (1)-use Axure to describe requirements

Practical Use of Axure to design an App and use WebStorm for development (2)-Build a page Architecture

Practical Use of Axure to design an App and use WebStorm for development (3)-Build a page Architecture

Practical Use of Axure to design apps and use WebStorm (4)-implement page UI

Practical Use of Axure to design apps and use WebStorm (5)-implement page Functions

Practical Use of Axure to design apps and use WebStorm for Development (6)-towards the backend

 

Next to the previous series of articles, this article will further implement the page function. Enter the page and scan the QR code. Complete the front-end work of the App.

Input page

When the courier enters the order number, first check whether the order number is valid. If it is valid, go to the Order details page. If it is invalid, the system prompts that the order is invalid and prompts the user to re-enter the order number.


Final Effect



Scan QR code page

First install Barcode plugin to support http://ngcordova.com/docs/plugins/barcodeScanner/

Cordova plugin add https://github.com/wildabeast/BarcodeScanner.git

Then install ng-cordova https://github.com/driftyco/ng-cordova/releases to download the Javascript file, put the file under lib/angular, and introduce ng-cordova reference in index


Inject ngCordova into the app


The last step is to use the $ cordovabarcodeinspect object to process the scan Success and Failure Operations respectively.


Because the scan function opens a separate camera page, the scan function can be completed on this page, so the previously designed scan page is no longer needed.
The scanning function can be tested only when it is connected to the actual machine. The simulator cannot test the scanning function.


All the basic page functions are complete. In the next article, we will connect to the backend service to implement the user login function, remove the front-end MockDB, and use the server data.
This phase of code can be downloaded in https://github.com/zhangsichu/DeliveryApp/releases/tag/PageFunctions. You can also git checkout PageFunctions

 

Git checkout PageFunctions

 

Http://zhangsichu.com/blogview.asp? Content_Id = 159

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.