设备信息 #

一、插件安装 #

bash

npm install @capacitor/device
npx cap sync

二、获取设备信息 #

2.1 基本设备信息 #

typescript

import { Device, DeviceInfo } from '@capacitor/device';

async function getDeviceInfo(): Promise<DeviceInfo> {
    const info = await Device.getInfo();
    
    console.log('设备名称:', info.name);
    console.log('设备型号:', info.model);
    console.log('平台:', info.platform);
    console.log('操作系统:', info.operatingSystem);
    console.log('系统版本:', info.osVersion);
    console.log('制造商:', info.manufacturer);
    console.log('是否虚拟设备:', info.isVirtual);
    console.log('内存使用:', info.memUsed);
    console.log('磁盘剩余:', info.diskFree);
    console.log('磁盘总量:', info.diskTotal);
    
    return info;
}

2.2 设备信息结构 #

typescript

interface DeviceInfo {
    // 设备名称
    name: string;
    
    // 设备型号
    model: string;
    
    // 平台类型
    platform: 'ios' | 'android' | 'web';
    
    // 操作系统
    operatingSystem: string;
    
    // 系统版本
    osVersion: string;
    
    // 制造商
    manufacturer: string;
    
    // 是否虚拟设备
    isVirtual: boolean;
    
    // 内存使用量（字节）
    memUsed?: number;
    
    // 磁盘剩余空间（字节）
    diskFree?: number;
    
    // 磁盘总空间（字节）
    diskTotal?: number;
    
    // 应用版本
    appVersion?: string;
    
    // 应用构建号
    appBuild?: string;
    
    // 应用ID
    appId?: string;
    
    // 设备UUID
    uuid?: string;
}

2.3 获取设备ID #

typescript

async function getDeviceId(): Promise<string> {
    const { identifier } = await Device.getId();
    return identifier;
}

// iOS: 返回设备UUID
// Android: 返回Android ID
// Web: 返回生成的UUID（存储在localStorage）

三、电池信息 #

3.1 获取电池状态 #

typescript

import { Device, BatteryInfo } from '@capacitor/device';

async function getBatteryInfo(): Promise<BatteryInfo> {
    const info = await Device.getBatteryInfo();
    
    console.log('电量:', info.batteryLevel);
    console.log('是否充电:', info.isCharging);
    
    return info;
}

3.2 电池信息结构 #

typescript

interface BatteryInfo {
    // 电量（0-1）
    batteryLevel?: number;
    
    // 是否正在充电
    isCharging?: boolean;
}

3.3 监听电池变化（Web） #

typescript

// Web平台使用Battery API
if ('getBattery' in navigator) {
    const battery = await (navigator as any).getBattery();
    
    battery.addEventListener('levelchange', () => {
        console.log('Battery level:', battery.level);
    });
    
    battery.addEventListener('chargingchange', () => {
        console.log('Charging:', battery.charging);
    });
}

四、语言和地区 #

4.1 获取语言代码 #

typescript

async function getLanguageCode(): Promise<string> {
    const { value } = await Device.getLanguageCode();
    return value;
}

// 返回示例: 'zh-CN', 'en-US', 'ja-JP'

4.2 获取语言标签 #

typescript

async function getLanguageTag(): Promise<string> {
    const { value } = await Device.getLanguageTag();
    return value;
}

五、设备信息封装 #

5.1 设备信息服务 #

typescript

// src/services/device.service.ts
import { Device, DeviceInfo, BatteryInfo } from '@capacitor/device';

class DeviceService {
    private deviceInfo: DeviceInfo | null = null;
    private deviceId: string | null = null;
    
    async init(): Promise<void> {
        this.deviceInfo = await Device.getInfo();
        const { identifier } = await Device.getId();
        this.deviceId = identifier;
    }
    
    getInfo(): DeviceInfo | null {
        return this.deviceInfo;
    }
    
    getId(): string | null {
        return this.deviceId;
    }
    
