Ionic 4入门教程视频零基础学习跨平台移动应用开发从安装到项目实战

威震华夏关云长

1. Ionic 4简介

Ionic是一个开源的移动应用开发框架，允许开发者使用Web技术（HTML、CSS和JavaScript）构建跨平台的移动应用。Ionic 4是这个框架的一个重要版本，它带来了许多改进和新特性。

1.1 Ionic 4的特点

• 基于Web Components：Ionic 4完全基于Web Components标准，使其更加模块化和可重用。
• 框架无关：Ionic 4不再仅限于Angular，支持与React、Vue等主流前端框架集成。
• 性能优化：相比之前的版本，Ionic 4在性能方面有显著提升。
• 改进的UI组件：提供了更丰富、更美观的UI组件库。
• 更好的工具支持：增强的CLI工具和开发体验。

1.2 跨平台开发的优势

使用Ionic 4进行跨平台开发有以下优势：

• 一次编写，多平台运行：同一套代码可以部署到iOS、Android和Web平台。
• 降低开发成本：无需为每个平台单独维护代码库。
• 快速开发：利用Web技术栈，大多数前端开发者可以快速上手。
• 丰富的生态系统：可以访问大量的Cordova和Capacitor插件，调用原生设备功能。

2. 开发环境安装

在开始Ionic 4开发之前，我们需要安装和配置必要的开发环境。

2.1 安装Node.js和npm

Ionic 4需要Node.js环境。请访问Node.js官网下载并安装最新的LTS版本。

安装完成后，打开终端或命令提示符，验证安装：

2. node -v
3. npm -v

复制代码

2.2 安装Ionic CLI

Ionic CLI是开发Ionic应用的命令行工具。使用npm全局安装：

2. npm install -g @ionic/cli

复制代码

验证安装：

2. ionic -v

复制代码

2.3 安装其他必要工具

Cordova和Capacitor是Ionic的运行时环境，用于访问原生设备功能。Ionic 4默认使用Capacitor，但也支持Cordova。

2. # 安装Capacitor
3. npm install -g @capacitor/cli @capacitor/core
5. # 或安装Cordova
6. npm install -g cordova

复制代码

推荐使用Visual Studio Code作为开发环境，它提供了丰富的插件支持：

2. # 安装VS Code（根据操作系统选择相应的安装方式）
3. # Windows: 下载并运行安装程序
4. # Mac: 使用Homebrew安装
5. brew cask install visual-studio-code
6. # Linux: 根据发行版选择相应的安装方式

复制代码

安装VS Code后，推荐安装以下插件：

• Ionic Snippets
• Angular Essentials
• TSLint
• Prettier - Code formatter

3. 创建第一个Ionic 4项目

现在我们已经安装了必要的工具，让我们创建第一个Ionic 4项目。

3.1 使用Ionic CLI创建项目

在终端中运行以下命令：

2. ionic start myFirstApp blank

复制代码

这个命令会创建一个名为”myFirstApp”的新项目，使用”blank”模板。Ionic提供了多种模板：

• blank：空模板，适合从零开始
• tabs：带有标签页的模板
• sidemenu：带有侧边菜单的模板

创建过程中，CLI会询问一些问题：

• 是否集成Angular框架？（选择Yes）
• 是否使用Capacitor？（选择Yes）

3.2 项目结构解析

创建完成后，进入项目目录：

2. cd myFirstApp

复制代码

查看项目结构：

2. myFirstApp/
3. ├── e2e/                 # 端到端测试文件
4. ├── node_modules/        # 依赖包
5. ├── src/                 # 源代码
6. │   ├── app/             # 应用根目录
7. │   │   ├── app.module.ts    # 应用根模块
8. │   │   └── app-routing.module.ts  # 路由配置
9. │   ├── assets/          # 静态资源
10. │   ├── environments/    # 环境配置
11. │   ├── theme/           # 主题文件
12. │   └── pages/           # 页面组件
13. ├── www/                 # 构建输出目录
14. ├── angular.json         # Angular配置文件
15. ├── capacitor.config.json # Capacitor配置文件
16. ├── ionic.config.json    # Ionic配置文件
17. ├── package.json         # 项目依赖和脚本
18. ├── tsconfig.json        # TypeScript配置
19. └── tslint.json          # TSLint配置

复制代码

3.3 运行应用

在浏览器中运行应用：

2. ionic serve

复制代码

这个命令会启动开发服务器，并在默认浏览器中打开应用。应用会自动监听文件变化并刷新。

4. Ionic 4基本组件和布局

Ionic 4提供了丰富的UI组件，让我们可以快速构建美观的移动应用界面。

4.1 基本布局组件

IonContent是应用的主要内容区域，通常包含可滚动的内容。

2. <ion-content>
3.   <p>这里是应用的主要内容</p>
4. </ion-content>

复制代码

IonHeader是应用的固定头部，通常包含IonToolbar。

2. <ion-header>
3.   <ion-toolbar>
4.     <ion-title>我的应用</ion-title>
5.   </ion-toolbar>
6. </ion-header>

复制代码

IonFooter是应用的固定底部。

2. <ion-footer>
3.   <ion-toolbar>
4.     <ion-title>底部信息</ion-title>
5.   </ion-toolbar>
6. </ion-footer>

复制代码

4.2 常用UI组件

按钮组件，支持多种样式和功能。

2. <!-- 基本按钮 -->
3. <ion-button>默认按钮</ion-button>
5. <!-- 不同颜色的按钮 -->
6. <ion-button color="primary">主要按钮</ion-button>
7. <ion-button color="secondary">次要按钮</ion-button>
8. <ion-button color="danger">危险按钮</ion-button>
10. <!-- 不同大小的按钮 -->
11. <ion-button size="small">小按钮</ion-button>
12. <ion-button size="large">大按钮</ion-button>
14. <!-- 块级按钮 -->
15. <ion-button expand="block">块级按钮</ion-button>
17. <!-- 圆形按钮 -->
18. <ion-button shape="round">圆形按钮</ion-button>
20. <!-- 带图标的按钮 -->
21. <ion-button>
22.   <ion-icon slot="start" name="star"></ion-icon>
23.   收藏
24. </ion-button>

复制代码

列表组件，用于显示数据列表。

2. <ion-list>
3.   <ion-item>
4.     <ion-label>项目1</ion-label>
5.   </ion-item>
6.   <ion-item>
7.     <ion-label>项目2</ion-label>
8.   </ion-item>
9.   <ion-item>
10.     <ion-label>项目3</ion-label>
11.   </ion-item>
12. </ion-list>

复制代码

卡片组件，用于展示相关信息的集合。

2. <ion-card>
3.   <ion-card-header>
4.     <ion-card-subtitle>卡片副标题</ion-card-subtitle>
5.     <ion-card-title>卡片标题</ion-card-title>
6.   </ion-card-header>
7.   <ion-card-content>
8.     这里是卡片的内容，可以包含文本、图片等任何内容。
9.   </ion-card-content>
10. </ion-card>

复制代码

网格系统，用于创建响应式布局。

2. <ion-grid>
3.   <ion-row>
4.     <ion-col>
5.       列1
6.     </ion-col>
7.     <ion-col>
8.       列2
9.     </ion-col>
10.   </ion-row>
11.   <ion-row>
12.     <ion-col size="8">
13.       宽度为8的列
14.     </ion-col>
15.     <ion-col size="4">
16.       宽度为4的列
17.     </ion-col>
18.   </ion-row>
19. </ion-grid>

复制代码

4.3 表单组件

输入框组件，用于接收用户输入。

2. <ion-item>
3.   <ion-label position="floating">用户名</ion-label>
4.   <ion-input type="text" [(ngModel)]="username"></ion-input>
5. </ion-item>

复制代码

多行文本输入组件。

2. <ion-item>
3.   <ion-label position="floating">描述</ion-label>
4.   <ion-textarea [(ngModel)]="description"></ion-textarea>
5. </ion-item>

复制代码

选择器组件，用于从多个选项中选择一个或多个值。

2. <ion-item>
3.   <ion-label>性别</ion-label>
4.   <ion-select [(ngModel)]="gender">
5.     <ion-select-option value="male">男</ion-select-option>
6.     <ion-select-option value="female">女</ion-select-option>
7.     <ion-select-option value="other">其他</ion-select-option>
8.   </ion-select>
9. </ion-item>

复制代码

开关组件，用于切换开关状态。

2. <ion-item>
3.   <ion-label>启用通知</ion-label>
4.   <ion-toggle [(ngModel)]="enableNotifications"></ion-toggle>
5. </ion-item>

复制代码

复选框组件。

2. <ion-item>
3.   <ion-label>记住我</ion-label>
4.   <ion-checkbox [(ngModel)]="rememberMe"></ion-checkbox>
5. </ion-item>

复制代码

5. 页面导航和路由

在Ionic 4应用中，页面导航和路由是非常重要的部分。Ionic 4使用Angular的路由系统来实现页面之间的导航。

5.1 创建新页面

使用Ionic CLI创建新页面：

2. ionic generate page pages/about

复制代码

这个命令会在src/app/pages目录下创建一个名为about的新页面，包含以下文件：

• about.page.html：页面的HTML模板
• about.page.scss：页面的样式文件
• about.page.ts：页面的TypeScript逻辑文件
• about.module.ts：页面的模块文件

5.2 配置路由

在Ionic 4中，路由配置通常在app-routing.module.ts文件中进行。

2. import { NgModule } from '@angular/core';
3. import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
5. const routes: Routes = [
6.   {
7.     path: '',
8.     redirectTo: 'home',
9.     pathMatch: 'full'
10.   },
11.   {
12.     path: 'home',
13.     loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
14.   },
15.   {
16.     path: 'about',
17.     loadChildren: () => import('./pages/about/about.module').then(m => m.AboutPageModule)
18.   }
19. ];
21. @NgModule({
22.   imports: [
23.     RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
24.   ],
25.   exports: [RouterModule]
26. })
27. export class AppRoutingModule { }

复制代码

5.3 页面导航

在组件中注入Router服务，并使用它进行导航：

2. import { Component } from '@angular/core';
3. import { Router } from '@angular/router';
5. @Component({
6.   selector: 'app-home',
7.   templateUrl: 'home.page.html',
8.   styleUrls: ['home.page.scss'],
9. })
10. export class HomePage {
12.   constructor(private router: Router) {}
14.   navigateToAbout() {
15.     this.router.navigate(['/about']);
16.   }
17. }

复制代码

在HTML模板中：

2. <ion-button (click)="navigateToAbout()">关于我们</ion-button>

复制代码

Ionic 4提供了NavController服务，用于更高级的导航控制：

2. import { Component } from '@angular/core';
3. import { NavController } from '@ionic/angular';
5. @Component({
6.   selector: 'app-home',
7.   templateUrl: 'home.page.html',
8.   styleUrls: ['home.page.scss'],
9. })
10. export class HomePage {
12.   constructor(private navCtrl: NavController) {}
14.   navigateToAbout() {
15.     this.navCtrl.navigateForward('/about');
16.   }
18.   goBack() {
19.     this.navCtrl.navigateBack('/home');
20.   }
22.   goToRoot() {
23.     this.navCtrl.navigateRoot('/home');
24.   }
25. }

复制代码

在导航时传递参数：

2. // 发送页面
3. navigateToDetails(id: number) {
4.   this.router.navigate(['/details', { id: id }]);
5. }

复制代码

在路由配置中：

2. {
3.   path: 'details/:id',
4.   loadChildren: () => import('./pages/details/details.module').then(m => m.DetailsPageModule)
5. }

复制代码

接收参数：

2. import { Component, OnInit } from '@angular/core';
3. import { ActivatedRoute } from '@angular/router';
5. @Component({
6.   selector: 'app-details',
7.   templateUrl: './details.page.html',
8.   styleUrls: ['./details.page.scss'],
9. })
10. export class DetailsPage implements OnInit {
12.   id: number;
14.   constructor(private route: ActivatedRoute) { }
16.   ngOnInit() {
17.     this.id = this.route.snapshot.params['id'];
18.     // 或者使用订阅方式
19.     this.route.params.subscribe(params => {
20.       this.id = params['id'];
21.     });
22.   }
23. }

复制代码

5.4 导航堆栈

Ionic 4维护了一个导航堆栈，用于跟踪用户的导航历史。可以使用NavController来管理这个堆栈：

2. // 获取当前导航堆栈
3. const stack = this.navCtrl.getCurrentNavigation();
5. // 获取导航堆栈中的页面数量
6. const stackLength = this.navCtrl.getLength();
8. // 移除导航堆栈中的页面
9. this.navCtrl.pop();

复制代码

6. 数据管理和状态

在Ionic 4应用中，数据管理和状态处理是非常重要的部分。本节将介绍如何在Ionic 4应用中管理和共享数据。

6.1 使用服务共享数据

创建一个服务来管理应用的数据：

2. ionic generate service services/data

复制代码

在服务中定义数据和操作数据的方法：

2. import { Injectable } from '@angular/core';
3. import { BehaviorSubject, Observable } from 'rxjs';
5. @Injectable({
6.   providedIn: 'root'
7. })
8. export class DataService {
9.   private itemsSource = new BehaviorSubject<any[]>([]);
10.   currentItems = this.itemsSource.asObservable();
12.   constructor() { }
14.   updateItems(items: any[]) {
15.     this.itemsSource.next(items);
16.   }
18.   addItem(item: any) {
19.     const currentItems = this.itemsSource.getValue();
20.     currentItems.push(item);
21.     this.itemsSource.next(currentItems);
22.   }
24.   removeItem(index: number) {
25.     const currentItems = this.itemsSource.getValue();
26.     currentItems.splice(index, 1);
27.     this.itemsSource.next(currentItems);
28.   }
29. }

复制代码

在组件中使用这个服务：

2. import { Component, OnInit } from '@angular/core';
3. import { DataService } from '../../services/data.service';
5. @Component({
6.   selector: 'app-home',
7.   templateUrl: 'home.page.html',
8.   styleUrls: ['home.page.scss'],
9. })
10. export class HomePage implements OnInit {
11.   items: any[] = [];
13.   constructor(private dataService: DataService) { }
15.   ngOnInit() {
16.     this.dataService.currentItems.subscribe(items => {
17.       this.items = items;
18.     });
19.   }
21.   addItem() {
22.     const newItem = {
23.       id: this.items.length + 1,
24.       name: `项目 ${this.items.length + 1}`
25.     };
26.     this.dataService.addItem(newItem);
27.   }
29.   removeItem(index: number) {
30.     this.dataService.removeItem(index);
31.   }
32. }

复制代码

6.2 使用RxJS进行响应式编程

RxJS是响应式编程的库，在Ionic 4中被广泛使用。下面是一些常用的RxJS操作符：

