Series Articles
Use Axure to design apps, use Webstorm development (1) – Describe requirements with axure
Use Axure to design apps, use Webstorm development (2) – Build page schemas
Use Axure to design apps, use Webstorm development (3) – Build page schemas
Use Axure to design apps, use Webstorm development (4) – Implement page UI
Use Axure to design the app, use Webstorm development (5) – Achieve page functionality
Real-life use of axure design app, using Webstorm development (6) – Towards the backend
After a series of articles, in this article, will be further to implement the page function. To implement the input page function, QR code scanning function. Complete the app's front-end work.
Enter page
When the dispatch clerk entered the order number, first check whether the ticket is valid, if the effective direct access to the Order Details page, if invalid, prompt the order invalid, prompting the user to re-enter.
The result of the final finish
Scan QR code page
First install Barcode Scanner 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 Download the JavaScript file, put the file under Lib/angular, and introduce it in index References to Ng-cordova
Inject Ngcordova into the app
Finally, the $cordovaBarcodeScanner objects are used to handle the successful and failed operations of the scan respectively.
Since the scanning function opens a separate camera page, the scanning function can be done on this page, so the scanned page of the previous design can be used.
The scanning function needs to connect the actual machine to test, the simulator is not good to test the scanning function.
Here all the basic features of the page are completed, in the next section will be connected to the backend service, the user login function, and remove the front-end mockdb, the use of server-side data.
This phase of code can be downloaded to the https://github.com/zhangsichu/DeliveryApp/releases/tag/PageFunctions. You can also git checkout pagefunctions
git checkout pagefunctions |
Original link: http://zhangsichu.com/blogview.asp?Content_Id=159
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Use Axure to design the app, use Webstorm development (5) – Achieve page functionality