    async getBatteryInfo(): Promise<BatteryInfo> {
        return Device.getBatteryInfo();
    }
    
    async getLanguageCode(): Promise<string> {
        const { value } = await Device.getLanguageCode();
        return value;
    }
    
    isIOS(): boolean {
        return this.deviceInfo?.platform === 'ios';
    }
    
    isAndroid(): boolean {
        return this.deviceInfo?.platform === 'android';
    }
    
    isWeb(): boolean {
        return this.deviceInfo?.platform === 'web';
    }
    
    isVirtual(): boolean {
        return this.deviceInfo?.isVirtual ?? false;
    }
    
    getPlatform(): 'ios' | 'android' | 'web' | null {
        return this.deviceInfo?.platform ?? null;
    }
    
    getOSVersion(): string | null {
        return this.deviceInfo?.osVersion ?? null;
    }
    
    getModel(): string | null {
        return this.deviceInfo?.model ?? null;
    }
    
    getManufacturer(): string | null {
        return this.deviceInfo?.manufacturer ?? null;
    }
    
    async getStorageInfo(): Promise<{
        free: number;
        total: number;
        used: number;
        usedPercent: number;
    }> {
        if (!this.deviceInfo) {
            await this.init();
        }
        
        const free = this.deviceInfo?.diskFree ?? 0;
        const total = this.deviceInfo?.diskTotal ?? 0;
        const used = total - free;
        
        return {
            free,
            total,
            used,
            usedPercent: total > 0 ? (used / total) * 100 : 0
        };
    }
    
    formatBytes(bytes: number): string {
        if (bytes === 0) return '0 B';
        
        const k = 1024;
        const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
    
    getDeviceInfoSummary(): string {
        if (!this.deviceInfo) return 'Unknown';
        
        return [
            `${this.deviceInfo.manufacturer} ${this.deviceInfo.model}`,
            `${this.deviceInfo.operatingSystem} ${this.deviceInfo.osVersion}`,
            `Platform: ${this.deviceInfo.platform}`
        ].join('\n');
    }
}

export const deviceService = new DeviceService();

5.2 使用示例 #

typescript

// 初始化
await deviceService.init();

// 获取设备信息
const info = deviceService.getInfo();
console.log('Device:', info?.model);

// 检查平台
if (deviceService.isIOS()) {
    console.log('Running on iOS');
}

// 获取存储信息
const storage = await deviceService.getStorageInfo();
console.log(`Storage: ${deviceService.formatBytes(storage.free)} free`);

// 获取电池信息
const battery = await deviceService.getBatteryInfo();
console.log(`Battery: ${Math.round((battery.batteryLevel ?? 0) * 100)}%`);

六、设备特性检测 #

6.1 特性检测服务 #

typescript

// src/services/feature.service.ts
import { Device } from '@capacitor/device';

class FeatureService {
    async checkFeatures() {
        return {
            camera: await this.hasCamera(),
            location: await this.hasLocation(),
            bluetooth: await this.hasBluetooth(),
            nfc: await this.hasNFC(),
            biometric: await this.hasBiometric()
        };
    }
    
    private async hasCamera(): Promise<boolean> {
        try {
            const { camera } = await Device.getInfo();
            return camera !== undefined;
        } catch {
            return false;
        }
    }
    
    private async hasLocation(): Promise<boolean> {
        return 'geolocation' in navigator;
    }
    
    private async hasBluetooth(): Promise<boolean> {
        return 'bluetooth' in navigator;
    }
    
    private async hasNFC(): Promise<boolean> {
        return 'NDEFReader' in window;
    }
    