2. import { Component, OnInit } from '@angular/core';
3. import { fromEvent, interval } from 'rxjs';
4. import { map, filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';
6. @Component({
7.   selector: 'app-rxjs-demo',
8.   templateUrl: './rxjs-demo.page.html',
9.   styleUrls: ['./rxjs-demo.page.scss'],
10. })
11. export class RxjsDemoPage implements OnInit {
13.   constructor() { }
15.   ngOnInit() {
16.     // 使用interval创建一个每隔1秒发出一个递增数字的Observable
17.     const counter = interval(1000);
18.    
19.     // 使用pipe应用操作符
20.     counter.pipe(
21.       // 只取前10个值
22.       take(10),
23.       // 过滤掉偶数
24.       filter(value => value % 2 === 1),
25.       // 对值进行映射
26.       map(value => `奇数: ${value}`)
27.     ).subscribe(value => console.log(value));
29.     // 监听输入框的输入事件
30.     const inputElement = document.getElementById('search-input');
31.     if (inputElement) {
32.       fromEvent(inputElement, 'input').pipe(
33.         // 获取输入值
34.         map((event: any) => event.target.value),
35.         // 防抖，等待300毫秒没有新输入后才处理
36.         debounceTime(300),
37.         // 只有当值发生变化时才继续
38.         distinctUntilChanged()
39.       ).subscribe(searchTerm => {
40.         console.log('搜索词:', searchTerm);
41.         // 这里可以执行搜索操作
42.       });
43.     }
44.   }
45. }

复制代码

6.3 使用NgRx进行状态管理

对于大型应用，可以使用NgRx进行状态管理。NgRx是一个基于RxJS的状态管理库，灵感来自Redux。

首先安装NgRx：

2. npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools

复制代码

创建一个简单的计数器状态管理：

2. // src/app/actions/counter.actions.ts
3. import { createAction } from '@ngrx/store';
5. export const increment = createAction('[Counter] Increment');
6. export const decrement = createAction('[Counter] Decrement');
7. export const reset = createAction('[Counter] Reset');

复制代码

2. // src/app/reducers/counter.reducer.ts
3. import { createReducer, on } from '@ngrx/store';
4. import { increment, decrement, reset } from '../actions/counter.actions';
6. export const initialState = 0;
8. export const counterReducer = createReducer(
9.   initialState,
10.   on(increment, state => state + 1),
11.   on(decrement, state => state - 1),
12.   on(reset, state => 0)
13. );

复制代码

2. // src/app/app.module.ts
3. import { NgModule } from '@angular/core';
4. import { BrowserModule } from '@angular/platform-browser';
5. import { RouterModule } from '@angular/router';
6. import { IonicModule } from '@ionic/angular';
7. import { AppComponent } from './app.component';
8. import { StoreModule } from '@ngrx/store';
9. import { StoreDevtoolsModule } from '@ngrx/store-devtools';
10. import { counterReducer } from './reducers/counter.reducer';
12. @NgModule({
13.   declarations: [AppComponent],
14.   imports: [
15.     BrowserModule,
16.     IonicModule.forRoot(),
17.     RouterModule.forRoot([]),
18.     StoreModule.forRoot({ count: counterReducer }),
19.     StoreDevtoolsModule.instrument({
20.       maxAge: 25
21.     })
22.   ],
23.   bootstrap: [AppComponent]
24. })
25. export class AppModule { }

复制代码

2. // src/app/pages/counter/counter.page.ts
3. import { Component } from '@angular/core';
4. import { Store, select } from '@ngrx/store';
5. import { Observable } from 'rxjs';
6. import { increment, decrement, reset } from '../../actions/counter.actions';
8. @Component({
9.   selector: 'app-counter',
10.   templateUrl: './counter.page.html',
11.   styleUrls: ['./counter.page.scss'],
12. })
13. export class CounterPage {
14.   count$: Observable<number>;
16.   constructor(private store: Store<{ count: number }>) {
17.     this.count$ = store.pipe(select('count'));
18.   }
20.   increment() {
21.     this.store.dispatch(increment());
22.   }
24.   decrement() {
25.     this.store.dispatch(decrement());
26.   }
28.   reset() {
29.     this.store.dispatch(reset());
30.   }
31. }

复制代码

在模板中：

2. <ion-header>
3.   <ion-toolbar>
4.     <ion-title>计数器</ion-title>
5.   </ion-toolbar>
6. </ion-header>
8. <ion-content>
9.   <div class="ion-text-center ion-padding">
10.     <h1>当前计数: {{ count$ | async }}</h1>
11.     <ion-button (click)="increment()">增加</ion-button>
12.     <ion-button (click)="decrement()">减少</ion-button>
13.     <ion-button (click)="reset()">重置</ion-button>
14.   </div>
15. </ion-content>

复制代码

7. 与后端API交互

在移动应用开发中，与后端API交互是非常常见的需求。Ionic 4提供了多种方式来处理HTTP请求。

7.1 使用HttpClient

Angular的HttpClient是处理HTTP请求的推荐方式。

首先，在app.module.ts中导入HttpClientModule：

2. import { HttpClientModule } from '@angular/common/angular';
4. @NgModule({
5.   // ...
6.   imports: [
7.     // ...
8.     HttpClientModule
9.   ],
10.   // ...
11. })
12. export class AppModule { }

复制代码

创建一个API服务：

2. // src/app/services/api.service.ts
3. import { Injectable } from '@angular/core';
4. import { HttpClient, HttpHeaders } from '@angular/common/http';
5. import { Observable } from 'rxjs';
7. @Injectable({
8.   providedIn: 'root'
9. })
10. export class ApiService {
11.   private apiUrl = 'https://api.example.com'; // 替换为你的API地址
13.   constructor(private http: HttpClient) { }
15.   // GET请求
16.   get(endpoint: string): Observable<any> {
17.     return this.http.get(`${this.apiUrl}/${endpoint}`);
18.   }
20.   // POST请求
21.   post(endpoint: string, data: any): Observable<any> {
22.     return this.http.post(`${this.apiUrl}/${endpoint}`, data);
23.   }
25.   // PUT请求
26.   put(endpoint: string, data: any): Observable<any> {
27.     return this.http.put(`${this.apiUrl}/${endpoint}`, data);
28.   }
30.   // DELETE请求
31.   delete(endpoint: string): Observable<any> {
32.     return this.http.delete(`${this.apiUrl}/${endpoint}`);
33.   }
35.   // 带有自定义头的请求
36.   getWithAuth(endpoint: string, token: string): Observable<any> {
37.     const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
38.     return this.http.get(`${this.apiUrl}/${endpoint}`, { headers });
39.   }
40. }

复制代码

在组件中使用这个服务：

2. import { Component, OnInit } from '@angular/core';
3. import { ApiService } from '../../services/api.service';
5. @Component({
6.   selector: 'app-posts',
7.   templateUrl: './posts.page.html',
8.   styleUrls: ['./posts.page.scss'],
9. })
10. export class PostsPage implements OnInit {
11.   posts: any[] = [];
12.   loading: boolean = false;
13.   error: string;
15.   constructor(private apiService: ApiService) { }
17.   ngOnInit() {
18.     this.loadPosts();
19.   }
21.   loadPosts() {
22.     this.loading = true;
23.     this.error = null;
24.    
25.     this.apiService.get('posts').subscribe(
26.       (response) => {
27.         this.posts = response;
28.         this.loading = false;
29.       },
30.       (err) => {
31.         this.error = '加载数据失败，请稍后再试。';
32.         this.loading = false;
33.         console.error('API错误:', err);
34.       }
35.     );
36.   }
38.   createPost() {
39.     const newPost = {
40.       title: '新文章',
41.       body: '这是文章的内容',
42.       userId: 1
43.     };
44.    
45.     this.apiService.post('posts', newPost).subscribe(
46.       (response) => {
47.         console.log('文章创建成功:', response);
48.         this.loadPosts(); // 重新加载文章列表
49.       },
50.       (err) => {
51.         console.error('创建文章失败:', err);
52.       }
53.     );
54.   }
55. }

复制代码

在模板中：

2. <ion-header>
3.   <ion-toolbar>
4.     <ion-title>文章列表</ion-title>
5.   </ion-toolbar>
6. </ion-header>
8. <ion-content>
9.   <ion-refresher (ionRefresh)="loadPosts()">
10.     <ion-refresher-content></ion-refresher-content>
11.   </ion-refresher>
13.   <div *ngIf="loading" class="ion-text-center ion-padding">
14.     <ion-spinner></ion-spinner>
15.     <p>加载中...</p>
16.   </div>
18.   <div *ngIf="error" class="ion-text-center ion-padding">
19.     <p color="danger">{{ error }}</p>
20.     <ion-button (click)="loadPosts()">重试</ion-button>
21.   </div>
23.   <ion-list>
24.     <ion-item *ngFor="let post of posts">
25.       <ion-label>
26.         <h2>{{ post.title }}</h2>
27.         <p>{{ post.body }}</p>
28.       </ion-label>
29.     </ion-item>
30.   </ion-list>
32.   <ion-fab vertical="bottom" horizontal="end" slot="fixed">
33.     <ion-fab-button (click)="createPost()">
34.       <ion-icon name="add"></ion-icon>
35.     </ion-fab-button>
36.   </ion-fab>
37. </ion-content>

复制代码

7.2 处理认证和授权

大多数应用都需要用户认证，下面是一个简单的认证服务示例：

2. // src/app/services/auth.service.ts
3. import { Injectable } from '@angular/core';
4. import { HttpClient } from '@angular/common/http';
5. import { BehaviorSubject, Observable, of } from 'rxjs';
6. import { map, tap, catchError } from 'rxjs/operators';
7. import { Storage } from '@ionic/storage';
8. import { JwtHelperService } from '@auth0/angular-jwt';
10. @Injectable({
11.   providedIn: 'root'
12. })
13. export class AuthService {
14.   private apiUrl = 'https://api.example.com/auth';
15.   private currentUserSubject: BehaviorSubject<any>;
16.   public currentUser: Observable<any>;
17.   private jwtHelper = new JwtHelperService();
19.   constructor(
20.     private http: HttpClient,
21.     private storage: Storage
22.   ) {
23.     this.currentUserSubject = new BehaviorSubject<any>(null);
24.     this.currentUser = this.currentUserSubject.asObservable();
25.    
26.     // 检查存储中是否有token
27.     this.storage.get('token').then(token => {
28.       if (token && !this.jwtHelper.isTokenExpired(token)) {
29.         const user = this.jwtHelper.decodeToken(token);
30.         this.currentUserSubject.next(user);
31.       }
32.     });
33.   }
35.   public get currentUserValue(): any {
36.     return this.currentUserSubject.value;
37.   }
39.   login(username: string, password: string): Observable<any> {
40.     return this.http.post<any>(`${this.apiUrl}/login`, { username, password })
41.       .pipe(
42.         map(response => {
43.           // 登录成功，保存token和用户信息
44.           if (response && response.token) {
45.             this.storage.set('token', response.token);
46.             const user = this.jwtHelper.decodeToken(response.token);
47.             this.currentUserSubject.next(user);
48.           }
49.           return response;
50.         })
51.       );
52.   }
54.   logout(): void {
55.     this.storage.remove('token');
56.     this.currentUserSubject.next(null);
57.   }
59.   isAuthenticated(): boolean {
60.     const token = this.storage.get('token');
61.     return token && !this.jwtHelper.isTokenExpired(token);
62.   }
64.   getToken(): Promise<string> {
65.     return this.storage.get('token');
66.   }
67. }

复制代码

创建一个登录页面：

2. // src/app/pages/login/login.page.ts
3. import { Component } from '@angular/core';
4. import { AuthService } from '../../services/auth.service';
5. import { Router } from '@angular/router';
6. import { ToastController } from '@ionic/angular';
8. @Component({
9.   selector: 'app-login',
10.   templateUrl: './login.page.html',
11.   styleUrls: ['./login.page.scss'],
12. })
13. export class LoginPage {
14.   credentials = {
15.     username: '',
16.     password: ''
17.   };
19.   constructor(
20.     private authService: AuthService,
21.     private router: Router,
22.     private toastController: ToastController
23.   ) { }
25.   login() {
26.     this.authService.login(this.credentials.username, this.credentials.password)
27.       .subscribe(
28.         async () => {
29.           const toast = await this.toastController.create({
30.             message: '登录成功',
31.             duration: 2000,
32.             position: 'bottom'
33.           });
34.           toast.present();
35.           this.router.navigate(['/home']);
36.         },
37.         async (error) => {
38.           const toast = await this.toastController.create({
39.             message: '登录失败，请检查用户名和密码',
40.             duration: 2000,
41.             position: 'bottom',
42.             color: 'danger'
43.           });
44.           toast.present();
45.         }
46.       );
47.   }
48. }

复制代码

登录页面模板：

2. <ion-header>
3.   <ion-toolbar>
4.     <ion-title>登录</ion-title>
5.   </ion-toolbar>
6. </ion-header>
8. <ion-content>
9.   <div class="ion-padding">
10.     <form (ngSubmit)="login()">
11.       <ion-item>
12.         <ion-label position="floating">用户名</ion-label>
13.         <ion-input type="text" [(ngModel)]="credentials.username" name="username" required></ion-input>
14.       </ion-item>
15.       
16.       <ion-item>
17.         <ion-label position="floating">密码</ion-label>
18.         <ion-input type="password" [(ngModel)]="credentials.password" name="password" required></ion-input>
19.       </ion-item>
20.       
21.       <div class="ion-margin-top">
22.         <ion-button expand="block" type="submit" [disabled]="!credentials.username || !credentials.password">登录</ion-button>
23.       </div>
24.     </form>
25.   </div>
26. </ion-content>

复制代码

7.3 使用拦截器

拦截器允许我们在请求发送前或响应接收后进行一些操作，比如添加认证头、处理错误等。

创建一个认证拦截器：

2. // src/app/interceptors/auth.interceptor.ts
3. import { Injectable } from '@angular/core';
4. import {
5.   HttpRequest,
6.   HttpHandler,
7.   HttpEvent,
8.   HttpInterceptor
9. } from '@angular/common/http';
10. import { Observable, from } from 'rxjs';
11. import { switchMap } from 'rxjs/operators';
12. import { AuthService } from '../services/auth.service';
14. @Injectable()
15. export class AuthInterceptor implements HttpInterceptor {
16.   constructor(private authService: AuthService) {}
18.   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
19.     // 获取token
20.     return from(this.authService.getToken()).pipe(
21.       switchMap(token => {
22.         // 如果有token，添加到请求头
23.         if (token) {
24.           request = request.clone({
25.             setHeaders: {
26.               Authorization: `Bearer ${token}`
27.             }
28.           });
29.         }
30.         
31.         // 继续处理请求
32.         return next.handle(request);
33.       })
34.     );
35.   }
36. }

