This project was done early, based on ionic1 and Angular1. I have made four tabs apps. The home page imitates the home page of Ctrip, the second page is mainly about phoneGap calling the core functions of mobile phones, the third page imitates wechat and QQ chat pages, and the fourth page imitates the form setting page of ordinary mobile phones. At the same time, a sidebar page (account number: WTY, password: 123456) was made in imitation of Zhihu.

There is no background, pure front-end display, more functions, call system sound, vibration and mobile phone equipment information. There are TWO-DIMENSIONAL code scanning function, but also made similar QQ messages can drag effect, pull up and pull down refresh, round cast figure components.

Android APK download

Android APK download qr code

Online address

1. Basic Concepts

1. Angularjs profile

Angularjs is an excellent front-end JS framework that has been used in Google products such as Gmail, Maps, Calender, and more. AngularJS has many features at its core: MVVM, modularity, automated two-way data binding, semantic tagging, dependency injection, and more.

2. The introduction of Ionic

Ionic is a powerful HTML5 application development framework with a fast, modern and beautiful interface. It is especially suitable for HTML5 mobile application development based on the Hybird pattern.

3. Introduction of Phonegap

Phonegap is a rapid development platform for creating mobile cross-platform mobile applications based on HTML, CSS and JavaScript. It gives developers access to the core features of the phone — including geolocation, accelerators, contacts, sound and vibration — and PhoneGap has a wealth of plugins that can be called.

Ii. Main functions of each TAB in the project

1. Perform initial configuration

  • Icon, name and startup screen displayed by app on mobile phone
  • dependent
  • Hidden display keyboard
  • Hammer Touch screen gesture plug-in configuration
  • The position of the menu bar, navigation bar text, and rollback button icon
  • Transitions between pages (bug)
  • AngularUI Router
  • Services service

2. tab-home

  • The slide instruction ion-slide-box
  • Touch screen gesture switch page
  • Grid system
  • Touch-screen gestures touch-bases and Hammerjs
  • Ng-init, ng-click, ng-src, ng-repeat directives, two-way data binding
  • Open the built-in browser WebView method of the app
  • The pull to refresh

3. tab-dash

  • Application of PhoneGap function: SCANNING two-dimensional code, calling system popup window, vibrating ringtone function and obtaining device information
  • Ion -side- Menus have sidebar functions
  • Ionic Dynamic component $ionicModal The login page is displayed
  • Ng-show and ng-model bidirectional data binding enables real-time monitoring of login authentication
  • Ionic Dynamic component $ionicPopup The logout screen is displayed
  • Change the profile picture (access the phone camera and gallery functions)
  • Switch theme colors

4. tab-chats

  • Delete buttons and reorder buttons
  • The drop-down refresh
  • Slide to display the share edit button
  • Long press to display the dynamic component $ionicActionSheet option
  • Red message Badge

5. tab-account

  • Ionic forms applications
  • The Sound option is selected to play ringtones
  • The “vibration” option is selected to start vibration
  • Realize all, all do not choose, anti – select function
  • Ionic Dynamic component $ionicPopup
  • Display the popover content according to the selected number

Iii. The demonstration is as follows:

Ionic combat dynamic diagram demonstration

Four, the general

Advantages: The App is developed using Web technologies and packaged with Cordova and PhoneGap. Advantages are the use of standard Web technology development, avoid the learning of different platforms of native development system, low learning cost, fast delivery, high efficiency, development of wechat WAP APP all done;

Cons: App has some performance losses on Android, but expect hardware development to be close to native.

Welcome to star learning communication: making the | my blog address

reference

  1. PhoneGap3.4 Installation video tutorial download
  2. Angular1 website
  3. Angular Chinese Community
  4. AngularJS Nice Things
  5. Phonegap Chinese website
  6. Ionic website