    private async hasBiometric(): Promise<boolean> {
        // 需要额外插件检测
        return false;
    }
}

export const featureService = new FeatureService();

七、完整示例 #

7.1 React组件 #

tsx

import { useState, useEffect } from 'react';
import { Device, DeviceInfo, BatteryInfo } from '@capacitor/device';

function DeviceInfoDisplay() {
    const [deviceInfo, setDeviceInfo] = useState<DeviceInfo | null>(null);
    const [batteryInfo, setBatteryInfo] = useState<BatteryInfo | null>(null);
    const [deviceId, setDeviceId] = useState<string>('');
    const [language, setLanguage] = useState<string>('');
    
    useEffect(() => {
        loadDeviceInfo();
    }, []);
    
    async function loadDeviceInfo() {
        const info = await Device.getInfo();
        setDeviceInfo(info);
        
        const { identifier } = await Device.getId();
        setDeviceId(identifier);
        
        const battery = await Device.getBatteryInfo();
        setBatteryInfo(battery);
        
        const { value } = await Device.getLanguageCode();
        setLanguage(value);
    }
    
    if (!deviceInfo) {
        return <div>Loading...</div>;
    }
    
    return (
        <div className="device-info">
            <h2>设备信息</h2>
            
            <div className="info-section">
                <h3>基本信息</h3>
                <p>名称: {deviceInfo.name}</p>
                <p>型号: {deviceInfo.model}</p>
                <p>制造商: {deviceInfo.manufacturer}</p>
                <p>平台: {deviceInfo.platform}</p>
                <p>操作系统: {deviceInfo.operatingSystem}</p>
                <p>系统版本: {deviceInfo.osVersion}</p>
                <p>虚拟设备: {deviceInfo.isVirtual ? '是' : '否'}</p>
            </div>
            
            <div className="info-section">
                <h3>设备ID</h3>
                <p>{deviceId}</p>
            </div>
            
            <div className="info-section">
                <h3>电池信息</h3>
                <p>电量: {batteryInfo?.batteryLevel ? `${Math.round(batteryInfo.batteryLevel * 100)}%` : '未知'}</p>
                <p>充电状态: {batteryInfo?.isCharging ? '充电中' : '未充电'}</p>
            </div>
            
            <div className="info-section">
                <h3>存储信息</h3>
                <p>磁盘剩余: {formatBytes(deviceInfo.diskFree || 0)}</p>
                <p>磁盘总量: {formatBytes(deviceInfo.diskTotal || 0)}</p>
            </div>
            
            <div className="info-section">
                <h3>语言设置</h3>
                <p>{language}</p>
            </div>
        </div>
    );
}

function formatBytes(bytes: number): string {
    if (bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

export default DeviceInfoDisplay;

八、平台差异处理 #

8.1 平台适配 #

typescript

import { Capacitor } from '@capacitor/core';
import { Device } from '@capacitor/device';

async function getPlatformSpecificInfo() {
    const info = await Device.getInfo();
    
    switch (info.platform) {
        case 'ios':
            return {
                store: 'App Store',
                pushService: 'APNs',
                features: ['Face ID', 'iCloud']
            };
            
        case 'android':
            return {
                store: 'Google Play',
                pushService: 'FCM',
                features: ['Fingerprint', 'Google Services']
            };
            
        case 'web':
            return {
                store: 'Web',
                pushService: 'Web Push',
                features: ['Service Worker', 'PWA']
            };
    }
}

九、总结 #

9.1 核心API #

方法	说明
Device.getInfo()	获取设备信息
Device.getId()	获取设备ID
Device.getBatteryInfo()	获取电池信息
Device.getLanguageCode()	获取语言代码
Device.getLanguageTag()	获取语言标签

设备信息 #

一、插件安装 #

二、获取设备信息 #

2.1 基本设备信息 #

2.2 设备信息结构 #

2.3 获取设备ID #

三、电池信息 #

3.1 获取电池状态 #

3.2 电池信息结构 #

3.3 监听电池变化（Web） #

四、语言和地区 #

4.1 获取语言代码 #

4.2 获取语言标签 #

五、设备信息封装 #

5.1 设备信息服务 #

5.2 使用示例 #

六、设备特性检测 #

6.1 特性检测服务 #

七、完整示例 #

7.1 React组件 #

八、平台差异处理 #

8.1 平台适配 #

九、总结 #

9.1 核心API #

9.2 下一步 #