生命周期 #
一、生命周期概述 #
1.1 生命周期类型 #
Capacitor应用包含多种生命周期:
| 生命周期 | 触发时机 | 用途 |
|---|---|---|
| 应用生命周期 | 应用启动、切换、关闭 | 初始化、清理资源 |
| 插件生命周期 | 插件加载、卸载 | 插件初始化、资源释放 |
| 页面生命周期 | 页面加载、显示、隐藏 | 页面状态管理 |
| 网络生命周期 | 网络状态变化 | 网络状态响应 |
1.2 生命周期流程 #
text
┌─────────────────────────────────────────────────────────────┐
│ Application Lifecycle │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Launch │───▶│ Resume │◀──▶│ Pause │───▶│ Exit │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │ │ │ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ Init │ │ Active │ │Inactive │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
二、应用生命周期 #
2.1 应用状态 #
typescript
// 应用状态枚举
enum AppState {
Active = 'active', // 前台活跃
Inactive = 'inactive', // 即将进入后台
Background = 'background' // 在后台
}
2.2 App插件使用 #
typescript
import { App, AppState } from '@capacitor/app';
// 监听应用状态变化
App.addListener('appStateChange', ({ isActive }) => {
console.log('App state changed. Is active:', isActive);
if (isActive) {
// 应用进入前台
onAppResume();
} else {
// 应用进入后台
onAppPause();
}
});
// 监听应用启动
App.addListener('appLaunch', (data) => {
console.log('App launched with data:', data);
});
// 监听应用退出(Android)
App.addListener('backButton', ({ canGoBack }) => {
if (canGoBack) {
window.history.back();
} else {
App.exitApp();
}
});
2.3 完整生命周期管理 #
typescript
// src/lifecycle/app-lifecycle.ts
import { App, AppState } from '@capacitor/app';
import { Capacitor } from '@capacitor/core';
class AppLifecycle {
private static instance: AppLifecycle;
private state: AppState = AppState.Active;
private listeners: Set<() => void> = new Set();
private constructor() {
this.setupListeners();
}
static getInstance(): AppLifecycle {
if (!AppLifecycle.instance) {
AppLifecycle.instance = new AppLifecycle();
}
return AppLifecycle.instance;
}
private setupListeners() {
if (!Capacitor.isNativePlatform()) {
return;
}
// 应用状态变化
App.addListener('appStateChange', ({ isActive }) => {
this.state = isActive ? AppState.Active : AppState.Background;
this.notifyListeners();
});
// 返回按钮(Android)
App.addListener('backButton', this.handleBackButton.bind(this));
}
private handleBackButton({ canGoBack }: { canGoBack: boolean }) {
if (canGoBack) {
window.history.back();
} else {
// 显示退出确认
this.showExitConfirmation();
}
}
private showExitConfirmation() {
// 实现退出确认逻辑
if (confirm('确定要退出应用吗?')) {
App.exitApp();
}
}
onStateChange(callback: () => void): () => void {
this.listeners.add(callback);
return () => this.listeners.delete(callback);
}
private notifyListeners() {
this.listeners.forEach(callback => callback());
}
getState(): AppState {
return this.state;
}
isForeground(): boolean {
return this.state === AppState.Active;
}
}
export const appLifecycle = AppLifecycle.getInstance();
2.4 iOS生命周期 #
swift
// ios/App/App/AppDelegate.swift
import UIKit
import Capacitor
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
// 应用启动完成
func application(_ application: UIApplication,
didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// 初始化
setupApplication()
return true
}
// 应用即将进入前台
func applicationWillEnterForeground(_ application: UIApplication) {
NotificationCenter.default.post(name: .appWillEnterForeground, object: nil)
}
// 应用已进入前台
func applicationDidBecomeActive(_ application: UIApplication) {
NotificationCenter.default.post(name: .appDidBecomeActive, object: nil)
}
// 应用即将进入后台
func applicationWillResignActive(_ application: UIApplication) {
NotificationCenter.default.post(name: .appWillResignActive, object: nil)
}
// 应用已进入后台
func applicationDidEnterBackground(_ application: UIApplication) {
NotificationCenter.default.post(name: .appDidEnterBackground, object: nil)
}
// 应用即将终止
func applicationWillTerminate(_ application: UIApplication) {
// 清理资源
cleanupResources()
}
}
2.5 Android生命周期 #
java
// android/app/src/main/java/com/example/app/MainActivity.java
package com.example.app;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;
public class MainActivity extends BridgeActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 应用创建
onAppCreate();
}
@Override
protected void onStart() {
super.onStart();
// 应用启动
}
@Override
protected void onResume() {
super.onResume();
// 应用恢复
}
@Override
protected void onPause() {
super.onPause();
// 应用暂停
}
@Override
protected void onStop() {
super.onStop();
// 应用停止
}
@Override
protected void onDestroy() {
// 应用销毁
cleanupResources();
super.onDestroy();
}
}
三、插件生命周期 #
3.1 插件生命周期方法 #
typescript
// 插件生命周期接口
interface PluginLifecycle {
// 插件加载
load?(): void;
// 插件卸载
unload?(): void;
// 应用恢复
handleResume?(): void;
// 应用暂停
handlePause?(): void;
// 应用销毁
handleDestroy?(): void;
}
3.2 iOS插件生命周期 #
swift
// iOS插件基类
@objc(CAPPlugin)
open class CAPPlugin: NSObject {
var bridge: CAPBridgeProtocol?
// 插件加载
open func load() {
// 子类实现
}
// 插件卸载
open func unload() {
// 清理资源
}
// 应用恢复
@objc open func handleResume() {
// 子类实现
}
// 应用暂停
@objc open func handlePause() {
// 子类实现
}
// 应用销毁
@objc open func handleDestroy() {
// 清理资源
}
}
// 自定义插件实现
class MyPlugin: CAPPlugin {
override func load() {
print("MyPlugin loaded")
// 初始化资源
}
override func handleResume() {
print("App resumed")
// 恢复操作
}
override func handlePause() {
print("App paused")
// 暂停操作,保存状态
}
override func unload() {
print("MyPlugin unloaded")
// 清理资源
}
}
3.3 Android插件生命周期 #
java
// Android插件基类
public class Plugin {
protected Bridge bridge;
// 插件加载
public void load() {
// 子类实现
}
// 插件卸载
public void unload() {
// 清理资源
}
// 应用恢复
public void handleResume() {
// 子类实现
}
// 应用暂停
public void handlePause() {
// 子类实现
}
// 应用销毁
public void handleDestroy() {
// 清理资源
}
}
// 自定义插件实现
public class MyPlugin extends Plugin {
@Override
public void load() {
Log.d("MyPlugin", "Plugin loaded");
// 初始化资源
}
@Override
public void handleResume() {
Log.d("MyPlugin", "App resumed");
// 恢复操作
}
@Override
public void handlePause() {
Log.d("MyPlugin", "App paused");
// 暂停操作
}
@Override
public void unload() {
Log.d("MyPlugin", "Plugin unloaded");
// 清理资源
}
}
四、页面生命周期 #
4.1 页面可见性 #
typescript
// 页面可见性API
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
// 页面可见
onPageVisible();
} else {
// 页面隐藏
onPageHidden();
}
});
4.2 React组件生命周期 #
tsx
import { useEffect, useState } from 'react';
import { App, AppState } from '@capacitor/app';
function useAppLifecycle() {
const [appState, setAppState] = useState<AppState>(AppState.Active);
useEffect(() => {
// 监听应用状态
const listener = App.addListener('appStateChange', ({ isActive }) => {
setAppState(isActive ? AppState.Active : AppState.Background);
});
return () => {
listener.then(l => l.remove());
};
}, []);
return appState;
}
// 使用示例
function MyComponent() {
const appState = useAppLifecycle();
useEffect(() => {
if (appState === AppState.Active) {
// 应用进入前台
refreshData();
} else {
// 应用进入后台
saveState();
}
}, [appState]);
return <div>App State: {appState}</div>;
}
4.3 Vue组合式API #
typescript
// composables/useAppLifecycle.ts
import { ref, onMounted, onUnmounted } from 'vue';
import { App, AppState } from '@capacitor/app';
import { Capacitor } from '@capacitor/core';
export function useAppLifecycle() {
const appState = ref<AppState>(AppState.Active);
let listener: { remove: () => void } | null = null;
onMounted(async () => {
if (!Capacitor.isNativePlatform()) return;
listener = await App.addListener('appStateChange', ({ isActive }) => {
appState.value = isActive ? AppState.Active : AppState.Background;
});
});
onUnmounted(() => {
listener?.remove();
});
return {
appState,
isForeground: () => appState.value === AppState.Active
};
}
五、网络生命周期 #
5.1 网络状态监听 #
typescript
import { Network, ConnectionStatus } from '@capacitor/network';
// 获取当前网络状态
const status = await Network.getStatus();
console.log('Connected:', status.connected);
console.log('Connection type:', status.connectionType);
// 监听网络状态变化
Network.addListener('networkStatusChange', (status: ConnectionStatus) => {
if (status.connected) {
onNetworkConnected();
} else {
onNetworkDisconnected();
}
});
5.2 网络状态管理 #
typescript
// src/lifecycle/network-lifecycle.ts
import { Network, ConnectionStatus } from '@capacitor/network';
import { Capacitor } from '@capacitor/core';
type NetworkCallback = (status: ConnectionStatus) => void;
class NetworkLifecycle {
private static instance: NetworkLifecycle;
private status: ConnectionStatus | null = null;
private callbacks: Set<NetworkCallback> = new Set();
private listener: { remove: () => void } | null = null;
private constructor() {
this.init();
}
static getInstance(): NetworkLifecycle {
if (!NetworkLifecycle.instance) {
NetworkLifecycle.instance = new NetworkLifecycle();
}
return NetworkLifecycle.instance;
}
private async init() {
// 获取初始状态
this.status = await Network.getStatus();
// 监听变化
this.listener = await Network.addListener('networkStatusChange', (status) => {
this.status = status;
this.notifyCallbacks(status);
});
}
onStatusChange(callback: NetworkCallback): () => void {
this.callbacks.add(callback);
// 立即通知当前状态
if (this.status) {
callback(this.status);
}
return () => this.callbacks.delete(callback);
}
private notifyCallbacks(status: ConnectionStatus) {
this.callbacks.forEach(callback => callback(status));
}
getStatus(): ConnectionStatus | null {
return this.status;
}
isConnected(): boolean {
return this.status?.connected ?? false;
}
destroy() {
this.listener?.remove();
this.callbacks.clear();
}
}
export const networkLifecycle = NetworkLifecycle.getInstance();
六、存储生命周期 #
6.1 数据持久化 #
typescript
import { Preferences } from '@capacitor/preferences';
class StorageLifecycle {
private static readonly KEY_PREFIX = 'app_';
// 应用暂停时保存数据
async onPause() {
await this.saveState();
}
// 应用恢复时加载数据
async onResume() {
await this.loadState();
}
private async saveState() {
const state = {
lastActiveTime: Date.now(),
// ... 其他状态
};
await Preferences.set({
key: `${StorageLifecycle.KEY_PREFIX}state`,
value: JSON.stringify(state)
});
}
private async loadState() {
const { value } = await Preferences.get({
key: `${StorageLifecycle.KEY_PREFIX}state`
});
if (value) {
const state = JSON.parse(value);
// 恢复状态
}
}
}
6.2 自动保存 #
typescript
// 自动保存管理器
class AutoSaveManager {
private saveInterval: number | null = null;
private pendingData: Map<string, any> = new Map();
private saveDelay = 5000; // 5秒
set(key: string, value: any) {
this.pendingData.set(key, value);
this.scheduleSave();
}
private scheduleSave() {
if (this.saveInterval) return;
this.saveInterval = window.setTimeout(() => {
this.flush();
this.saveInterval = null;
}, this.saveDelay);
}
private async flush() {
const data = Object.fromEntries(this.pendingData);
this.pendingData.clear();
await Preferences.set({
key: 'autosave',
value: JSON.stringify(data)
});
}
// 应用暂停时立即保存
async onPause() {
if (this.saveInterval) {
clearTimeout(this.saveInterval);
this.saveInterval = null;
}
await this.flush();
}
}
七、后台任务 #
7.1 后台执行 #
typescript
import { App } from '@capacitor/app';
class BackgroundTask {
private tasks: Map<string, () => Promise<void>> = new Map();
// 注册后台任务
register(name: string, task: () => Promise<void>) {
this.tasks.set(name, task);
}
// 应用进入后台时执行
async onBackground() {
for (const [name, task] of this.tasks) {
try {
await task();
} catch (error) {
console.error(`Background task ${name} failed:`, error);
}
}
}
}
// 使用示例
const backgroundTask = new BackgroundTask();
backgroundTask.register('sync-data', async () => {
// 同步数据到服务器
await syncToServer();
});
backgroundTask.register('save-cache', async () => {
// 保存缓存
await saveCache();
});
// 监听应用状态
App.addListener('appStateChange', async ({ isActive }) => {
if (!isActive) {
await backgroundTask.onBackground();
}
});
7.2 iOS后台任务 #
swift
// iOS后台任务
import BackgroundTasks
class BackgroundTaskManager {
static let shared = BackgroundTaskManager()
func registerBackgroundTasks() {
// 注册后台任务
BGTaskScheduler.shared.register(
forTaskWithIdentifier: "com.example.myapp.refresh",
using: nil
) { task in
self.handleAppRefresh(task: task as! BGAppRefreshTask)
}
}
func scheduleAppRefresh() {
let request = BGAppRefreshTaskRequest(identifier: "com.example.myapp.refresh")
request.earliestBeginDate = Date(timeIntervalSinceNow: 3600) // 1小时后
do {
try BGTaskScheduler.shared.submit(request)
} catch {
print("Could not schedule app refresh: \(error)")
}
}
private func handleAppRefresh(task: BGAppRefreshTask) {
// 执行后台任务
task.expirationHandler = {
task.setTaskCompleted(success: false)
}
// 执行同步等操作
syncData { success in
task.setTaskCompleted(success: success)
}
}
}
7.3 Android后台任务 #
java
// Android后台任务
import android.content.Context;
import androidx.work.Worker;
import androidx.work.WorkManager;
import androidx.work.PeriodicWorkRequest;
import java.util.concurrent.TimeUnit;
public class SyncWorker extends Worker {
public SyncWorker(Context context, WorkerParameters params) {
super(context, params);
}
@Override
public Result doWork() {
try {
// 执行后台任务
syncData();
return Result.success();
} catch (Exception e) {
return Result.failure();
}
}
}
// 调度后台任务
public void scheduleBackgroundSync() {
PeriodicWorkRequest syncWork = new PeriodicWorkRequest.Builder(
SyncWorker.class,
1, // 每1小时
TimeUnit.HOURS
).build();
WorkManager.getInstance(context).enqueueUniquePeriodicWork(
"sync_work",
ExistingPeriodicWorkPolicy.KEEP,
syncWork
);
}
八、生命周期最佳实践 #
8.1 资源管理 #
typescript
class ResourceManager {
private resources: Set<() => void> = new Set();
// 注册需要清理的资源
register(cleanup: () => void): () => void {
this.resources.add(cleanup);
return () => this.resources.delete(cleanup);
}
// 清理所有资源
cleanup() {
this.resources.forEach(cleanup => cleanup());
this.resources.clear();
}
}
// 使用示例
const resourceManager = new ResourceManager();
// 注册清理函数
const unregister = resourceManager.register(() => {
// 清理WebSocket连接
ws.close();
});
// 应用销毁时清理
App.addListener('appStateChange', async ({ isActive }) => {
if (!isActive) {
// 可以选择立即清理或延迟清理
}
});
8.2 状态恢复 #
typescript
// 状态恢复管理
class StateRecovery {
private static readonly KEY = 'app_recovery_state';
// 保存状态
async saveState(state: any) {
await Preferences.set({
key: StateRecovery.KEY,
value: JSON.stringify({
state,
timestamp: Date.now()
})
});
}
// 恢复状态
async recoverState(): Promise<any | null> {
const { value } = await Preferences.get({
key: StateRecovery.KEY
});
if (!value) return null;
const { state, timestamp } = JSON.parse(value);
// 检查是否过期(例如24小时)
if (Date.now() - timestamp > 24 * 60 * 60 * 1000) {
await this.clearState();
return null;
}
return state;
}
// 清除状态
async clearState() {
await Preferences.remove({ key: StateRecovery.KEY });
}
}
8.3 完整生命周期管理器 #
typescript
// src/lifecycle/lifecycle-manager.ts
import { App, AppState } from '@capacitor/app';
import { Network } from '@capacitor/network';
import { Capacitor } from '@capacitor/core';
type LifecycleCallback = () => void | Promise<void>;
interface LifecycleCallbacks {
onResume?: LifecycleCallback;
onPause?: LifecycleCallback;
onDestroy?: LifecycleCallback;
onNetworkChange?: (connected: boolean) => void;
}
class LifecycleManager {
private static instance: LifecycleManager;
private callbacks: LifecycleCallbacks = {};
private initialized = false;
private constructor() {}
static getInstance(): LifecycleManager {
if (!LifecycleManager.instance) {
LifecycleManager.instance = new LifecycleManager();
}
return LifecycleManager.instance;
}
init(callbacks: LifecycleCallbacks) {
if (this.initialized) return;
this.callbacks = callbacks;
if (Capacitor.isNativePlatform()) {
this.setupNativeListeners();
}
this.setupWebListeners();
this.initialized = true;
}
private async setupNativeListeners() {
// 应用状态
await App.addListener('appStateChange', async ({ isActive }) => {
if (isActive) {
await this.callbacks.onResume?.();
} else {
await this.callbacks.onPause?.();
}
});
// 网络状态
await Network.addListener('networkStatusChange', (status) => {
this.callbacks.onNetworkChange?.(status.connected);
});
}
private setupWebListeners() {
// 页面可见性
document.addEventListener('visibilitychange', async () => {
if (document.visibilityState === 'visible') {
await this.callbacks.onResume?.();
} else {
await this.callbacks.onPause?.();
}
});
// 页面卸载
window.addEventListener('beforeunload', async () => {
await this.callbacks.onDestroy?.();
});
}
}
export const lifecycleManager = LifecycleManager.getInstance();
九、总结 #
9.1 生命周期要点 #
| 生命周期 | 触发时机 | 主要用途 |
|---|---|---|
| 应用启动 | 应用首次打开 | 初始化 |
| 应用恢复 | 应用进入前台 | 刷新数据 |
| 应用暂停 | 应用进入后台 | 保存状态 |
| 应用销毁 | 应用被关闭 | 清理资源 |
9.2 最佳实践 #
- 在暂停时保存关键数据
- 在恢复时刷新过期数据
- 合理管理资源释放
- 避免在后台执行耗时操作
9.3 下一步 #
了解生命周期后,让我们学习 插件概述!
最后更新:2026-03-28