复制代码

注册拦截器：

2. // src/app/app.module.ts
3. import { HTTP_INTERCEPTORS } from '@angular/common/http';
4. import { AuthInterceptor } from './interceptors/auth.interceptor';
6. @NgModule({
7.   // ...
8.   providers: [
9.     {
10.       provide: HTTP_INTERCEPTORS,
11.       useClass: AuthInterceptor,
12.       multi: true
13.     }
14.   ],
15.   // ...
16. })
17. export class AppModule { }

复制代码

8. 调试和测试

在开发Ionic 4应用时，调试和测试是非常重要的环节。本节将介绍如何有效地调试和测试Ionic 4应用。

8.1 浏览器调试

Ionic应用可以在浏览器中运行和调试，这是最方便的调试方式。

在Chrome或其他现代浏览器中，可以使用开发者工具进行调试：

1. 在浏览器中运行应用：ionic serve
2. 右键点击页面，选择”检查”或按F12打开开发者工具
3. 在”Console”标签页查看日志和错误
4. 在”Elements”标签页检查和修改DOM
5. 在”Network”标签页监控网络请求
6. 在”Application”标签页查看本地存储和缓存

Augury是一个Angular应用的调试工具，可以帮助你理解应用的结构和状态。

1. 在Chrome扩展商店安装Augury
2. 打开开发者工具，会出现一个新的”Augury”标签页
3. 使用Augury可以查看组件树、路由状态和NgRx状态等

8.2 设备调试

在真实设备上调试应用可以更好地了解应用在实际环境中的表现。

