为项目添加登陆页和tabs各页面，并完成登录，发送网络请求页面跳转等功能。

继续之前创建的项目，cd 到app目录下 执行命令创建login页面 ionic generate page login

1.login.module.ts添加如下代码

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { LoginPageRoutingModule } from './login-routing.module';
import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

2.login.page.html添加代码

<div style="height: 200px;text-align:center;font-size: 50px;line-height: 200px;">登录</div>
<ion-content>
  <ion-list>
    <ion-item>
      <ion-label position="floating">用户名：</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label position="floating">密码：</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
  </ion-list>
  <div class="checkbox-con">
    <ion-checkbox></ion-checkbox>
    <ion-label style="margin-left: 10px;">阅读并同意用户协议</ion-label>
  </div>
  <div class="login-btn-con">
    <ion-button expand="block" (click)="loginBtnClick()">登录</ion-button>
  </div>
</ion-content>

3.login.page.scss

.checkbox-con {
  height: 80px;
  margin-top: 10px;
  margin-left: 40px;
  display: flex;
  align-items: center;
}

.login-btn-con {
  margin-top: 80px;
  margin-left: 40px;
  margin-right: 40px;
}

4.login.page.ts添加登录事件

import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor(public nav: NavController) { }

  ngOnInit() {}
   //登录按钮点击事件
  loginBtnClick() {
    this.nav.navigateForward('tabs');
  }

}

5.修改app-routing.module.ts修改路由默认显示登录页

const routes: Routes = [
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then( m => m.AboutModule)
  },
  {
    path: 'component-demo',
    loadChildren: () => import('./component-demo/component-demo.module').then( m => m.ComponentDemoPageModule)
  }
];

6.package.json需要添加 "@capacitor/dialog": "^1.0.7", 执行 npm install  执行npm run start 运行 用浏览器打开可以看到页面如下

 7.添加网路请求的封装 创建service文件夹并添加2个文件business.service.ts、message-center.service.ts代码量有点多，这里就不贴出来了，可以下载工程查看，在首页点击Get请求和Post请求按钮会发送相应的请求，同时显示loading框。

资源下载链接：

ionicangularcapacitor项目展示控件使用，页面跳转，网络请求封装-Javascript文档类资源-CSDN下载