將 UniLinks 與 Flutter 集成（安卓 AppLinks + iOS UniversalLinks）

作者：zhangzhang 2023-10-31 11:39:42

移動開發移動應用

重要的是，在這種類型的深層鏈接中，必須在網站中分配 2 個配置文件（一個用于 Android，一個用于 iOS）。其含義是因為這些文件存儲有關您的應用程序的重要信息，并且通過它們，您的網絡瀏覽器可以準確地知道在手機內重定向到哪里。

讓我們使用 Flutter Mobile 和 Flutter Web 集成 UniLinks。

一步一步的指導！

我是 Pedro Dionísio，是葡萄牙 InspireIT 公司的 Flutter 開發人員，我寫這個 UniLinks 教程的座右銘是：

Firebase DynamicLinks 已被棄用，就像 Firebase 在其文檔中所說，不應再實現（我正在使用它，由于它有一些錯誤并且已被棄用，我決定開始將這種類型的 Deeplink 遷移到 UniLinks）；
這種 Deeplink 方法被 TikTok、Instagram、Facebook 等大公司使用……
我在某些特定的 Android 設備上實現它時遇到了一些問題（嘗試打開并將數據傳遞給應用程序）。

因此，我將把所有步驟講得一清二楚，并且解釋一切，不僅適用于 Flutter Android 和 iOS，還適用于 Flutter Web 和 Firebase WebHosting，以免錯過任何步驟。讓我們開始吧！

Deep Linking 介紹

什么是 Deep Linking?

Deep Linking（深層鏈接）就像有一個指向應用程序某些部分的快捷方式。

這是一種特殊的網絡鏈接，它不僅可以打開您的應用程序，還可以將您帶到應用程序內的特定位置。就像打開一本書，直接翻到您想閱讀的頁面一樣。

它是如何工作的？

假設您在應用程序中發現了一篇很棒的文章，并且想與朋友分享。您可以向他們發送一個特殊的鏈接，將他們直接帶到該文章，而不是將他們發送到應用程序的主頁并要求他們查找該文章。這就像給他們送了一條秘密通道。

最酷的部分是什么？

最酷的是，您還可以通過此鏈接發送特殊說明或代碼。例如，如果應用程序中有折扣碼或隱藏的驚喜，您可以將其包含在鏈接中。所以，你不僅能很快到達正確的地方，還能得到一些額外的好處。

如果應用程序已經打開會發生什么？

有時，當您單擊深層鏈接時，您的應用程序可能已經打開。不用擔心！當應用程序已經運行時，深度鏈接甚至可以工作。這就像切換到您正在閱讀的書中的正確頁面。

關于 UniLinks 的一些最后說明

在本教程中，我將向您展示如何使用名為“uni_links”的工具使深度鏈接變得超級簡單。

說到這里，我將向您展示如何創建 Flutter Web 項目并將這些文件放置在正確的位置。

完全不用擔心！這將很容易實施！讓我們開始吧！????

為您的移動應用創建 Flutter 項目

Android 配置

轉到項目的 android/app/src/main/AndroidManifest.xml 文件。

在這里，我們需要更改一些內容，首先將 android:launchMode="singleTop" 替換為 android:launchMode="singleTask" ，因為我們只希望在手機中打開 APP 的一個實例。

應該會出現這樣的內容：

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application ...>
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTask" <!-- <----HERE---- -->
            ...>

之后，在同一個文件中，您需要配置您的“APP 入口”，該入口將通過特定的 UniLink 進行。

例如我們希望通過這個鏈接打開 APP：https://mypage.web.app/promos/?promo-id=ABC1 。

因此，在 activity 內，您將添加一個 intent-filter ，如下所示：

<manifest ...>
  <application ...>
    <activity ...>
      ...

      <!-- App Links -->
      <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="mypage.web.app"
          android:pathPrefix="/promos/" />
      </intent-filter>

      ...
    </activity>
  </application>
</manifest>

iOS 配置

使用相同的示例，我們希望通過此鏈接打開應用程序：https://mypage.web.app/promos/?promo-id=ABC1 。

轉到項目的 ios/Runner/Runner.entitlements 文件并添加以下 key 和 array 標記：

<?xml versinotallow="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:mypage.web.app</string>
  </array>

  ...
</dict>
</plist>

您不需要這樣做，但如果您愿意，您也可以通過 XCode 進行此配置：

雙擊 ios/Runner.xcworkspace 文件打開 Xcode；
轉到項目導航器 (Cmd+1) 并選擇最頂部的 Runner 根項目；
選擇 Runner 目標，然后選擇 Signing & Capabilities 選項卡；
單擊 + Capability （加號）按鈕添加新功能；
輸入 associated domains 并選擇該項目；
雙擊域列表中的第一項，將其從 webcredentials:example.com 更改為：applinks:mypage.web.app；
將創建一個名為 Runner.entitlements 的文件并將其添加到項目中。

Flutter 實現

我通常使用模塊化的方法來組織一切，但對于這個示例項目，我將進行混合，使一切變得簡單直觀。

讓我們首先在此處獲取最新版本的 uni_links 包：https://pub.dev/packages/uni_links 并將其粘貼到項目的 pubspec.yaml 文件中，如下所示：

---
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  uni_links: ^0.5.1 # <----------------

保存并執行 flutter pun get 以更新您的項目依賴項。

然后添加三個用戶界面文件：主屏幕、綠色宣傳屏幕和紅色宣傳屏幕。