1. 启用开发者选项和USB调试在设备上，进入”设置” > “关于手机”连续点击”版本号”7次，启用开发者选项返回”设置”，进入”开发者选项”启用”USB调试”
2. 在设备上，进入”设置” > “关于手机”
3. 连续点击”版本号”7次，启用开发者选项
4. 返回”设置”，进入”开发者选项”
5. 启用”USB调试”
6. 连接设备并运行应用ionic cordova run android --device
7. 使用Chrome调试在Chrome中访问chrome://inspect/#devices找到你的设备，点击”inspect”这将打开一个开发者工具窗口，可以调试运行在设备上的应用
8. 在Chrome中访问chrome://inspect/#devices
9. 找到你的设备，点击”inspect”
10. 这将打开一个开发者工具窗口，可以调试运行在设备上的应用

启用开发者选项和USB调试

• 在设备上，进入”设置” > “关于手机”
• 连续点击”版本号”7次，启用开发者选项
• 返回”设置”，进入”开发者选项”
• 启用”USB调试”

连接设备并运行应用

2. ionic cordova run android --device

复制代码

使用Chrome调试

• 在Chrome中访问chrome://inspect/#devices
• 找到你的设备，点击”inspect”
• 这将打开一个开发者工具窗口，可以调试运行在设备上的应用

1. 连接iOS设备到Mac
2. 在Xcode中打开项目：ionic cordova open ios
3. 在Xcode中选择你的设备作为目标
4. 点击运行按钮
5. 使用Safari调试在Mac上打开Safari进入”开发”菜单，选择你的设备和应用这将打开一个Web检查器窗口，可以调试应用
6. 在Mac上打开Safari
7. 进入”开发”菜单，选择你的设备和应用
8. 这将打开一个Web检查器窗口，可以调试应用

• 在Mac上打开Safari
• 进入”开发”菜单，选择你的设备和应用
• 这将打开一个Web检查器窗口，可以调试应用

8.3 单元测试

Ionic 4应用使用Jasmine和Karma进行单元测试。

创建一个简单的服务测试：

2. // src/app/services/data.service.spec.ts
3. import { TestBed } from '@angular/core/testing';
5. import { DataService } from './data.service';
7. describe('DataService', () => {
8.   let service: DataService;
10.   beforeEach(() => {
11.     TestBed.configureTestingModule({});
12.     service = TestBed.inject(DataService);
13.   });
15.   it('should be created', () => {
16.     expect(service).toBeTruthy();
17.   });
19.   it('should add item to list', () => {
20.     const initialLength = service.getItems().length;
21.     service.addItem({ id: 1, name: 'Test Item' });
22.     expect(service.getItems().length).toBe(initialLength + 1);
23.   });
25.   it('should remove item from list', () => {
26.     service.addItem({ id: 1, name: 'Test Item' });
27.     const initialLength = service.getItems().length;
28.     service.removeItem(0);
29.     expect(service.getItems().length).toBe(initialLength - 1);
30.   });
31. });

复制代码

运行所有测试：

2. ng test

复制代码

运行特定文件的测试：

2. ng test --include='src/app/services/data.service.spec.ts'

复制代码

8.4 端到端测试

Ionic 4应用使用Protractor进行端到端测试。

创建一个简单的端到端测试：

2. // e2e/src/app.e2e-spec.ts
3. import { AppPage } from './app.po';
5. describe('workspace-project App', () => {
6.   let page: AppPage;
8.   beforeEach(() => {
9.     page = new AppPage();
10.   });
12.   it('should display welcome message', () => {
13.     page.navigateTo();
14.     expect(page.getTitleText()).toEqual('Welcome to myFirstApp!');
15.   });
17.   it('should navigate to about page', () => {
18.     page.navigateTo();
19.     page.getAboutButton().click();
20.     expect(page.getAboutTitle()).toEqual('About');
21.   });
22. });

复制代码

首先启动应用：

2. ionic serve

复制代码

然后在另一个终端中运行测试：

2. ng e2e

复制代码

8.5 使用Ionic Native插件

Ionic Native提供了对设备原生功能的访问，如相机、GPS等。下面是一个使用相机的例子：

首先安装插件：

2. ionic cordova plugin add cordova-plugin-camera
3. npm install @ionic-native/camera

复制代码

在app.module.ts中导入插件：

2. import { Camera } from '@ionic-native/camera/ngx';
4. @NgModule({
5.   // ...
6.   providers: [
7.     // ...
8.     Camera
9.   ],
10.   // ...
11. })
12. export class AppModule { }

复制代码

在组件中使用相机：

2. import { Component } from '@angular/core';
3. import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
5. @Component({
6.   selector: 'app-camera',
7.   templateUrl: './camera.page.html',
8.   styleUrls: ['./camera.page.scss'],
9. })
10. export class CameraPage {
11.   image: string;
13.   constructor(private camera: Camera) { }
15.   takePicture() {
16.     const options: CameraOptions = {
17.       quality: 100,
18.       destinationType: this.camera.DestinationType.DATA_URL,
19.       encodingType: this.camera.EncodingType.JPEG,
20.       mediaType: this.camera.MediaType.PICTURE
21.     };
23.     this.camera.getPicture(options).then((imageData) => {
24.       // imageData is either a base64 encoded string or a file URI
25.       this.image = 'data:image/jpeg;base64,' + imageData;
26.     }, (err) => {
27.       // Handle error
28.       console.error('Camera error:', err);
29.     });
30.   }
31. }

复制代码

在模板中：

2. <ion-header>
3.   <ion-toolbar>
4.     <ion-title>相机</ion-title>
5.   </ion-toolbar>
6. </ion-header>
8. <ion-content>
9.   <div class="ion-text-center ion-padding">
10.     <ion-button (click)="takePicture()">拍照</ion-button>
11.    
12.     <div *ngIf="image" class="ion-margin-top">
13.       <img [src]="image" style="max-width: 100%;">
14.     </div>
15.   </div>
16. </ion-content>

复制代码

9. 构建和发布应用

开发完成后，我们需要构建和发布应用。本节将介绍如何为不同平台构建和发布Ionic 4应用。

9.1 构建Web应用

Ionic应用可以作为Web应用发布：

2. # 构建生产版本
3. ionic build --prod
5. # 构建完成后，文件会在www目录中
6. # 可以将这些文件部署到任何Web服务器

复制代码

9.2 构建Android应用

2. ionic cordova platform add android

复制代码

2. # 构建调试版本
3. ionic cordova build android
5. # 构建发布版本
6. ionic cordova build android --prod --release

复制代码

1. 生成密钥库：keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
2. 使用jarsigner签名APK：jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk alias_name
3. 使用zipalign优化APK：zipalign -v 4 platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk my-app.apk

生成密钥库：

2. keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

复制代码

使用jarsigner签名APK：

2. jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk alias_name

复制代码

使用zipalign优化APK：

2. zipalign -v 4 platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk my-app.apk

复制代码

1. 登录Google Play Console
2. 创建应用
3. 上传APK文件
4. 填写应用信息、截图等
5. 提交审核

9.3 构建iOS应用

2. ionic cordova platform add ios

复制代码

2. # 构建iOS应用
3. ionic cordova build ios --prod

复制代码

2. ionic cordova open ios

复制代码

1. 在Xcode中配置签名证书和配置文件
2. 选择”Generic iOS Device”作为目标
3. 选择”Product” > “Archive”
4. 在Organizer窗口中，选择”Upload to App Store”
5. 按照提示完成上传

1. 登录App Store Connect
2. 创建应用
3. 填写应用信息、截图等
4. 选择构建版本
5. 提交审核

9.4 使用Capacitor

Capacitor是Ionic团队开发的替代Cordova的解决方案，提供了更好的开发体验和原生功能访问。

2. npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
3. npx cap init

复制代码

2. # 构建Web资源
3. ionic build
5. # 同步到原生项目
6. npx cap sync
8. # 在Android Studio中打开
9. npx cap open android
11. # 在Xcode中打开
12. npx cap open ios

