將 UniLinks 與 Flutter 集成（安卓 AppLinks + iOS UniversalLinks）
讓我們使用 Flutter Mobile 和 Flutter Web 集成 UniLinks。
一步一步的指導(dǎo)！
我是 Pedro Dionísio，是葡萄牙 InspireIT 公司的 Flutter 開發(fā)人員，我寫這個 UniLinks 教程的座右銘是：
- Firebase DynamicLinks 已被棄用，就像 Firebase 在其文檔中所說，不應(yīng)再實(shí)現(xiàn)（我正在使用它，由于它有一些錯誤并且已被棄用，我決定開始將這種類型的 Deeplink 遷移到 UniLinks）；
- 這種 Deeplink 方法被 TikTok、Instagram、Facebook 等大公司使用……
- 我在某些特定的 Android 設(shè)備上實(shí)現(xiàn)它時遇到了一些問題（嘗試打開并將數(shù)據(jù)傳遞給應(yīng)用程序）。
因此，我將把所有步驟講得一清二楚，并且解釋一切，不僅適用于 Flutter Android 和 iOS，還適用于 Flutter Web 和 Firebase WebHosting，以免錯過任何步驟。讓我們開始吧！
Deep Linking 介紹
什么是 Deep Linking?
Deep Linking（深層鏈接）就像有一個指向應(yīng)用程序某些部分的快捷方式。
這是一種特殊的網(wǎng)絡(luò)鏈接，它不僅可以打開您的應(yīng)用程序，還可以將您帶到應(yīng)用程序內(nèi)的特定位置。就像打開一本書，直接翻到您想閱讀的頁面一樣。
它是如何工作的？
假設(shè)您在應(yīng)用程序中發(fā)現(xiàn)了一篇很棒的文章，并且想與朋友分享。您可以向他們發(fā)送一個特殊的鏈接，將他們直接帶到該文章，而不是將他們發(fā)送到應(yīng)用程序的主頁并要求他們查找該文章。這就像給他們送了一條秘密通道。
最酷的部分是什么？
最酷的是，您還可以通過此鏈接發(fā)送特殊說明或代碼。例如，如果應(yīng)用程序中有折扣碼或隱藏的驚喜，您可以將其包含在鏈接中。所以，你不僅能很快到達(dá)正確的地方，還能得到一些額外的好處。
如果應(yīng)用程序已經(jīng)打開會發(fā)生什么？
有時，當(dāng)您單擊深層鏈接時，您的應(yīng)用程序可能已經(jīng)打開。不用擔(dān)心！當(dāng)應(yīng)用程序已經(jīng)運(yùn)行時，深度鏈接甚至可以工作。這就像切換到您正在閱讀的書中的正確頁面。
關(guān)于 UniLinks 的一些最后說明
在本教程中，我將向您展示如何使用名為“uni_links”的工具使深度鏈接變得超級簡單。
重要的是，在這種類型的深層鏈接中，必須在網(wǎng)站中分配 2 個配置文件（一個用于 Android，一個用于 iOS）。其含義是因?yàn)檫@些文件存儲有關(guān)您的應(yīng)用程序的重要信息，并且通過它們，您的網(wǎng)絡(luò)瀏覽器可以準(zhǔn)確地知道在手機(jī)內(nèi)重定向到哪里。
說到這里，我將向您展示如何創(chuàng)建 Flutter Web 項目并將這些文件放置在正確的位置。
完全不用擔(dān)心！這將很容易實(shí)施！讓我們開始吧！????
為您的移動應(yīng)用創(chuàng)建 Flutter 項目
Android 配置
轉(zhuǎn)到項目的 android/app/src/main/AndroidManifest.xml 文件。
在這里，我們需要更改一些內(nèi)容，首先將 android:launchMode="singleTop" 替換為 android:launchMode="singleTask" ，因?yàn)槲覀冎幌Ｍ谑謾C(jī)中打開 APP 的一個實(shí)例。
應(yīng)該會出現(xiàn)這樣的內(nèi)容：
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application ...>
<activity
android:name=".MainActivity"
android:exported="true"
android:launchMode="singleTask" <!-- <----HERE---- -->
...>之后，在同一個文件中，您需要配置您的“APP 入口”，該入口將通過特定的 UniLink 進(jìn)行。
例如我們希望通過這個鏈接打開 APP：https://mypage.web.app/promos/?promo-id=ABC1 。
因此，在 activity 內(nèi)，您將添加一個 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 配置
使用相同的示例，我們希望通過此鏈接打開應(yīng)用程序：https://mypage.web.app/promos/?promo-id=ABC1 。
轉(zhuǎn)到項目的 ios/Runner/Runner.entitlements 文件并添加以下 key 和 array 標(biāo)記：
<?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 進(jìn)行此配置：
- 雙擊 ios/Runner.xcworkspace 文件打開 Xcode；
- 轉(zhuǎn)到項目導(dǎo)航器 (Cmd+1) 并選擇最頂部的 Runner 根項目；
- 選擇 Runner 目標(biāo)，然后選擇 Signing & Capabilities 選項卡；
- 單擊 + Capability （加號）按鈕添加新功能；
- 輸入 associated domains 并選擇該項目；
- 雙擊域列表中的第一項，將其從 webcredentials:example.com 更改為：applinks:mypage.web.app；
- 將創(chuàng)建一個名為 Runner.entitlements 的文件并將其添加到項目中。
Flutter 實(shí)現(xiàn)
我通常使用模塊化的方法來組織一切，但對于這個示例項目，我將進(jìn)行混合，使一切變得簡單直觀。
讓我們首先在此處獲取最新版本的 uni_links 包：https://pub.dev/packages/uni_links 并將其粘貼到項目的 pubspec.yaml 文件中，如下所示：
---
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
uni_links: ^0.5.1 # <----------------保存并執(zhí)行 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 個屏幕？這是因?yàn)槲覀円獪y試 3 種情況：
- APP 正常打開時顯示主屏幕；
- 當(dāng)我們收到 Unilink https://mypage.web.app/promos/?promo-id=ABC1 時，會顯示綠色促銷屏幕；
- 當(dāng)我們收到 UniLink https://mypage.web.app/promos/?promo-id=ABC2 時，會顯示紅色促銷屏幕。
現(xiàn)在讓我們添加一個我在項目中經(jīng)常使用的重要實(shí)用程序文件。有了它我們就可以在 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;
}接下來我們添加負(fù)責(zé)處理 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 {
// 這用于以下情況：應(yīng)用程序未運(yùn)行，用戶單擊鏈接。
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");
}
// 這用于以下情況：應(yīng)用程序已經(jīng)在運(yùn)行，用戶單擊鏈接。
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，查看是否出現(xiàn)主屏幕。
圖片
原文：https://medium.com/@pedrostick3/integrate-unilinks-with-flutter-android-applinks-ios-universallinks-c9a1542d6625
