Mobile application Framework Ionic2 The basic knowledge of self-study

Official documents: http://ionicframework.com/docs/v2/

Ionic (Ionicframework) is a near-native HTML5 mobile app development framework.

Ionic is currently the most potential HTML5 mobile phone application Development framework. Building an application through SASS, it provides a number of UI components to help developers develop powerful applications. It uses JavaScript MVVM frameworks and Angularjs to enhance applications. Provides two-way binding of data that is used as a common choice between WEB and mobile developers. Ionic is a development framework focused on web development technology, based on HTML5 to create a native application similar to a mobile platform. The purpose of the Ionic framework is to develop mobile applications from a Web perspective, based on a PHONEGAP compilation platform that enables applications compiled into various platforms.

Note: Here is the Ionic2 knowledge point, after all, it and Ionic 1.0 have a more significant difference.

Ionic2 Version update: HTTPS://GITHUB.COM/DRIFTYCO/IONIC/BLOB/MASTER/CHANGELOG.MD

Ionic2 Iclic labs:http://www.icliclabs.com/

Ionic2 Project Reference: Market.ionic.io

Ionic2 Document Learning: IONIC2 series--ionic 2 Guide official documents from Yan_xiaodi, Chinese version

Ionic2 app starts slow. Reference: Ionic 2 speed up boot time?

IONIC2 Remote Debugging: Ionic Project Debugging Tools

Icon and Splash Generation: Icon and Splash screen Image Generation

Ionic2 theme Switching implementation: User-selected Style Themes in a Ionic 2 application

Ionic2 handling Android Physics key return exit Application: Ionic2 Combat-Perfect handling Android Hardware return button

IONIC3 page Lazy Load: Ionic 3 Lazy Loading

(i) installation and operation of Ionic

1, download the installation node.js, you can use the command line NODE–V command to view the currently installed version of the Node.js;

2. Use the NPM install ionic–g command to install Ionic, but note that the version installed at this time is Ionic 1.0. You can install the beta version using NPM install IONIC@BETA–G, such as using NPM installionic@2.0.0-beta.22–g to install the beta.22 version;

(2017-02-17 now direct NPM install IONIC-G can be installed to Ionic2)

3, after the installation of ionic, you can use the Ionic start Ionicdemo--v2 initialize an empty project, the default tabs template as a template for the initialization of the project, if you need additional templates, then the project name after the corresponding template name can be added, such as: Ionic start Ionicdemo tutorial--v2; (--v2 parameter explicitly uses version 2.0 to initialize the project)

4, the use of ionic serve can run ionic projects;

5. Use Ionic platform add Android or Ionic platform add iOS command to add two mobile platform deployment files (use the Ionicplatform List command to view current platform information);

6, the project has added two platform deployment files, can be viewed through the Platform folder, accordingly, in Xcode to import iOS deployment files or Android studio to import the Android deployment files, you can do the corresponding real machine debugging;

Note:

1 Update node_modules/ionic-native to the latest command:

NPM I--save ionic-native@latest

Or

CNPM I--save ionic-native@latest

Sometimes you may experience problems with plug-ins that are not available in ionic-native, possibly because the ionic-native version is too low in the current project and we need to update it to the latest version. Note: There may be other problems when you update to the latest version OH

2) View Ionic-native version:

NPM List Ionic-native

Or

CNPM List Ionic-native

3 When you ionic the start project, you may receive the following error:

Error with start undefined

Error initializing App:there was a error with the spawned Command:npminstall

There was a error with the spawned Command:npminstall

Caught exception:

Undefined

Solution:

After this error, run NPM install, if get some error related to Git, than follow below steps, it resolved for me:
Go to https://git-for-windows.github.io/and install git
than open git cmd
Run below command:
git config--global url. " https://". Insteadof git://

(ii) life cycle of ionic pages

The function that is called after the page is loaded is not reloaded when the page is switched, because there is a cache presence
onpageloaded () {
  console.log (' page 1:page loaded. ');
}

When the page is about to enter
Onpagewillenter () {
  //Here are some things you can do to initialize the page
  console.log (' page 1:page will enter. ');
}

