Qunee has an example of a Shanghai Metro map, customers want to turn into mobile app, study Android WebView, and PhoneGap and many other hybrid app program, finally choose to use ionic, accurate ionic + PhoneGap + Qunee Ionic is a front-end framework based on HTML5 to create hybrid applications, with PHONEGAP + ANGULARJS to achieve a cross-platform, lightweight mobile UI solution, this article will introduce the ionic implementation of the mobile version of the Qunee Shanghai map ExampleBackground knowledgeInstall ionic required Software Environment-Java, Android SDK, etc.
Ionic is actually a synthesizer, with the help of a variety of technologies, itself is a set of UI framework, combined with PHONEGAP to achieve cross-platform mobile app, need to install a dependent program, such as Nodejs, Java, ADT, Ant, Xcode, and set up a good java_home, Add Android SDK tool to environment variable
Install ant under Mac OS X
Brew Updatebrew Install Ant
Mac OSX, open a. bash_profile file
CD ~open. Bash_profile
Set the related Path,mac OS X to add something like this below
Export java_home= '/usr/libexec/java_home-v 1.8 ' # Androidexport path=${path}:/users/macbook/workspace/ Android-sdk-macosx/platform-tools:/users/macbook/workspace/android-sdk-macosx/tools
Installing Ionic and Cordova
You need to install the Nodejs first and then install it via NPM
NPM install-g Cordova Ionic
For more information, please refer to the official documentation +google http://ionicframework.com/getting-started/Create a ionic project Q-metro use the following command to create a new project
Ionic start Q-metro
The initial directory structure is as follows
In fact, the new project is a tabs example that can be accessed in the browser as follows
Ionic Project Structurewww directory
Automatically generated a bunch of directories and files, where the www/directory is my concern
Index.html structure First Look at index.html, is the main page, the introduction of Angularjs, Cordova and other JS support, in addition to App.js, Controllers.js, Services.js three files, these three files build the application logic of the app, the app is the main program, including some settings and launch scripts, services is the Data Support Section, which is the model part, to provide data deletion and modification operation, controllers for control, including business logic control Code, Because the purpose of this article is to create a mobile version of the Metro map using Qunee, more business operations are left to the reader to study, so the JS structure does not involve all facets of the design pattern, we will create a simple bootstrap to implement the data rendering directly in the App.js
<!--Ionic/angularjs js--><script src= "lib/ionic/js/ionic.bundle.js" ></script><!--Cordova Script (this would be a 404 during development)--><script src= "Cordova.js" ></script><!--your app ' s JS- -><script src= "Js/app.js" ></script><script src= "Js/controllers.js" ></script>< Script src= "Js/services.js" ></script>
Introducing the Qunee development package
<script src= "Lib/qunee/qunee-min.js" ></script>
Modify Index.html
<body ng-app= "App" ng-controller= "Metro" animation= "Slide-left-right-ios7" ><ion-header-bar class= " Bar-dark ">
Edit the script to get rid of Controllers.js and services.js, edit App.js as follows, which loading Metro map code can be referenced based on HTML5 technology to draw Shanghai Metro mapAngular.module (' app ', [' Ionic ']). Controller (' Metro ', function ($scope) {$scope. title = "Shanghai Metro map"; Loadgraph ();}); function Loadgraph () {...//load Metro map}
Compiling Tests and publishingTest first in the desktop environment, Chrome is working, and then compiled into a variety of mobile platform versions, the Android version for example
CD Q-metroionic Platform Add androidionic build androidionic run Android
If you want to test in a virtual machine, you can use theIonic emulate Android
Ionic support a variety of mobile platforms, if you want to create iOS can change "Android" to "ios" under the Android device on the real machine running interface as follows: