跳至主要内容

添加 iOS App Clip 目标

本指南介绍如何手动将另一个 Flutter 渲染的 iOS App Clip 目标添加到您现有的 Flutter 项目或 添加到应用 项目中。

要查看工作示例,请参阅 GitHub 上的 App Clip 示例

步骤 1 - 打开项目

#

打开您的 iOS Xcode 项目,例如完整 Flutter 应用程序的 ios/Runner.xcworkspace

步骤 2 - 添加 App Clip 目标

#

2.1

单击项目导航器中的项目以显示项目设置。

按目标列表底部的+添加新目标。

2.2

为您的新目标选择App Clip类型。

2.3

在对话框中输入您的新目标详细信息。

为界面选择Storyboard

语言选择与原始目标相同的语言。

(换句话说,为了简化设置,不要为 Objective-C 主目标创建 Swift App Clip 目标,反之亦然。)

2.4

在以下对话框中,激活新目标的新方案。

2.5

返回项目设置,打开构建阶段选项卡。将嵌入式 App Clips拖到精简二进制文件之上。

步骤 3 - 删除不需要的文件

#

3.1

在项目导航器中,在新创建的 App Clip 组中,删除除 Info.plist<app clip target>.entitlements 之外的所有内容。

将文件移至废纸篓。

3.2

如果您不使用 SceneDelegate.swift 文件,请删除 Info.plist 中对它的引用。

打开 App Clip 组中的 Info.plist 文件。删除应用程序场景清单的整个字典条目。

步骤 4 - 共享构建配置

#

对于添加到应用的项目,此步骤不是必需的,因为添加到应用的项目具有其自定义构建配置和版本。

4.1

返回项目设置,现在选择项目条目而不是任何目标。

信息选项卡中,在配置可扩展组下,展开调试概要分析发布条目。

对于每个条目,从下拉菜单中为 App Clip 目标选择与为普通应用程序目标选择的条目相同的值。

这使您的 App Clip 目标能够访问 Flutter 所需的构建设置。

iOS 部署目标设置为至少16.0以利用 15MB 的大小限制。

4.2

在 App Clip 组的 Info.plist 文件中,设置

  • 构建版本字符串(短)$(FLUTTER_BUILD_NAME)
  • 捆绑版本$(FLUTTER_BUILD_NUMBER)

步骤 5 - 共享代码和资源

#

选项 1 - 共享所有内容

#

假设目的是在标准应用程序和 App Clip 中显示相同的 Flutter UI,则共享相同的代码和资源。

对于以下每个文件:Main.storyboardAssets.xcassetsLaunchScreen.storyboardGeneratedPluginRegistrant.mAppDelegate.swift(以及如果使用 Objective-C 的 Supporting Files/main.m),选择文件,然后在检查器的第一个选项卡中,还包括 App Clip 目标在 目标成员资格复选框组中。

选项 2 - 为 App Clip 自定义 Flutter 启动

#

在这种情况下,不要删除 步骤 3 中列出的所有内容。而是使用脚手架和 iOS 添加到应用 API 来执行 Flutter 的自定义启动。例如,显示 自定义 Flutter 路由

步骤 6 - 添加 App Clip 关联域

#

这是 App Clip 开发的标准步骤。请参阅 Apple 官方文档

6.1

打开 <app clip target>.entitlements 文件。添加一个 Associated Domains 数组类型。使用 appclips:<your bundle id> 向数组添加一行。

6.2

相同的关联域权限也需要添加到您的主应用程序中。

<app clip target>.entitlements 文件从 App Clip 组复制到主应用程序组,并将其重命名为您主目标的相同名称,例如 Runner.entitlements

打开文件并删除主应用程序权限文件中的 Parent Application Identifiers 条目(保留 App Clip 权限文件中的该条目)。

6.3

返回项目设置,选择主应用程序的目标,打开构建设置选项卡。将代码签名权限设置为为主应用程序创建的第二个权限文件的相对路径。

步骤 7 - 集成 Flutter

#

这些步骤对于添加到应用不是必需的。

7.1

对于 Swift 目标,将 Objective-C Bridging Header 构建设置设置为 Runner/Runner-Bridging-Header.h

换句话说,与主应用程序目标的构建设置相同。

7.2

现在打开构建阶段选项卡。按+号并选择新建运行脚本阶段

将该新阶段拖到依赖项阶段下方。

展开新阶段,并将此行添加到脚本内容中

bash
/bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build

取消选中基于依赖项分析

换句话说,与主应用程序目标的构建阶段相同。

这可确保在运行 App Clip 目标时编译 Flutter Dart 代码。

7.3

再次按+号并选择新建运行脚本阶段。将其保留为最后一个阶段。

这次,添加

bash
/bin/sh "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed_and_thin

取消选中基于依赖项分析

换句话说,与主应用程序目标的构建阶段相同。

这可确保您的 Flutter 应用程序和引擎嵌入到 App Clip 捆绑包中。

步骤 8 - 集成插件

#

8.1

打开 Flutter 项目或添加到应用主机项目的 Podfile

对于完整的 Flutter 应用程序,请替换以下部分

ruby
target 'Runner' do
  use_frameworks!
  use_modular_headers!

  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

ruby
use_frameworks!
use_modular_headers!
flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))

target 'Runner'
target '<name of your App Clip target>'

在文件顶部,还要取消注释 platform :ios, '12.0' 并将版本设置为两个目标的 iOS 部署目标中的最低版本。

对于添加到应用,添加到

ruby
target 'MyApp' do
  install_all_flutter_pods(flutter_application_path)
end

ruby
target 'MyApp' do
  install_all_flutter_pods(flutter_application_path)
end

target '<name of your App Clip target>'
  install_all_flutter_pods(flutter_application_path)
end

8.2

从命令行输入您的 Flutter 项目目录,然后安装 pod

cd ios
pod install

运行

#

您现在可以通过 Xcode 运行 App Clip 目标,方法是从方案下拉列表中选择 App Clip 目标,选择 iOS 16 或更高版本的设备,然后按运行。

要测试从一开始就启动 App Clip,还可以查阅 Apple 有关 测试 App Clip 的启动体验 的文档。

调试,热重载

#

不幸的是,由于网络权限限制,flutter attach 无法自动发现 App Clip 中的 Flutter 会话。

为了调试 App Clip 并使用热重载等功能,您必须在运行后从 Xcode 的控制台输出中查找 Observatory URI。

然后,您必须将其复制并粘贴回 flutter attach 命令以进行连接。

例如

flutter attach --debug-uri <copied URI>