复制代码

Capacitor提供了许多原生插件，下面是一个使用Geolocation插件的例子：

2. import { Component } from '@angular/core';
3. import { Geolocation, Position } from '@capacitor/geolocation';
5. @Component({
6.   selector: 'app-geolocation',
7.   templateUrl: './geolocation.page.html',
8.   styleUrls: ['./geolocation.page.scss'],
9. })
10. export class GeolocationPage {
11.   position: Position;
13.   constructor() { }
15.   async getCurrentPosition() {
16.     try {
17.       this.position = await Geolocation.getCurrentPosition();
18.       console.log('Current position:', this.position);
19.     } catch (error) {
20.       console.error('Error getting location', error);
21.     }
22.   }
23. }

复制代码

在模板中：

2. <ion-header>
3.   <ion-toolbar>
4.     <ion-title>地理位置</ion-title>
5.   </ion-toolbar>
6. </ion-header>
8. <ion-content>
9.   <div class="ion-text-center ion-padding">
10.     <ion-button (click)="getCurrentPosition()">获取当前位置</ion-button>
11.    
12.     <div *ngIf="position" class="ion-margin-top">
13.       <p>纬度: {{ position.coords.latitude }}</p>
14.       <p>经度: {{ position.coords.longitude }}</p>
15.       <p>精度: {{ position.coords.accuracy }} 米</p>
16.     </div>
17.   </div>
18. </ion-content>

复制代码

10. 实战项目：待办事项应用

现在，让我们通过一个完整的待办事项应用来综合运用前面所学的知识。

10.1 项目概述

我们将创建一个待办事项应用，具有以下功能：

• 添加、编辑和删除待办事项
• 标记待办事项为完成或未完成
• 按类别过滤待办事项
• 本地存储待办事项
• 响应式设计，适配不同屏幕尺寸

10.2 创建项目

首先，创建一个新的Ionic项目：

2. ionic start todoApp tabs --type=angular
3. cd todoApp

复制代码

10.3 设计数据模型

创建一个待办事项的数据模型：

2. // src/app/models/todo.model.ts
3. export interface Todo {
4.   id: string;
5.   title: string;
6.   description: string;
7.   completed: boolean;
8.   category: string;
9.   createdAt: Date;
10.   updatedAt: Date;
11. }

复制代码

10.4 创建服务

创建一个待办事项服务：

2. ionic generate service services/todo

复制代码

在服务中实现待办事项的管理逻辑：

2. // src/app/services/todo.service.ts
3. import { Injectable } from '@angular/core';
4. import { BehaviorSubject, Observable } from 'rxjs';
5. import { map } from 'rxjs/operators';
6. import { Todo } from '../models/todo.model';
7. import { Storage } from '@ionic/storage';
9. @Injectable({
10.   providedIn: 'root'
11. })
12. export class TodoService {
13.   private todosSubject = new BehaviorSubject<Todo[]>([]);
14.   private todos$: Observable<Todo[]> = this.todosSubject.asObservable();
15.   private STORAGE_KEY = 'todos';
17.   constructor(private storage: Storage) {
18.     this.loadTodos();
19.   }
21.   private async loadTodos() {
22.     const storedTodos = await this.storage.get(this.STORAGE_KEY);
23.     if (storedTodos) {
24.       this.todosSubject.next(storedTodos);
25.     }
26.   }
28.   private async saveTodos(todos: Todo[]) {
29.     await this.storage.set(this.STORAGE_KEY, todos);
30.     this.todosSubject.next(todos);
31.   }
33.   getTodos(): Observable<Todo[]> {
34.     return this.todos$;
35.   }
37.   getTodosByCategory(category: string): Observable<Todo[]> {
38.     return this.todos$.pipe(
39.       map(todos => todos.filter(todo => todo.category === category))
40.     );
41.   }
43.   getCompletedTodos(): Observable<Todo[]> {
44.     return this.todos$.pipe(
45.       map(todos => todos.filter(todo => todo.completed))
46.     );
47.   }
49.   getActiveTodos(): Observable<Todo[]> {
50.     return this.todos$.pipe(
51.       map(todos => todos.filter(todo => !todo.completed))
52.     );
53.   }
55.   async addTodo(todo: Omit<Todo, 'id' | 'createdAt' | 'updatedAt'>) {
56.     const newTodo: Todo = {
57.       ...todo,
58.       id: this.generateId(),
59.       createdAt: new Date(),
60.       updatedAt: new Date()
61.     };
63.     const currentTodos = this.todosSubject.getValue();
64.     const updatedTodos = [...currentTodos, newTodo];
65.     await this.saveTodos(updatedTodos);
66.    
67.     return newTodo;
68.   }
70.   async updateTodo(id: string, updates: Partial<Todo>) {
71.     const currentTodos = this.todosSubject.getValue();
72.     const updatedTodos = currentTodos.map(todo => {
73.       if (todo.id === id) {
74.         return {
75.           ...todo,
76.           ...updates,
77.           updatedAt: new Date()
78.         };
79.       }
80.       return todo;
81.     });
82.    
83.     await this.saveTodos(updatedTodos);
84.    
85.     return updatedTodos.find(todo => todo.id === id);
86.   }
88.   async deleteTodo(id: string) {
89.     const currentTodos = this.todosSubject.getValue();
90.     const updatedTodos = currentTodos.filter(todo => todo.id !== id);
91.     await this.saveTodos(updatedTodos);
92.   }
94.   async toggleTodoComplete(id: string) {
95.     const currentTodos = this.todosSubject.getValue();
96.     const updatedTodos = currentTodos.map(todo => {
97.       if (todo.id === id) {
98.         return {
99.           ...todo,
100.           completed: !todo.completed,
101.           updatedAt: new Date()
102.         };
103.       }
104.       return todo;
105.     });
106.    
107.     await this.saveTodos(updatedTodos);
108.    
109.     return updatedTodos.find(todo => todo.id === id);
110.   }
112.   private generateId(): string {
113.     return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
114.   }
115. }

复制代码

10.5 创建页面

2. ionic generate page pages/todos

复制代码

在页面组件中：

2. // src/app/pages/todos/todos.page.ts
3. import { Component, OnInit } from '@angular/core';
4. import { Observable } from 'rxjs';
5. import { Todo } from '../../models/todo.model';
6. import { TodoService } from '../../services/todo.service';
7. import { ModalController } from '@ionic/angular';
8. import { TodoModalPage } from '../todo-modal/todo-modal.page';
10. @Component({
11.   selector: 'app-todos',
12.   templateUrl: './todos.page.html',
13.   styleUrls: ['./todos.page.scss'],
14. })
15. export class TodosPage implements OnInit {
16.   todos$: Observable<Todo[]>;
17.   activeTodos$: Observable<Todo[]>;
18.   completedTodos$: Observable<Todo[]>;
19.   selectedCategory: string = 'all';
21.   categories = [
22.     { id: 'all', name: '全部' },
23.     { id: 'work', name: '工作' },
24.     { id: 'personal', name: '个人' },
25.     { id: 'shopping', name: '购物' }
26.   ];
28.   constructor(
29.     private todoService: TodoService,
30.     private modalController: ModalController
31.   ) { }
33.   ngOnInit() {
34.     this.todos$ = this.todoService.getTodos();
35.     this.activeTodos$ = this.todoService.getActiveTodos();
36.     this.completedTodos$ = this.todoService.getCompletedTodos();
37.   }
39.   async presentTodoModal(todo?: Todo) {
40.     const modal = await this.modalController.create({
41.       component: TodoModalPage,
42.       componentProps: {
43.         todo: todo || null
44.       }
45.     });
47.     modal.onDidDismiss().then((data) => {
48.       if (data.data) {
49.         if (todo) {
50.           // 更新待办事项
51.           this.todoService.updateTodo(todo.id, data.data);
52.         } else {
53.           // 添加新的待办事项
54.           this.todoService.addTodo(data.data);
55.         }
56.       }
57.     });
59.     return await modal.present();
60.   }
62.   toggleTodoComplete(id: string) {
63.     this.todoService.toggleTodoComplete(id);
64.   }
66.   deleteTodo(id: string) {
67.     this.todoService.deleteTodo(id);
68.   }
70.   filterByCategory(category: string) {
71.     this.selectedCategory = category;
72.   }
74.   getFilteredTodos(): Observable<Todo[]> {
75.     if (this.selectedCategory === 'all') {
76.       return this.todos$;
77.     }
78.     return this.todoService.getTodosByCategory(this.selectedCategory);
79.   }
80. }