When the page has entered
onpagedidenter () {
  console.log (' page 1:page did enter. ')

When the page is about to leave
Onpagewillleave () {
  console.log (' page 1:page will leave. '
)

When the page has left
Onpagedidleave () {
  console.log (' page 1:page did leave. ')

The Lifecycle
onpagewillunload () {}//is removed from the DOM when

execution completes
onpagedidunload () {

}

(iii) Ionic components

1, Tab control

Icon: http://ionicframework.com/docs/v2/ionicons/

Tabs.html

<ion-tabs>
  <ion-tab [root]= "Tab1root" tabtitle= "Home" tabicon= "Home" ></ion-tab>
  < Ion-tab [root]= "Tab2root" tabtitle= "about" tabicon= "information-circle" ></ion-tab>
  <ion-tab [Root] = "Tab3root" tabtitle= "Contact" tabicon= "Contacts" ></ion-tab>
</ion-tabs>

<ion-tabs>
  <ion-tab [root]= "Tab1root" tabtitle= "Home" tabicon= "Home" ></ion-tab>
  < Ion-tab [root]= "Tab2root" tabtitle= "about" tabicon= "information-circle" ></ion-tab>
  <ion-tab [Root] = "Tab3root" tabtitle= "Contact" tabicon= "Contacts" tabbadge= "3" ></ion-tab>
</ion-tabs>

<ion-tabs>
  <ion-tab [root]= "Tab1root" tabtitle= "Home" tabicon= "Home" ></ion-tab>
  < Ion-tab [root]= "Tab2root" tabtitle= "about" tabicon= "information-circle" ></ion-tab>
  <ion-tab [Root] = "Tab3root" tabtitle= "Contact" tabicon= "Contacts" tabbadge= "3" tabbadgestyle= "Danger" ></ion-tab>
< /ion-tabs>

The default first goes to the Third tab page:

HTML control

<ion-tabs selectedindex= "2" >
  <ion-tab [root]= "Tab1root" tabtitle= "Home" tabicon= "Home" ></ ion-tab>
  <ion-tab [root]= "Tab2root" tabtitle= "about" tabicon= "Information-circle" ></ion-tab>
  <ion-tab [root]= "Tab3root" tabtitle= "Contact" tabicon= "Contacts" tabbadge= "3" tabbadgestyle= "Danger" > </ion-tab>
</ion-tabs>

JS Control

<ion-tabs #mainTabs >
  <ion-tab [root]= "Tab1root" tabtitle= "Home" tabicon= "Home" ></ion-tab>
  <ion-tab [root]= "Tab2root" tabtitle= "about" tabicon= "Information-circle" tabbadge= "3" tabbadgestyle= "danger "></ion-tab>
  <ion-tab [root]=" Tab3root "tabtitle=" User Center "tabicon=" person "></ion-tab>
</ion-tabs>

Import {Component} from ' @angular/core ';
Import {homepage} from ' ... /home/home ';
Import {aboutpage} from ' ... /about/about ';
Import {contactpage} from ' ... /contact/contact ';

Import {Tabs} from ' Ionic-angular ';
Import {injectable, viewchild} from ' @angular/core ';

@Component ({
  templateurl: ' build/pages/tabs/tabs.html '
})
Export class Tabspage {
  @ViewChild (' Maintabs ') Tabref:tabs;

  Private Tab1root:any;
  Private Tab2root:any;
  Private Tab3root:any;

  Constructor () {
    //This tells the tabs component which Pages
    //should are each tab ' s root Page
    This.tab1roo t = Homepage;
    This.tab2root = Aboutpage;
    This.tab3root = Contactpage;
  }

  Ionviewdidenter () {
    this.tabRef.select (2);
  }
}

2, Button control

<button>basic button</button>
<button gray>gray button</button>
<button >danger button</button>
<button outline>outline button</button>
<button Clear button</button>
<button round>round button</button>
<button block>Block button</button>
<button small>small button</button>
<button large>Large /button>
<button>
  <ion-icon name= "Home" ></ion-icon>
  button
</button >
<button>
  button
  <ion-icon name= "Home" ></ion-icon>
</button>
<button>
  <ion-icon name= "Home" ></ion-icon>
</button>

3. Input control

<ion-list>
  <ion-item>
    <ion-label floating> user name </ion-label>
    <ion-input type = "text" value= "[(Ngmodel)]=" User.username "></ion-input>
  </ion-item>
  <ion-item>
    <ion-label stacked> password </ion-label>
    <ion-input type= "password" value= "[(Ngmodel)]=" User.password "></ion-input>
  </ion-item>
</ion-list>
<button block (click) =" Showfill () "> Login </button>

Export class Contactpage {public
  user = {
    username: ' Parry ',
    password: '
  };

  Constructor (private Navctrl:navcontroller) {

  }

  Showfill () {
    alert (this.user.username);
    Console.log (This.user.password);
  }

4, loading control, alert control

Import {Component} from ' @angular/core ';

Import {Navcontroller, Loadingcontroller, Alertcontroller} from ' Ionic-angular '; @Component ({templateurl: ' build/pages/contact/contact.html '}) export class Contactpage {public user = {Usernam

  E: ' Parry ', Password: '}; Constructor (private Navctrl:navcontroller, private Loadingctrl:loadingcontroller, Private al
  Ertctrl:alertcontroller) {This.navctrl = Navctrl;
    } showfill () {alert (this.user.username);
  Console.log (This.user.password); 
      Login () {/*//creates loading window, simulates 3 seconds after login succeeds, loading window disappears let loading = loading.create ({content: ' Login ... ')

    duration:3000,//unit is milliseconds});

    This.navCtrl.present (loading);
    The real logic should be: To request the login API, return the result, the loading window of the Hidden SetTimeout (() => {Loading.dismiss (); }, 3000); */if (This.user.username = = ' | | this.user.username.length <= 3) {//alert to alert the user of the correctness of the user name Le T alertusernameerror = this. Alertctrl.create ({title: ' User Center ', subtitle: ' The username entered is not in the correct format.

      ', buttons: [' OK ']});
    Alertusernameerror.present ();
        else {Let loading = this.loadingCtrl.create ({content: ' Please wait ... ', spinner: ' Dots ',

      duration:3000,//unit is milliseconds});

      Loading.present ();
      SetTimeout (() => {Loading.dismiss ();
    }, 3000); }

  }

}

5, Toast Control

2. Using the Toast control let
Toast = this.toastCtrl.create ({message
  : ') The user name entered is not in the correct format. ',
  duration:3000,
});
Toast.present ();

6. Grid Layout

<ion-row>
  <ion-col>
    <div class= "Textalignright marginTop10" ><button clear> has no account. Click Register </button></div>
  </ion-col>
</ion-row>

7, modal control

Import Registration page Imports
{register} from ' ... /contact/register ';

Open the registration page
Openregisterpage () {let
  modal = this.modalCtrl.create (register);
  Modal.present ();
}

Import {Component} from ' @angular/core ';

@Component ({
  templateurl: ' build/pages/contact/register.html '
})
Export class Register {

}

8, Toolbar control

<ion-toolbar>
  <ion-title> User Registration </ion-title>
  <ion-buttons end>
    <button ( Click) = "Dismiss ()" >
      <span showwhen= "ios" > Cancel </span>
      <ion-icon name= "Md-close" showwhen= " Android,windows "></ion-icon>
    </button>
  </ion-buttons>
</ion-toolbar>

Modify:

<ion-header>
  <ion-toolbar>
    <ion-title> User Registration </ion-title>
    <ion-buttons End >
      <button (click) = "Dismiss ()" >
        <span showwhen= "ios" > Cancel </span>
        <ion-icon Name= "Md-close" showwhen= "android,windows" ></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content padding>
    
 

 
9, List control

<ion-list>
  <ion-item>
    <ion-avatar item-left></ion-avatar>
    
 

 
Binding Data Source:

Declaration of a data source

The general data source is obtained from the API, here we just simulate some have been taken to the data public
contacts = [
  {' ContactID ': 1, ' ContactName ': ' Dream small white ', ' contacttext ': ' 18888888888 '},
  {' ContactID ': 2, ' ContactName ': ' Dream little white 2 ', ' contacttext ': ' 18888888888 '},
  {' ContactID ': 3, ' ContactName ': ' Dream little white 3 ', ' contacttext ': ' 18888888888 '},
  {' ContactID ': 4, ' ContactName ': ' Dream small white 4 ', ' Contacttext ': ' 18888888888 '},
  {' ContactID ': 5, ' ContactName ': ' Dream little white 5 ', ' contacttext ': ' 18888888888 '},
  {' ContactID ': 6, ' ContactName ': ' Dream little white 6 ', ' contacttext ': ' 18888888888 '},

  {' ContactID ': 1, ' ContactName ': ' Dream small white 7 ', ' Contacttext ': ' 18888888888 '},
  {' ContactID ': 2, ' ContactName ': ' Dream little white 8 ', ' contacttext ': ' 18888888888 '},
  {' ContactID ': 3, ' ContactName ': ' Dream little white 9 ', ' contacttext ': ' 18888888888 '},
  {' ContactID ': 4, ' ContactName ': ' Dream little white ', ' contacttext ': ' 18888888888 '},
  {' ContactID ': 5, ' ContactName ': ' Dream little white One ', ' contacttext ': ' 18888888888 '},
  {' ContactID ': 6, ' ContactName ': ' Dream small white ', ' contacttext ': ' 18888888888 '}
;
 

 
<ion-list>
  <ion-item *ngfor= "#contact of Contacts" (click) = "ItemClick ($event, contact)" >
    < Ion-avatar item-left></ion-avatar>
    
 

 
10. Card Layout

<ion-card>
  <ion-item>
    <ion-avatar item-left>
      
    </ion-avatar>
    
 

 
11, navigation control

ItemClick (event, contact) {
  //console.log (event);
  Console.dirxml (contact);
  alert (contact.contactname);

  This.navCtrl.push (ContactDetails, {item:contact});
 

 
ContactDetails page

/**
 * Created by the Administrator on 2016/8/23 0023.
 * *
Import {Component} from ' @angular/core ';
Import {navparams} from ' Ionic-angular ';

@Component ({
  templateurl: ' build/pages/about/contactdetails.html '
})
Export class ContactDetails {
  Private item = ';

  Constructor (public params:navparams) {
    this.item = Params.data.item;
  }
}
 

 
<ion-header>
  <ion-navbar>
    <ion-title>{{item.contactname}}</ion-title>
  The mobile number for </ion-navbar> </ion-header> <ion-content padding> {Item.contactname}} is: { {Item.contacttext}}
</ion-content>
 

 

 

(iv) Introduction to Cordova Components

1. Image Picker Component


2, geolocation components


Get location information
geolocation.getcurrentposition (). Then (resp) => {
  console.log (resp.coords.latitude);
  Console.log (resp.coords.longitude);
});
 

 

3. Local Notifications Components

Local Reminder Component
Localnotifications.schedule {
  text: ' Localization reminder-you started Ionic App ',
  at:new date (new Date (). GetTime () + 10000),
  sound:null
});
 

 
(v) Project combat

1. Quickly generate app icon and launch page

Makeappicon

Ios.hvims.com

Launcher Icon Generator

Iconhandbook.co.uk/reference/chart/android


2. Use Localstorage to store state information

Localstorage.setitem (key, value)

Localstorage.getitem (Key)


Note: The modal page's shutdown requires the use of the dismiss method in Viewcontroller.


3, modal close the Hofu page concept and method


4, the network request in the Ionic

Cross-Domain Request issue: http://enable-cors.org/(of course, it will not appear in the app, only appears during browser debugging)


Here is the implementation of the request API, note the problem of Cross-domain requests, see http://enable-cors.org/
this.http.get (' http://xxx/account/Login?email= ' + This.user.username + ' &password= ' + this.user.password)
  . Subscribe (data => {let
    res = Data.json ();
    if (res. LoginStatus = = 1) {
      Localstorage.setitem (' username ', this.user.username);
      Localstorage.setitem (' logined ', ' true ');
      Self modal Hidden
      This.viewCtrl.dismiss (this.user.username);
      Loading.dismiss (); Login Progress Hidden
    } else {let
      toast = this.toastCtrl.create ({message
        : ' Login failed. ',
        duration:2000,
      });
      Toast.present ();
    }

  , err => {let
    toast = this.toastCtrl.create ({message
      : ' Logon failed. ',
      duration:2000,
    });
    Toast.present ();

  });
 

 

5. Slide delete data in list

<ion-list>
  <ion-item-sliding *ngfor= "#contact of Contacts" >
    <ion-item (click) = ItemClick ($ event, contact) ">
      <ion-avatar item-left> </ion-avatar>
      
 

 
6, integrated Aurora push implementation message push

Sets the alias of the client to be used for the push of receiving messages

Window.plugins.jPushPlugin.setAlias (' Client ' + Loginresult.userid);


Client (only a single value): A separate device is bound to Jpush, which is equivalent to the ID number of the device, which can only be pushed to the ID level when the server is pushed.


var arrayobj = new Array (' Tags ' + Loginresult.userid);

Window.plugins.jPushPlugin.setTags (arrayobj);



Client–1, only this one device is notified.

Tag–1, many devices are set up called tag–1.

7, iOS packaging and store shelves

8, Android Packaging and publishing
Reference study: