如何在Flutter中实现类似WhatsApp的链接跳转至应用指定页面功能

一、基础说明 #

你需要的点击HTTPS链接直接唤起APP、跳转指定页面的能力，在安卓端叫App Link，iOS端叫Universal Link，配置完成后效果和WhatsApp的wa.me链接完全一致，不会弹出应用选择框，可直接唤醒对应应用。

二、原生端域名关联配置 #

要实现HTTPS链接直开APP，首先需要完成域名和应用的绑定校验：

2.1 安卓端配置 #

• 在你的专属域名根目录下，放置公开可访问的/.well-known/assetlinks.json文件，文件内容填写应用包名、签名SHA256信息，用于系统校验域名归属
• 在项目AndroidManifest.xml的启动Activity节点下添加如下intent-filter：

<intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- 替换为你的专属域名 -->
    <data android:scheme="https" android:host="your.app.domain" />
</intent-filter>

注意：android:autoVerify="true"必须填写，assetlinks.json需支持公网无认证访问，不能设置重定向，响应头Content-Type为application/json

2.2 iOS端配置 #

• 在你的专属域名根目录下，放置公开可访问的/.well-known/apple-app-site-association文件（不需要.json后缀），内容填写你的苹果开发者Team ID、应用Bundle ID以及可匹配的路径规则
• 打开Xcode，在项目Target的Signing & Capabilities中添加Associated Domains能力，新增条目格式为applinks:your.app.domain，替换为你的专属域名即可

注意：apple-app-site-association需支持公网无认证访问，不能设置重定向，响应头Content-Type为application/json

三、Flutter侧链接解析与跳转逻辑 #

推荐使用Flutter官方维护的go_router包，可同时实现路由管理和深链自动匹配，无需额外监听：

• 首先在pubspec.yaml中添加依赖：go_router: ^最新版本号
• 配置路由规则，直接绑定链接路径和应用页面：

final GoRouter router = GoRouter(
  initialLocation: '/',
  routes: [
    // 首页
    GoRoute(
      path: '/',
      builder: (context, state) => const HomePage(),
    ),
    // 匹配https://your.app.domain/user/123 这类带路径参数的链接
    GoRoute(
      path: '/user/:userId',
      builder: (context, state) {
        final userId = state.pathParameters['userId']!;
        return UserDetailPage(userId: userId);
      },
    ),
    // 匹配https://your.app.domain/chat?roomId=456 这类带查询参数的链接
    GoRoute(
      path: '/chat',
      builder: (context, state) {
        final roomId = state.uri.queryParameters['roomId']!;
        return ChatRoomPage(roomId: roomId);
      },
    ),
  ],
);

• 将配置好的router赋值给MaterialApp.router的routerConfig参数，框架会自动监听外部唤起的链接，自动匹配对应路由跳转

如果你不需要全量路由管理，也可以使用uni_links包手动监听链接：

• 在pubspec.yaml中添加依赖：uni_links: ^最新版本号
• 应用启动后初始化监听逻辑：

import 'package:uni_links/uni_links.dart';
import 'package:flutter/services.dart';

void initDeepLinkListen() async {
  // 处理应用冷启动时的初始唤起链接
  try {
    final initialLink = await getInitialLink();
    if (initialLink != null) {
      _parseLink(Uri.parse(initialLink));
    }
  } on PlatformException {
    // 异常处理逻辑
  }

  // 监听应用在后台时被链接唤起的回调
  linkStream.listen((String? link) {
    if (link != null) {
      _parseLink(Uri.parse(link));
    }
  });
}

// 自定义链接解析跳转逻辑
void _parseLink(Uri uri) {
  switch(uri.path) {
    case '/user':
      final userId = uri.queryParameters['id'];
      // 跳转用户详情页逻辑
      break;
    case '/chat':
      final roomId = uri.queryParameters['roomId'];
      // 跳转聊天页逻辑
      break;
  }
}

四、测试验证 #

• 安卓可通过adb命令测试：adb shell am start -a android.intent.action.VIEW -d "https://your.app.domain/chat?roomId=123" 你的应用包名
• iOS可直接在Safari浏览器中输入配置好的链接，点击即可唤起应用跳转对应页面

内容的提问来源于stack exchange，提问作者FTF Studio