复制代码

在页面模板中：

2. <ion-header>
3.   <ion-toolbar>
4.     <ion-title>待办事项</ion-title>
5.     <ion-buttons slot="end">
6.       <ion-button (click)="presentTodoModal()">
7.         <ion-icon slot="icon-only" name="add"></ion-icon>
8.       </ion-button>
9.     </ion-buttons>
10.   </ion-toolbar>
11. </ion-header>
13. <ion-content>
14.   <!-- 类别过滤器 -->
15.   <ion-segment [(ngModel)]="selectedCategory" (ionChange)="filterByCategory(selectedCategory)">
16.     <ion-segment-button *ngFor="let category of categories" [value]="category.id">
17.       {{ category.name }}
18.     </ion-segment-button>
19.   </ion-segment>
21.   <!-- 待办事项列表 -->
22.   <ion-list>
23.     <ion-item-sliding *ngFor="let todo of (getFilteredTodos() | async)">
24.       <ion-item>
25.         <ion-label>
26.           <h2 [class.completed]="todo.completed">{{ todo.title }}</h2>
27.           <p>{{ todo.description }}</p>
28.           <p>
29.             <ion-chip>
30.               <ion-label>{{ categories.find(c => c.id === todo.category)?.name }}</ion-chip>
31.             </ion-chip>
32.           </p>
33.         </ion-label>
34.         <ion-checkbox
35.           slot="start"
36.           [checked]="todo.completed"
37.           (ionChange)="toggleTodoComplete(todo.id)">
38.         </ion-checkbox>
39.       </ion-item>
40.       <ion-item-options side="end">
41.         <ion-item-option (click)="presentTodoModal(todo)" color="primary">
42.           <ion-icon slot="icon-only" name="create"></ion-icon>
43.         </ion-item-option>
44.         <ion-item-option (click)="deleteTodo(todo.id)" color="danger">
45.           <ion-icon slot="icon-only" name="trash"></ion-icon>
46.         </ion-item-option>
47.       </ion-item-options>
48.     </ion-item-sliding>
49.   </ion-list>
51.   <!-- 空状态 -->
52.   <div *ngIf="(getFilteredTodos() | async)?.length === 0" class="ion-text-center ion-padding">
53.     <ion-icon name="checkmark-circle-outline" size="large" color="medium"></ion-icon>
54.     <p>没有待办事项</p>
55.     <ion-button fill="outline" (click)="presentTodoModal()">添加第一个待办事项</ion-button>
56.   </div>
57. </ion-content>

复制代码

在页面样式中：

2. // src/app/pages/todos/todos.page.scss
3. .completed {
4.   text-decoration: line-through;
5.   color: var(--ion-color-medium);
6. }

复制代码

2. ionic generate page pages/todo-modal

复制代码

在页面组件中：

2. // src/app/pages/todo-modal/todo-modal.page.ts
3. import { Component, OnInit, Input } from '@angular/core';
4. import { ModalController } from '@ionic/angular';
5. import { Todo } from '../../models/todo.model';
7. @Component({
8.   selector: 'app-todo-modal',
9.   templateUrl: './todo-modal.page.html',
10.   styleUrls: ['./todo-modal.page.scss'],
11. })
12. export class TodoModalPage implements OnInit {
13.   @Input() todo: Todo | null = null;
15.   formData = {
16.     title: '',
17.     description: '',
18.     category: 'personal',
19.     completed: false
20.   };
22.   categories = [
23.     { id: 'work', name: '工作' },
24.     { id: 'personal', name: '个人' },
25.     { id: 'shopping', name: '购物' }
26.   ];
28.   constructor(private modalController: ModalController) { }
30.   ngOnInit() {
31.     if (this.todo) {
32.       this.formData = {
33.         title: this.todo.title,
34.         description: this.todo.description,
35.         category: this.todo.category,
36.         completed: this.todo.completed
37.       };
38.     }
39.   }
41.   dismiss() {
42.     this.modalController.dismiss();
43.   }
45.   save() {
46.     this.modalController.dismiss(this.formData);
47.   }
48. }

复制代码

在页面模板中：

2. <ion-header>
3.   <ion-toolbar>
4.     <ion-title>{{ todo ? '编辑待办事项' : '添加待办事项' }}</ion-title>
5.     <ion-buttons slot="end">
6.       <ion-button (click)="dismiss()">取消</ion-button>
7.     </ion-buttons>
8.   </ion-toolbar>
9. </ion-header>
11. <ion-content>
12.   <form (ngSubmit)="save()">
13.     <ion-list>
14.       <ion-item>
15.         <ion-label position="floating">标题</ion-label>
16.         <ion-input
17.           type="text"
18.           [(ngModel)]="formData.title"
19.           name="title"
20.           required>
21.         </ion-input>
22.       </ion-item>
23.       
24.       <ion-item>
25.         <ion-label position="floating">描述</ion-label>
26.         <ion-textarea
27.           [(ngModel)]="formData.description"
28.           name="description">
29.         </ion-textarea>
30.       </ion-item>
31.       
32.       <ion-item>
33.         <ion-label>类别</ion-label>
34.         <ion-select
35.           [(ngModel)]="formData.category"
36.           name="category">
37.           <ion-select-option *ngFor="let category of categories" [value]="category.id">
38.             {{ category.name }}
39.           </ion-select-option>
40.         </ion-select>
41.       </ion-item>
42.       
43.       <ion-item *ngIf="todo">
44.         <ion-label>已完成</ion-label>
45.         <ion-toggle
46.           [(ngModel)]="formData.completed"
47.           name="completed">
48.         </ion-toggle>
49.       </ion-item>
50.     </ion-list>
51.    
52.     <div class="ion-padding">
53.       <ion-button expand="block" type="submit" [disabled]="!formData.title">
54.         {{ todo ? '更新' : '添加' }}
55.       </ion-button>
56.     </div>
57.   </form>
58. </ion-content>

复制代码

2. ionic generate page pages/stats

复制代码

在页面组件中：

2. // src/app/pages/stats/stats.page.ts
3. import { Component, OnInit } from '@angular/core';
4. import { Observable } from 'rxjs';
5. import { map } from 'rxjs/operators';
6. import { Todo } from '../../models/todo.model';
7. import { TodoService } from '../../services/todo.service';
9. @Component({
10.   selector: 'app-stats',
11.   templateUrl: './stats.page.html',
12.   styleUrls: ['./stats.page.scss'],
13. })
14. export class StatsPage implements OnInit {
15.   todos$: Observable<Todo[]>;
16.   totalTodos$: Observable<number>;
17.   completedTodos$: Observable<number>;
18.   activeTodos$: Observable<number>;
19.   completionRate$: Observable<number>;
21.   categories = [
22.     { id: 'work', name: '工作' },
23.     { id: 'personal', name: '个人' },
24.     { id: 'shopping', name: '购物' }
25.   ];
27.   categoryStats$: Observable<{ category: string; name: string; total: number; completed: number; completionRate: number }[]>;
29.   constructor(private todoService: TodoService) { }
31.   ngOnInit() {
32.     this.todos$ = this.todoService.getTodos();
33.     this.totalTodos$ = this.todos$.pipe(map(todos => todos.length));
34.     this.completedTodos$ = this.todoService.getCompletedTodos().pipe(map(todos => todos.length));
35.     this.activeTodos$ = this.todoService.getActiveTodos().pipe(map(todos => todos.length));
36.    
37.     this.completionRate$ = this.todos$.pipe(
38.       map(todos => {
39.         if (todos.length === 0) return 0;
40.         const completed = todos.filter(todo => todo.completed).length;
41.         return Math.round((completed / todos.length) * 100);
42.       })
43.     );
45.     this.categoryStats$ = this.todos$.pipe(
46.       map(todos => {
47.         return this.categories.map(category => {
48.           const categoryTodos = todos.filter(todo => todo.category === category.id);
49.           const completed = categoryTodos.filter(todo => todo.completed).length;
50.           const completionRate = categoryTodos.length > 0
51.             ? Math.round((completed / categoryTodos.length) * 100)
52.             : 0;
53.          
54.           return {
55.             category: category.id,
56.             name: category.name,
57.             total: categoryTodos.length,
58.             completed,
59.             completionRate
60.           };
61.         });
62.       })
63.     );
64.   }
65. }

