微信网页版二维码失效,佛山快速排名优化,免费网站在线观看人数在哪,想做一个网站让我们使用 Flutter Mobile 和 Flutter Web 集成 UniLinks。
一步一步的指导#xff01;
我是 Pedro Dionsio#xff0c;是葡萄牙 InspireIT 公司的 Flutter 开发人员#xff0c;我写这个 UniLinks 教程的座右铭是#xff1a;
Firebase DynamicLinks 已被弃用#xff0…
让我们使用 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”的工具使深度链接变得超级简单。
重要的是在这种类型的深层链接中必须在网站中分配 2 个配置文件一个用于 Android一个用于 iOS。其含义是因为这些文件存储有关您的应用程序的重要信息并且通过它们您的网络浏览器可以准确地知道在手机内重定向到哪里。
说到这里我将向您展示如何创建 Flutter Web 项目并将这些文件放置在正确的位置。
完全不用担心这将很容易实施让我们开始吧 为您的移动应用创建 Flutter 项目
Android 配置
转到项目的 android/app/src/main/AndroidManifest.xml 文件。
在这里我们需要更改一些内容首先将 android:launchModesingleTop 替换为 android:launchModesingleTask 因为我们只希望在手机中打开 APP 的一个实例。
应该会出现这样的内容
manifest xmlns:androidhttp://schemas.android.com/apk/res/androidapplication ...activityandroid:name.MainActivityandroid:exportedtrueandroid:launchModesingleTask !-- ----HERE---- --...之后在同一个文件中您需要配置您的“APP 入口”该入口将通过特定的 UniLink 进行。
例如我们希望通过这个链接打开 APP https://mypage.web.app/promos/?promo-idABC1 。
因此在 activity 内您将添加一个 intent-filter 如下所示
manifest ...application ...activity ......!-- App Links --intent-filter android:autoVerifytrueaction android:nameandroid.intent.action.VIEW /category android:nameandroid.intent.category.DEFAULT /category android:nameandroid.intent.category.BROWSABLE /dataandroid:schemehttpsandroid:hostmypage.web.appandroid:pathPrefix/promos/ //intent-filter.../activity/application
/manifestiOS 配置
使用相同的示例我们希望通过此链接打开应用程序 https://mypage.web.app/promos/?promo-idABC1 。
转到项目的 ios/Runner/Runner.entitlements 文件并添加以下 key 和 array 标记
?xml version1.0 encodingUTF-8?
!DOCTYPE plist PUBLIC -//Apple//DTD PLIST 1.0//EN http://www.apple.com/DTDs/PropertyList-1.0.dtd
plist version1.0
dict...keycom.apple.developer.associated-domains/keyarraystringapplinks:mypage.web.app/string/array...
/dict
/plist您不需要这样做但如果您愿意您也可以通过 XCode 进行此配置
双击 ios/Runner.xcworkspace 文件打开 Xcode转到项目导航器 (Cmd1) 并选择最顶部的 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: fluttercupertino_icons: ^1.0.2uni_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});overrideWidget 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});overrideWidget 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});overrideWidget 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-idABC1 时会显示绿色促销屏幕当我们收到 UniLink https://mypage.web.app/promos/?promo-idABC2 时会显示红色促销屏幕。
现在让我们添加一个我在项目中经常使用的重要实用程序文件。有了它我们就可以在 APP 的任何地方访问最新的 BuildContext 。
添加此文件 lib/common/global_context/utils/contect_utility.dart
import package:flutter/material.dart;class ContextUtility {static final GlobalKeyNavigatorState _navigatorKey GlobalKeyNavigatorState(debugLabel: ContextUtilityNavigatorKey);static GlobalKeyNavigatorState 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 Futurevoid 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 Futurevoid _uniLinkHandler({required Uri? uri}) async {if (uri null || uri.queryParameters.isEmpty) return;MapString, 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});overrideWidget 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
