为 iOS 设置通用链接

深度链接允许应用程序用户使用 URI 启动应用程序。此 URI 包含方案、主机和路径,并打开应用程序到特定屏幕。

通用链接是一种仅限于 iOS 设备的深度链接类型,它仅使用httphttps协议。

要设置通用链接,您需要拥有一个网站域名。作为临时解决方案,请考虑使用Firebase 托管GitHub Pages

创建或修改 Flutter 应用程序

#

编写一个可以处理传入 URL 的 Flutter 应用程序。

此示例使用go_router包来处理路由。Flutter 团队维护go_router包。它提供了一个简单的 API 来处理复杂的路由场景。

  1. 要创建一个新应用程序,请键入flutter create <app-name>

    shell
    $ flutter create deeplink_cookbook
  2. 要将go_router包作为依赖项包含进来,请运行flutter pub add

    flutter pub add go_router
  3. 要处理路由,请在main.dart文件中创建一个GoRouter对象

    import 'package:flutter/material.dart';
    import 'package:go_router/go_router.dart';
    
    void main() => runApp(MaterialApp.router(routerConfig: router));
    
    /// This handles '/' and '/details'.
    final router = GoRouter(
      routes: [
        GoRoute(
          path: '/',
          builder: (_, __) => Scaffold(
            appBar: AppBar(title: const Text('Home Screen')),
          ),
          routes: [
            GoRoute(
              path: 'details',
              builder: (_, __) => Scaffold(
                appBar: AppBar(title: const Text('Details Screen')),
              ),
            ),
          ],
        ),
      ],
    );
    

调整 iOS 构建设置

#
  1. 启动 Xcode。

  2. 打开 Flutter 项目的ios文件夹中的ios/Runner.xcworkspace文件。

添加对 go_router 的支持

#
  1. 在 Xcode 导航器中,展开Runner,然后单击Info

    Xcode info.Plist screenshot

  2. 在编辑器中,Ctrl + 单击并从上下文菜单中选择原始键和值

  3. 在编辑器中,Ctrl + 单击并从上下文菜单中选择添加行

    应该显示一个新的

  4. 更改新键属性以满足以下要求

    • 更改为FlutterDeepLinkingEnabled
    • 类型更改为Boolean
    • 更改为YES

    flutter deeplinking enabled screenshot

添加关联域

#
  1. 如有必要,启动 Xcode。

  2. 单击顶层的Runner

  3. 在编辑器中,点击 **Runner** 目标。

  4. 点击 **签名与功能**。

  5. 要添加新域名,请在 **签名与功能** 下点击 **+ 功能**。

  6. 点击 **关联域名**。

    Xcode associated domains screenshot

  7. 在 **关联域名** 部分,点击 **+**。

  8. 输入 applinks:<web 域名>。将 <web 域名> 替换为您的域名。

    Xcode add associated domains screenshot

  1. 在您喜欢的 IDE 中打开 ios/Runner/Runner.entitlements XML 文件。

  2. <dict> 标签内添加一个关联域名。

    xml
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
    <dict>
      <key>com.apple.developer.associated-domains</key>
      <array>
        <string>applinks:example.com</string>
      </array>
    </dict>
    </plist>
  3. 保存 ios/Runner/Runner.entitlements 文件。

要检查您创建的关联域名是否可用,请执行以下步骤。

  1. 如有必要,启动 Xcode。

  2. 单击顶层的Runner

  3. 在编辑器中,点击 **Runner** 目标。

  4. 点击 **签名与功能**。域名应该出现在 **关联域名** 部分。

    Xcode add associated domains screenshot

您已完成为深层链接配置应用程序。

将您的应用程序与您的网页域关联

#

您需要在 Web 域名中托管一个 apple-app-site-association 文件。此文件告诉移动浏览器打开哪个 iOS 应用程序而不是浏览器。要创建该文件,请在上一节中找到您创建的 Flutter 应用程序的 appID

找到 appID 的组成部分

#

Apple 将 appID 格式化为 <团队 ID>.<捆绑 ID>

  • 在 Xcode 项目中找到捆绑 ID。
  • 开发者帐户 中找到团队 ID。

**例如:** 给定团队 ID 为 S8QB4VV633 且捆绑 ID 为 com.example.deeplinkCookbook,您将输入 appID 条目 S8QB4VV633.com.example.deeplinkCookbook

创建并托管 apple-app-site-association JSON 文件

#

此文件使用 JSON 格式。保存此文件时,请勿包含 .json 文件扩展名。根据 Apple 的文档,此文件应类似于以下内容

json
{
  "applinks": {
    "apps": [],
    "details": [
      {
        "appIDs": [
          "S8QB4VV633.com.example.deeplinkCookbook"
        ],
        "paths": [
          "*"
        ],
        "components": [
          {
            "/": "/*"
          }
        ]
      }
    ]
  },
  "webcredentials": {
    "apps": [
      "S8QB4VV633.com.example.deeplinkCookbook"
    ]
  }
}
  1. appIDs 数组中的一个值设置为 <团队 ID>.<捆绑 ID>

  2. paths 数组设置为 ["*"]paths 数组指定允许的通用链接。使用星号 * 将每个路径重定向到 Flutter 应用程序。如果需要,请将 paths 数组值更改为更适合您的应用程序的设置。

  3. 将文件托管在类似以下结构的 URL 上。

    <webdomain>/.well-known/apple-app-site-association

  4. 验证您的浏览器是否可以访问此文件。

#

使用物理 iOS 设备或模拟器测试通用链接。

  1. 在测试之前,将 Flutter 应用程序安装到 iOS 设备或模拟器上,在所需设备上使用 flutter run

    Simulator screenshot

    完成后,Flutter 应用程序将显示在 iOS 设备或模拟器的主屏幕上。

  2. 如果您使用模拟器进行测试,请使用 Xcode CLI

    xcrun simctl openurl booted https://<web domain>/details
  3. 如果您使用物理 iOS 设备进行测试

    1. 启动 **备忘录** 应用程序。
    2. 在 **备忘录** 应用程序中输入 URL。
    3. 点击生成的链接。

    如果成功,Flutter 应用程序将启动并显示其详细信息屏幕。

    Deeplinked Simulator screenshot

查找源代码

#

您可以在 GitHub 仓库中找到 deeplink_cookbook 食谱的源代码。