Ionic—登录组件开发

一.开发用户未登录的页面

• app.component.*文件主要用于定义app全局的所有组件

1.需求一：设置组件主题样式

• 组件自身的样式定义在自己的scss文件中，希望全局生效的内容定义到全局的theme.scss文件中

• 在theme文件下创建light.scss文件，用于设定白天模式的样式

  • 实例代码[important表示强制覆盖]

    ion-content {background-color:#e5e6e8!important;
    }
    

  • 需要在variables.scss文件中使用@import 'light'导入自定义的样式

• 在theme文件下创建dark.scss文件，用于设定夜间模式的样式

2.需求二：调整“更多”页面

• 设计流程

  • 修改项目title
  • 使用ion-card添加more页面内部内容
  • 使用ion-button添加对应的按钮
  • 查看CSS Utilities对应设定好的CSS样式并使用

• 实例代码

  • more.page.html

  <ion-header><ion-navbar><ion-title>Moreion-title>ion-navbar>
  ion-header>
  <ion-content><ion-card><ion-card-header text-center>Log in 'Free Skin' and experience more features...ion-card-header><ion-card-content text-center><button ion-button outline> Sign in / Sign up button>ion-card-content>ion-card>
  ion-content>
  

  • more.page.scss

  page-more {ion-card {margin: 0!important;width: 100%!important;}
  }
  

• 注意全局样式对组件的影响，即组件上自带的样式，可以通过手动删除或样式覆盖进行自定义设置

3.需求三：开发Rest模块，处理网络请求

• 提示：VSCode生成注释的插件 Document this

• 生成一个rest的service用于处理网络请求：ionic g service rest

