生命周期 #

一、生命周期概述 #

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