复制代码

在页面模板中：

2. <ion-header>
3.   <ion-toolbar>
4.     <ion-title>统计</ion-title>
5.   </ion-toolbar>
6. </ion-header>
8. <ion-content>
9.   <!-- 总体统计 -->
10.   <ion-card>
11.     <ion-card-header>
12.       <ion-card-title>总体统计</ion-card-title>
13.     </ion-card-header>
14.     <ion-card-content>
15.       <ion-grid>
16.         <ion-row>
17.           <ion-col>
18.             <div class="stat-card">
19.               <div class="stat-value">{{ (totalTodos$ | async) || 0 }}</div>
20.               <div class="stat-label">总计</div>
21.             </div>
22.           </ion-col>
23.           <ion-col>
24.             <div class="stat-card">
25.               <div class="stat-value">{{ (activeTodos$ | async) || 0 }}</div>
26.               <div class="stat-label">进行中</div>
27.             </div>
28.           </ion-col>
29.           <ion-col>
30.             <div class="stat-card">
31.               <div class="stat-value">{{ (completedTodos$ | async) || 0 }}</div>
32.               <div class="stat-label">已完成</div>
33.             </div>
34.           </ion-col>
35.         </ion-row>
36.       </ion-grid>
37.       
38.       <div class="ion-margin-top">
39.         <ion-label>完成率: {{ (completionRate$ | async) || 0 }}%</ion-label>
40.         <ion-progress-bar [value]="(completionRate$ | async) / 100"></ion-progress-bar>
41.       </div>
42.     </ion-card-content>
43.   </ion-card>
45.   <!-- 分类统计 -->
46.   <ion-card>
47.     <ion-card-header>
48.       <ion-card-title>分类统计</ion-card-title>
49.     </ion-card-header>
50.     <ion-card-content>
51.       <ion-list>
52.         <ion-item *ngFor="let stat of (categoryStats$ | async)">
53.           <ion-label>
54.             <h2>{{ stat.name }}</h2>
55.             <p>{{ stat.completed }} / {{ stat.total }} ({{ stat.completionRate }}%)</p>
56.           </ion-label>
57.           <ion-progress-bar
58.             slot="end"
59.             [value]="stat.completionRate / 100"
60.             style="width: 100px;">
61.           </ion-progress-bar>
62.         </ion-item>
63.       </ion-list>
64.     </ion-card-content>
65.   </ion-card>
66. </ion-content>

复制代码

在页面样式中：

2. // src/app/pages/stats/stats.page.scss
3. .stat-card {
4.   text-align: center;
5.   padding: 10px;
6.   
7.   .stat-value {
8.     font-size: 24px;
9.     font-weight: bold;
10.     color: var(--ion-color-primary);
11.   }
12.   
13.   .stat-label {
14.     font-size: 14px;
15.     color: var(--ion-color-medium);
16.   }
17. }

复制代码

修改tabs.router.module.ts以包含新页面：

2. // src/app/tabs/tabs.router.module.ts
3. import { NgModule } from '@angular/core';
4. import { RouterModule, Routes } from '@angular/router';
5. import { TabsPage } from './tabs.page';
7. const routes: Routes = [
8.   {
9.     path: 'tabs',
10.     component: TabsPage,
11.     children: [
12.       {
13.         path: 'todos',
14.         loadChildren: () => import('../pages/todos/todos.module').then(m => m.TodosPageModule)
15.       },
16.       {
17.         path: 'stats',
18.         loadChildren: () => import('../pages/stats/stats.module').then(m => m.StatsPageModule)
19.       },
20.       {
21.         path: '',
22.         redirectTo: '/tabs/todos',
23.         pathMatch: 'full'
24.       }
25.     ]
26.   },
27.   {
28.     path: '',
29.     redirectTo: '/tabs/todos',
30.     pathMatch: 'full'
31.   }
32. ];
34. @NgModule({
35.   imports: [RouterModule.forChild(routes)],
36.   exports: [RouterModule]
37. })
38. export class TabsPageRoutingModule {}

复制代码

修改tabs.page.html以更新标签：

2. <ion-tabs>
3.   <ion-tab-bar slot="bottom">
4.     <ion-tab-button tab="todos">
5.       <ion-icon name="list"></ion-icon>
6.       <ion-label>待办事项</ion-label>
7.     </ion-tab-button>
8.    
9.     <ion-tab-button tab="stats">
10.       <ion-icon name="stats-chart"></ion-icon>
11.       <ion-label>统计</ion-label>
12.     </ion-tab-button>
13.   </ion-tab-bar>
14. </ion-tabs>

复制代码

10.6 添加存储服务

为了确保数据持久化，我们需要添加Ionic Storage服务：

2. npm install @ionic/storage
3. npm install @ionic/storage-angular

复制代码

在app.module.ts中导入并配置StorageModule：

2. // src/app/app.module.ts
3. import { NgModule } from '@angular/core';
4. import { BrowserModule } from '@angular/platform-browser';
5. import { RouteReuseStrategy } from '@angular/router';
6. import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
7. import { SplashScreen } from '@ionic-native/splash-screen/ngx';
8. import { StatusBar } from '@ionic-native/status-bar/ngx';
9. import { AppComponent } from './app.component';
10. import { AppRoutingModule } from './app-routing.module';
11. import { IonicStorageModule } from '@ionic/storage';
13. @NgModule({
14.   declarations: [AppComponent],
15.   entryComponents: [],
16.   imports: [
17.     BrowserModule,
18.     IonicModule.forRoot(),
19.     AppRoutingModule,
20.     IonicStorageModule.forRoot()
21.   ],
22.   providers: [
23.     StatusBar,
24.     SplashScreen,
25.     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
26.   ],
27.   bootstrap: [AppComponent]
28. })
29. export class AppModule {}

复制代码

10.7 运行应用

现在，我们可以运行应用了：

2. ionic serve

复制代码

10.8 构建和发布

当应用开发完成后，可以按照前面章节介绍的方法构建和发布应用。

总结

通过本教程，我们学习了Ionic 4的基础知识和实战技能，从环境搭建到项目实战，涵盖了Ionic 4开发的各个方面。我们了解了Ionic 4的组件系统、导航和路由、数据管理、与后端API交互、调试和测试，以及如何构建和发布应用。最后，我们通过一个完整的待办事项应用项目，综合运用了所学知识。

Ionic 4是一个强大的跨平台移动应用开发框架，它允许开发者使用Web技术构建高性能、美观的移动应用。通过本教程的学习，你应该已经掌握了Ionic 4开发的基本技能，可以开始构建自己的移动应用了。

继续学习和实践，探索Ionic 4的更多特性和功能，你将能够开发出更加复杂和功能丰富的移动应用。祝你在Ionic 4开发的道路上取得成功！