跳过主要内容
开发 移动 更新

How Capacitor Handles Platform Differences

了解如何使用单一代码库在移动应用开发中有效管理 iOS 和 Android 平台的差异。

马丁·多纳迪厄

马丁·多纳迪厄

内容营销人员

Capacitor 如何处理平台差异

Capacitor 帮助开发者使用相同的代码库为 iOS 和 Android 构建应用程序,同时解决平台特定差异的问题。它简化了原生功能的整合、确保了遵守平台指南并优化了性能。关键亮点:

  • 平台检测: 使用 Capacitor.getPlatform() 来应用平台特定的 code。
  • 内置插件: 对于像摄像头、存储和地理位置这样的功能的统一 API。
  • 自定义插件: 为满足独特需求添加本地 code。
  • UI 调整: 遵循 iOS 设计规则(例如, SF 符号, 圆角按钮)和 Android 设计规则(例如, Material 图标, 左对齐按钮)。
  • 配置: 在 capacitor.config.json 中调整两端平台的设置。
  • 实时更新 Capgo立即部署更新,避免应用商店延迟,实现 24 小时内 95% 用户采纳率。

快速比较

功能iOS安卓
导航底部导航栏,左侧返回按钮顶部导航抽屉,底部导航
字体San Francisco 字体Roboto 字体
插件(例如,摄像头)AVFoundation摄像头2 API
构建输出.ipa 文件.aab.apk 文件

Capacitor 将 web 和本机应用程序开发之间的差距填补,使其更容易创建跨平台应用程序,同时保持平台特定的优化。

跨平台开发:探索CapacitorJS与…

如何 Capacitor 处理平台 Code

Capacitor 框架文档网站

Capacitor 提供了管理平台特定 code 的工具,允许开发者使用单一 API 创建针对 iOS 和 Android 的定制体验。

在 Code 中检测平台

使用 Capacitor 的内置平台 API,检测当前平台变得简单。该方法识别正在运行的环境,使其容易应用条件逻辑: Capacitor.getPlatform() 这种方法尤其适用于像

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

const platform = Capacitor.getPlatform();
if (platform === 'ios') {
  // Code specific to iOS
} else if (platform === 'android') {
  // Code specific to Android
}

生物识别验证 ,iOS可能使用面部识别 ,而 Android依赖于指纹识别验证。除了平台检测外,__CAPGO_KEEP_0__ 的内置插件还简化了原生集成。 and Android relies on Fingerprint Authentication. Along with platform detection, Capacitor’s built-in plugins simplify native integration.

内置的 __CAPGO_KEEP_0__ 平台功能

Capacitor带有一个集成的插件集,处理平台差异的差异。这些插件管理本机实现的复杂性,同时提供一致的JavaScript接口:

插件iOS实现Android实现
相机AVFoundation相机2 API
存储用户偏好设置SharedPreferences
位置CoreLocation位置管理器

每个插件都自动使用平台的本机 API,确保平滑的性能和功能。

构建自定义平台插件

对于无法满足您需求的内置插件,您可以创建自定义插件来访问特定的本机 API。以下是如何做到的:

  1. 定义插件

    @Plugin({
      name: 'CustomFeature',
      platforms: ['ios', 'android']
    })
  2. 添加本机Code

    @PluginMethod()
    async customFunction(): Promise<void> {
      if (Capacitor.getPlatform() === 'ios') {
        // Add iOS-specific code
      } else {
        // Add Android-specific code
      }
    }
  3. 实现平台处理器

    • iOS(Swift):

      @objc func customFunction(_ call: CAPPluginCall) {
        // Add native iOS functionality
      }
    • Android(Kotlin):

      @PluginMethod
      fun customFunction(call: PluginCall) {
        // Add native Android functionality
      }

自定义插件允许访问本机功能,同时保持API一致和易于使用。这确保了性能和功能,而不会复杂化开发过程。

平台特定 UI 指南

iOS 与 Android 设计规则

在设计 iOS 和 Android 时,遵循本地设计模式非常重要。每个平台的用户对导航、字体、按钮、标题和图标等方面有不同的期望。以下是它们的比较:

设计元素iOSAndroid
导航底部导航条,左侧的返回按钮顶部导航抽屉,底部导航
字体San Francisco 字体Roboto 字体
按钮圆角矩形,居中文本Material Design buttons, left-aligned text
HeadersLarge titles, centeredApp bars, left-aligned
IconsSF SymbolsMaterial Icons

Cross-Platform Design Standards

在两种平台中保持一致的品牌形象至关重要。以下是如何确保一致性:

const sharedStyles = {
  primaryColor: '#007AFF', // iOS blue
  androidPrimaryColor: '#6200EE', // Material Design purple
  borderRadius: Capacitor.getPlatform() === 'ios' ? '10px' : '4px'
};

:root {
  --app-header-height: var(--platform-header-height, 56px);
  --app-safe-area-top: var(--platform-safe-area-top, 0px);
}

使用 Capacitor, 可以将平台特定的 UI 组件集成到应用中,同时保持功能的一致性。它还可以帮助管理系统级设置,如暗色模式和动态类型。要完成此过程,请确保您的平台特定构建设置与这些指南相符。

Platform Setup and Config

在管理您的平台 code 之后,正确的配置对于确保应用在 iOS 和 Android 平台上运行顺畅至关重要。

平台设置 capacitor.config.json

使用 capacitor.config.json 文件来定义关键的平台特定设置:

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "ios": {
    "contentInset": "always",
    "backgroundColor": "#ffffff",
    "scheme": "myapp",
    "preferredContentMode": "mobile"
  },
  "android": {
    "backgroundColor": "#FFFFFF",
    "allowMixedContent": true,
    "captureInput": true,
    "webContentsDebuggingEnabled": true
  }
}

以下是需要考虑的配置选项:

选项iOSAndroid
深度链接scheme 属性androidScheme 属性
状态栏statusBar.stylestatusBar.backgroundColor
键盘keyboard.resizekeyboard.resize, keyboard.style
启动屏幕splashScreen.launchShowDurationsplashScreen.layoutName

一旦运行时设置就绪,请调整构建设置以针对每个平台提高性能。

平台特定构建设置

优化 iOS 和 Android 应用程序的构建设置以提高性能。

对于 iOS,更新 Info.plist 文件:

<key>NSCameraUsageDescription</key>
<string>Required for document scanning</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Required for store locator</string>

对于 Android,修改 android/app/build.gradle:

android {
    defaultConfig {
        minSdkVersion 21
        targetSdkVersion 33
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt')
        }
    }
}

以下是构建的关键考虑因素:

比例iOSAndroid
权限添加条目 Info.plist在这里定义 AndroidManifest.xml
图标尺寸从 20px 到 1024px密度从 mdpi 到 xxxhdpi
启动屏幕基于 Storyboard基于布局 XML
构建输出.ipa 文件.aab.apk 文件

更新应用程序 Capgo

Capgo 实时更新控制台界面

保持 Capacitor 应用程序 同时为 iOS 和 Android 设备提供高效的应用程序更新至关重要。 Capgo 提供了一个与两者平台指南一致的实时更新系统。

Capgo 功能

功能描述平台优势
实时更新立即部署,无需等待应用商店审查确保 iOS 和 Android 平台上的统一体验
端到端加密安全地传递更新满足两种平台的安全要求
频道系统针对特定用户群支持 beta 测试和阶段性发布
部分更新仅下载修改的内容节省带宽并加速更新

Capgo 已成功传递 2350 万次更新,24 小时内实现 95% 的活跃用户更新率 [1]这些功能使其成为 更新管理 在所有平台上实现更平滑和高效的体验。

Capgo 平台管理

Capgo 的频道系统使更新管理更容易。开发人员可以使用 beta 用户测试 iOS 特有的功能,分阶段发布 Android 更新,并顺畅地跟踪性能指标。

该平台遵守了苹果和谷歌的无线更新要求 [1].

目前,750 个生产应用程序依赖于 Capgo,保持了 82% 的全球更新成功率 [1]它的 CI/CD 集成简化了部署,而回滚功能允许开发人员在出现问题时立即回滚到之前的版本。实时分析提供了更新性能的见解,并有助于维持应用程序的稳定性。

结论

平台管理利益

在 Capacitor 中有效地管理平台差异会增强跨平台开发。其内置的平台检测和配置工具允许开发人员为 iOS 和 Android 创建平滑的体验,同时尊重每个平台的独特设计标准和功能。

通过专注于正确的平台管理,开发团队可以更快地发布更新并提高用户满意度。像 Capgo 这样的工具已经证明了如何通过一致的平台处理来实现更高的更新成功率和更好的用户体验 [1].

“We practice agile development and @Capgo is mission-critical in delivering continuously to our users!”
– Rodrigo Mantica [1]

这些见解可以指导您进行实际改进。

下一步

为了最大限度地实现这些好处,请考虑实施以下策略:

行动项好处
启用平台检测自动调整到 iOS 和 Android 需要
实施实时更新避免应用商店延迟的紧急修复
设置分析跟踪每个平台的性能指标
启用回滚支持快速解决平台特定问题

对于希望提高工作流程效率的开发者,工具如 Capgo 可以简化流程。该工具提供了端到端加密和 CI/CD 集成等功能,帮助团队保持一致性,同时高效地部署更新。

成功的平台管理取决于使用正确的工具并遵循平台特定指南。通过关注强大的检测和管理策略,开发者可以确保应用程序在 iOS 和 Android 平台上顺畅运行。

Capacitor实时更新

当web层面的bug出现时,通过Capgo直接修复,而不是等待APP商店的审批,用户在后台接收更新,而原生代码仍然在正常的审批流程中。

立即开始

博客最新文章

Capgo为您提供了创建真正专业的移动应用所需的最佳见解。