ionic混合开发APP基础知识点及生命周期使用一

导入storage

app.module.ts文件

import { IonicStorageModule } from '@ionic/storage';
imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
],

其余文件

import { Storage } from '@ionic/storage';

解释含义

• 存储功能，把f[‘userId’]存到UserId中

this.storage.set('UserId', f['userId']);

• 登录进度隐藏

loading.dismiss();

• 自身modal隐藏

this.viewCtrl.dismiss()

• 创建新页面

showModal(){
    //创建要modal的页面
    let modal = this.modalCtrl.create(LoginPage);
    modal.present();    // 把页面modal出来
}

• 判断是否已经登陆过

  ionViewDidEnter(){     //生命周期，当页面进入时加载
    this.loadUserPage();
  }
  loadUserPage(){
    this.storage.get('UserId').then((val) => {    //保存的UserId是否有值
      if(val!=null){
        this.notLogin = false;
        this.logined = true;
      } else{
        this.notLogin = true;
        this.logined = false;
      }
    })
  }

有关生命周期的判断

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { Storage } from '@ionic/storage';

/**
 * Generated class for the MorePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-more',
  templateUrl: 'more.html',
})
export class MorePage {

  public notLogin : boolean = true;
  public logined : boolean = false;

  constructor(public navCtrl: NavController, 
              public navParams: NavParams,
              public modalCtrl: ModalController,
              public storage: Storage) {
  }

  showModal(){
    //创建要modal的页面
    let modal = this.modalCtrl.create(LoginPage);
    modal.present();    // 把页面modal出来
  }

  ionViewDidEnter(){
    this.loadUserPage();
  }

  loadUserPage(){
    this.storage.get('UserId').then((val) => {
      if(val!=null){
        this.notLogin = false;
        this.logined = true;
      } else{
        this.notLogin = true;
        this.logined = false;
      }
    })
  }
}

对于不同的登录结果有不同的展现方式

<!--
  Generated template for the MorePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title content page>更多</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <div *ngIf = "notLogin">
    <ion-card>
      <ion-card-header text-center>
        登录飞行船，体验更多功能
      </ion-card-header>
      <ion-card-content text-center>
        <button ion-button outline small (click)="showModal()">登录/注册</button>
      </ion-card-content>
    </ion-card>
  </div>
  <div *ngIf= "logined"></div>
</ion-content>