• 添加内容【需要在module中注册HttpModule】

  import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import { Observable } from 'rxjs/Observable';/*Generated class for the RestProvider provider.See https://angular.io/guide/dependency-injection for more info on providersand Angular DI.
  */
  @Injectable()
  export class RestProvider {constructor(public http: HttpClient) {//console.log('Hello RestProvider Provider');}//发送get请求private getRequest(url:string):Observable{return this.http.get(url);}}
  

二.开发用户登录页面

1.需求一：开发用户登录首页

• 为登录注册按钮添加监听事件

• 导入并使用ModalController

• 对按钮设置监听create并present modal

• 实例代码

  • more.html

  <ion-header><ion-navbar><ion-title>Moreion-title>ion-navbar>
  ion-header>
  <ion-content><ion-card><ion-card-header text-center>Log in 'Free Skin' and experience more features...ion-card-header><ion-card-content text-center><button ion-button outline (click)="presentLoginModal()"> Sign in / Sign up button>ion-card-content>ion-card>
  ion-content>
  

  • more.ts

  import { Component } from '@angular/core';
  import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
  import { LoginComponent } from '../../components/login/login';@Component({selector: 'page-more',templateUrl: 'more.html',
  })
  export class MorePage {constructor(public navCtrl: NavController, public navParams: NavParams,public modalCtrl: ModalController) {}presentLoginModal() {const modal = this.modalCtrl.create(LoginComponent);modal.present();}
  }
  

  • login.html

    • showWhen属性：什么设备显示就添加什么设备的字段

      <span ion-text color="primary" showWhen="ios">取消span>
      <ion-icon name="md-close" showWhen="android">ion-icon>
      

    • 实例代码

      <ion-header><ion-navbar><ion-title>Loginion-title><ion-buttons><button ion-button><span ion-text color="primary" showWhen="ios">Cancelspan><ion-icon name="md-close" showWhen="android">ion-icon>button>ion-buttons>ion-navbar>
      ion-header>
      <ion-content padding><ion-list><ion-item><ion-label stacked>Usernameion-label><ion-input type="text">ion-input>ion-item><ion-item><ion-label stacked>Passwordion-label><ion-input type="password">ion-input>ion-item>ion-list><div padding><button ion-button color="primary" block>Loginbutton>div><div text-center><button ion-button color="primary" outline>Sign upbutton>div>
      ion-content>
      

2.需求二：对按钮添加取消的监听事件

• 给按钮的button添加取消的监听事件dismiss()[使用ViewController]

• 给username和password进行双向绑定，并给登录添加监听事件login()

• 声明baseUI.ts文件用于声明基础组件，方便代码的复用

• 实例代码

  • baseUI.ts

    import { Loading, LoadingController } from "ionic-angular";export abstract class BaseUI {constructor(){}showLoading(loadingCtrl:LoadingController,message:string):Loading{let loader = loadingCtrl.create({content:message,dismissOnPageChange:true})loader.present();return loader;}
    }
    

  • login.html

    <ion-header><ion-navbar><ion-title>Loginion-title><ion-buttons><button ion-button (click)="dismiss()"><span ion-text color="primary" showWhen="ios">Cancelspan><ion-icon name="md-close" showWhen="android">ion-icon>button>ion-buttons>ion-navbar>
    ion-header>
    <ion-content padding><ion-list><ion-item><ion-label stacked>Usernameion-label><ion-input type="text" [(ngModel)]="username">ion-input>ion-item><ion-item><ion-label stacked>Passwordion-label><ion-input type="password" [(ngModel)]="password">ion-input>ion-item>ion-list><div padding><button ion-button color="primary" block (click)="login()">Loginbutton>div><div text-center><button ion-button color="primary" outline>Sign upbutton>div>
    ion-content>
    

  • login.ts

    import { Component } from '@angular/core';
    import { NavController, NavParams, ViewController, LoadingController } from 'ionic-angular';
    import { BaseUI } from '../../common/baseUI';/*** Generated class for the LoginPage page.** See https://ionicframework.com/docs/components/#navigation for more info on* Ionic pages and navigation.*/@Component({selector: 'page-login',templateUrl: 'login.html',
    })
    export class LoginPage extends BaseUI {username:string = '';password:string = '';constructor(public navCtrl: NavController, public navParams: NavParams,public viewController:ViewController,public loadingController:LoadingController) {super();}dismiss() {this.viewController.dismiss();}login() {var loading = super.showLoading(this.loadingController,"Loading...");//调用API}}
    

3.需求三：模拟发送请求实现Toast

• 给Baseui.ts添加显示toast功能

• 通过setTimeout模拟延时登录

• 实例代码

  • Baseui.ts

    import { Loading, LoadingController, ToastController } from "ionic-angular";export abstract class BaseUI {constructor(){}showLoading(loadingCtrl:LoadingController,message:string):Loading{let loader = loadingCtrl.create({content:message,dismissOnPageChange:true})loader.present();return loader;}showToast(toastCtrl:ToastController,message:string){let toast = toastCtrl.create({message:message,duration:3000});toast.present();return toast;}
    }
    

  • login.html

    <ion-header><ion-navbar><ion-title>Loginion-title><ion-buttons><button ion-button (click)="dismiss()"><span ion-text color="primary" showWhen="ios">Cancelspan><ion-icon name="md-close" showWhen="android">ion-icon>button>ion-buttons>ion-navbar>
    ion-header>
    <ion-content padding><ion-list><ion-item><ion-label stacked>Usernameion-label><ion-input type="text" [(ngModel)]="username">ion-input>ion-item><ion-item><ion-label stacked>Passwordion-label><ion-input type="password" [(ngModel)]="password">ion-input>ion-item>ion-list><div padding><button ion-button color="primary" block (click)="login()">Loginbutton>div><div text-center><button ion-button color="primary" outline>Sign upbutton>div>
    ion-content>
    

  • login.ts

    import { Component } from '@angular/core';
    import { NavController, NavParams, ViewController, LoadingController, ToastController } from 'ionic-angular';
    import { BaseUI } from '../../common/baseUI';@Component({selector: 'page-login',templateUrl: 'login.html',
    })
    export class LoginPage extends BaseUI {username:string = '';password:string = '';constructor(public navCtrl: NavController, public navParams: NavParams,public viewController:ViewController,public loadingController:LoadingController,public toastController:ToastController) {super();}dismiss() {this.viewController.dismiss();}login() {let loading = super.showLoading(this.loadingController,"Loading...");//调用APIsetTimeout(()=>{loading.dismiss();if(Math.random()*100>50){//视作登录成功}else{//视作登录失败let toast = super.showToast(this.toastController,"Your username or password is wrong!");}},2000);}
    }
    

4.需求四：开发登录成功后的页面

• 使用storage实现页面信息存储

  • 安装storage：npm install --save @ionic/storage
  • 需要storage的地方引入：import { Storage } from '@ionic/storage';
  • storage设置值：storage.set('键','值')
  • storage获取值：storage.get('键').then((val)=>{处理逻辑})
  • 在app.modules.ts中引入IonicStorageModule：import {IonicStorageModule} from '@ionic/storage';且IonicStorageModule.forRoot()

• 实例代码

  • more.ts

    import { Component } from '@angular/core';
    import { NavController, NavParams, ModalController } from 'ionic-angular';
    import { LoginPage } from '../login/login';
    import { Storage } from '@ionic/storage';@Component({selector: 'page-more',templateUrl: 'more.html',
    })
    export class MorePage {//判断是否登录isLogined:boolean = false;constructor(public navCtrl: NavController, public navParams: NavParams,public modalCtrl: ModalController,public storage: Storage) {}presentLoginModal() {const modal = this.modalCtrl.create(LoginPage);modal.present();}//ionic生命周期方法：当页面进入完成后调用ionViewDidEnter() {this.loadUserPage();}//加载用户信息loadUserPage() {this.storage.get('token').then((val)=>{if(val!=null){this.isLogined = true;}else{this.isLogined = false;}})}
    }
    

  • more.html

    More
    Log in 'Free Skin' and experience more features... Sign in / Sign up Log in success.
    
    

  • login.ts

    import { Component } from '@angular/core';
    import { NavController, NavParams, ViewController, LoadingController, ToastController } from 'ionic-angular';
    import { BaseUI } from '../../common/baseUI';
    import { Storage } from '@ionic/storage';@Component({selector: 'page-login',templateUrl: 'login.html',
    })
    export class LoginPage extends BaseUI {username:string = '';password:string = '';constructor(public navCtrl: NavController, public navParams: NavParams,public viewController:ViewController,public loadingController:LoadingController,public toastController:ToastController,public storage:Storage) {super();}dismiss() {this.viewController.dismiss();}login() {let loading = super.showLoading(this.loadingController,"Loading...");//调用APIsetTimeout(()=>{//关闭loadingloading.dismiss();if(Math.random()*100>50){//视作登录成功//存储tokenthis.storage.set('token','abcdefg');//关闭当前modalthis.dismiss();}else{//视作登录失败let toast = super.showToast(this.toastController,"Your username or password is wrong!");}},2000);}
    }
    

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！