主屏幕文件 lib/screens/home_screen.dart ：

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        child: const Text(
          "Home Screen",
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

綠色促銷屏幕文件 lib/screens/green_promo_screen.dart ：

import 'package:flutter/material.dart';
import 'package:unilinkproject/common/uni_links/core/services/uni_links_service.dart';

class GreenPromoScreen extends StatelessWidget {
  const GreenPromoScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Colors.green,
              Colors.greenAccent,
            ],
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
          ),
        ),
        child: Text(
          "!!! Green Promo !!!\nCode: ${UniLinksService.promoId}",
          textAlign: TextAlign.center,
          style: const TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

紅色促銷屏幕 lib/screens/red_promo_screen.dart ：

import 'package:flutter/material.dart';
import 'package:unilinkproject/common/uni_links/core/services/uni_links_service.dart';

class RedPromoScreen extends StatelessWidget {
  const RedPromoScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.center,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Colors.red,
              Colors.redAccent,
            ],
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
          ),
        ),
        child: Text(
          "!!! Red Promo !!!\nCode: ${UniLinksService.promoId}",
          textAlign: TextAlign.center,
          style: const TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

為什么是 3 個屏幕？這是因為我們要測試 3 種情況：

APP 正常打開時顯示主屏幕；
當我們收到 Unilink https://mypage.web.app/promos/?promo-id=ABC1 時，會顯示綠色促銷屏幕；
當我們收到 UniLink https://mypage.web.app/promos/?promo-id=ABC2 時，會顯示紅色促銷屏幕。

現在讓我們添加一個我在項目中經常使用的重要實用程序文件。有了它我們就可以在 APP 的任何地方訪問最新的 BuildContext 。

添加此文件 lib/common/global_context/utils/contect_utility.dart ：

import 'package:flutter/material.dart';

class ContextUtility {
  static final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>(debugLabel: 'ContextUtilityNavigatorKey');
  static GlobalKey<NavigatorState> get navigatorKey => _navigatorKey;

  static bool get hasNavigator => navigatorKey.currentState != null;
  static NavigatorState? get navigator => navigatorKey.currentState;

  static bool get hasContext => navigator?.overlay?.context != null;
  static BuildContext? get context => navigator?.overlay?.context;
}

接下來我們添加負責處理 UniLinks lib/common/global_context/utils/context_utility.dart 的文件：

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';
import 'package:uni_links/uni_links.dart';
import 'package:unilinkproject/common/global_context/utils/context_utility.dart';
import 'package:unilinkproject/screens/green_promo_screen.dart';
import 'package:unilinkproject/screens/red_promo_screen.dart';

class UniLinksService {
  static String _promoId = '';
  static String get promoId => _promoId;
  static bool get hasPromoId => _promoId.isNotEmpty;

  static void reset() => _promoId = '';

  static Future<void> init({checkActualVersion = false}) async {
    // 這用于以下情況：應用程序未運行，用戶單擊鏈接。
    try {
      final Uri? uri = await getInitialUri();
      _uniLinkHandler(uri: uri);
    } on PlatformException {
      if (kDebugMode) print("(PlatformException) Failed to receive initial uri.");
    } on FormatException catch (error) {
      if (kDebugMode) print("(FormatException) Malformed Initial URI received. Error: $error");
    }

    // 這用于以下情況：應用程序已經在運行，用戶單擊鏈接。
    uriLinkStream.listen((Uri? uri) async {
      _uniLinkHandler(uri: uri);
    }, onError: (error) {
      if (kDebugMode) print('UniLinks onUriLink error: $error');
    });
  }

  static Future<void> _uniLinkHandler({required Uri? uri}) async {
    if (uri == null || uri.queryParameters.isEmpty) return;
    Map<String, String> params = uri.queryParameters;

    String receivedPromoId = params['promo-id'] ?? '';
    if (receivedPromoId.isEmpty) return;
    _promoId = receivedPromoId;

    if (_promoId == 'ABC1') {
      ContextUtility.navigator?.push(
        MaterialPageRoute(builder: (_) => const GreenPromoScreen()),
      );
    }

    if (_promoId == 'ABC2') {
      ContextUtility.navigator?.push(
        MaterialPageRoute(builder: (_) => const RedPromoScreen()),
      );
    }
  }
}

最后我們將 main.dart 文件更改為：

import 'package:flutter/material.dart';
import 'package:unilinkproject/common/uni_links/core/services/uni_links_service.dart';
import 'package:unilinkproject/common/global_context/utils/context_utility.dart';
import 'package:unilinkproject/screens/green_promo_screen.dart';
import 'package:unilinkproject/screens/home_screen.dart';
import 'package:unilinkproject/screens/red_promo_screen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await UniLinksService.init();

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: ContextUtility.navigatorKey,
      debugShowCheckedModeBanner: false,
      title: 'UniLinks Project',
      routes: {
        '/': (_) => const HomeScreen(),
        '/green-promo': (_) => const GreenPromoScreen(),
        '/red-promo': (_) => const RedPromoScreen(),
      },
    );
  }
}

我們就完成了！

您可以測試正常打開 APP，查看是否出現主屏幕。

圖片

原文：https://medium.com/@pedrostick3/integrate-unilinks-with-flutter-android-applinks-ios-universallinks-c9a1542d6625

責任編輯：武曉燕來源：獨立開發者張張

UniLinks 安卓配置