Ionic—登录组件开发

版权声明：作者已开启版权声明，如转载请注明转载地址。 https://blog.csdn.net/qq_34829447/article/details/84595395

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

• 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>More</ion-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 providers
    and Angular DI.
  */
  @Injectable()
  export class RestProvider {
  
    constructor(public http: HttpClient) {
      //console.log('Hello RestProvider Provider');
    }
  
    //发送get请求
    private getRequest(url:string):Observable<any>{
      return this.http.get(url);
    }
  
  }
  

二.开发用户登录页面

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

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

• 导入并使用ModalController

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

• 实例代码

  • more.html

  <ion-header>
    <ion-navbar>
      <ion-title>More</ion-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';
  
  @IonicPage()
  @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();
    }
  }
  

未完待续…