将 UniLinks 与 Flutter 集成（安卓 AppLinks + iOS UniversalLinks）

让我们使用 Flutter Mobile 和 Flutter Web 集成 UniLinks。

一步一步的指导！

我是 Pedro Dionísio，是葡萄牙 InspireIT 公司的 Flutter 开发人员，我写这个 UniLinks 教程的座右铭是：

  1. Firebase DynamicLinks 已被弃用，就像 Firebase 在其文档中所说，不应再实现（我正在使用它，由于它有一些错误并且已被弃用，我决定开始将这种类型的 Deeplink 迁移到 UniLinks）；
  2. 这种 Deeplink 方法被 TikTok、Instagram、Facebook 等大公司使用……
  3. 我在某些特定的 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: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 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: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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/118927.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

vivo 网络端口安全建设技术实践

vivo 网络端口安全建设技术实践

作者&#xff1a;vivo 互联网安全团队 - Peng Qiankun 随着互联网业务的快速发展&#xff0c;网络攻击的频率和威胁性也在不断增加&#xff0c;端口是应用通信中的门户&#xff0c;它是数据进出应用的必经之路&#xff0c;因此端口安全也逐渐成为了企业内网的重要防线之一&…
阅读更多...
【mmcv报错】ModuleNotFoundError: No module named ‘mmcv.runner

【mmcv报错】ModuleNotFoundError: No module named ‘mmcv.runner

跑一个代码需要用到mmcv和mmseg 其中有两行代码&#xff1a; from mmcv.runner import load_checkpoint from mmseg.utils import get_root_logger我先是按照官方推荐的安装方法去安装了mmcv和mmseg pip install -U openmim mim install mmcv它会自动帮你安装mmengine 我的cu…
阅读更多...
前后端交互常见的几种数据传输格式

前后端交互常见的几种数据传输格式

目录 1. get请求 query string 2.form表单get请求 3..form表单post请求 4..json格式 5.总结 1. get请求 query string 前端通过get请求携带 query string&#xff08;键值对&#xff09; ,后端通过req.getParameter(key)方法获取数据。如果key不存在&#xff0c;获取到的就…
阅读更多...
3款免费又好用的 Docker 可视化管理工具

3款免费又好用的 Docker 可视化管理工具

前言 Docker提供了命令行工具&#xff08;Docker CLI&#xff09;来管理Docker容器、镜像、网络和数据卷等Docker组件。我们也可以使用可视化管理工具来更方便地查看和管理Docker容器、镜像、网络和数据卷等Docker组件。今天我们来介绍3款免费且好用的 Docker 可视化管理工具。…
阅读更多...
一款好用的PDF转翻页电子书网站

一款好用的PDF转翻页电子书网站

​你是否曾经遇到过PDF文件无法翻页或者阅读不便的问题&#xff1f;今天给大家推荐一款好用的PDF转翻页电子书网站&#xff0c;让你轻松阅读PDF文件&#xff0c;不再烦恼翻页问题&#xff01; 一、网站介绍 这款FLBOOK在线制作电子杂志网站支持多种电子文件格式转换&#xff0…
阅读更多...
vue3中router和route的区别(使用场景)

vue3中router和route的区别(使用场景)

1.router router是用来对路由进行操作的&#xff1b; 多用于路由跳转、路由守卫、页面刷新、给路由文件添加路由路径或者移除路由路径等等 2.route route是用来获取路由信息的&#xff1b; 多用于获取路由路径、路由传参数据、路由文件配置的属性信息等等
阅读更多...
大漠插件（二、Qt使用插件时注意事项）

大漠插件（二、Qt使用插件时注意事项）

本章目的 在上篇已经注册完毕大漠&#xff0c;那么怎么使用大漠来制作脚本&#xff0c;我选择了我最熟悉的Qt来开发&#xff0c;毕竟只是小软件&#xff0c;用脚本或者c都差不了多少。本章就是开发途中的一些坑。 本人开发环境是 win11 64、Qt 5.15.2安装了5.10.0的msvc2015 32…
阅读更多...
CDS（Core Data Service）Annotation 常用属性

CDS（Core Data Service）Annotation 常用属性

1. 抬头信息 @UI: {headerInfo: {typeName: BP,typeNamePlural: BP,title:{type: #STANDARD, value:ApplyNumber},description:{value:Status}} }2. 行信息/分组 @UI.facet: [{id: bp_Tab1,purpose: #STANDARD,type: #FIELDGROUP_REFERENCE,// type: #LINEITEM_REFERENCE,labe…
阅读更多...
Android Datastore 动态创建与源码解析

Android Datastore 动态创建与源码解析

涉及到的知识点 1、协程原理---->很好的博客介绍&#xff0c;一个小故事讲明白进程、线程、Kotlin 协程到底啥关系&#xff1f; 2、Channel知识点---->Android—kotlin-Channel超详细讲解 3、Coroutines : CompletableDeferred and structured concurrency 封装的DataS…
阅读更多...
chatgpt升级啦，训练数据时间更新到2023年4月，支持tools（升级functionCall），128k上下文

chatgpt升级啦，训练数据时间更新到2023年4月，支持tools（升级functionCall），128k上下文

&#xff08;2023年11月7日&#xff09; gpt-4-1106-preview https://platform.openai.com/docs/models/gpt-4-and-gpt-4-turbo 训练数据日期升级到2023年四月 上线文增加到128k 调用一次chatgpt接口&#xff0c;可以得到多次函数调用 import OpenAI from "openai"…
阅读更多...
5米DEM高程数据分析和对比

5米DEM高程数据分析和对比

数字高程模型&#xff08;DEM&#xff09;是应用最广泛的地理信息数据之一&#xff0c;是进行三维空间处理和地形分析的数据基础。每个行业数据精度要求不一样&#xff0c;很多行业使用公开免费的90米和30米分辨率DEM就够了。而城市规划、交通线路规划、地质灾害防控、城区地籍…
阅读更多...
制造执行系统（MES）的数据追溯技术

制造执行系统（MES）的数据追溯技术

一、什么是数据追溯&#xff1f; 数据追溯是指对产品或过程中产生的各项数据进行记录、存储和索引&#xff0c;并通过可追溯性手段实现对其源头、流向和变化过程的准确追踪和还原。 通过数据追溯&#xff0c;企业可以实现对产品质量、生产过程等关键信息的全面掌握&#…
阅读更多...
nuxt项目：vant打包后样式顺序错乱问题及解决方案

nuxt项目：vant打包后样式顺序错乱问题及解决方案

不要引入vant/nuxt这个 需要的时候引入即可
阅读更多...
Direct3D地形绘制基础

Direct3D地形绘制基础

高度图 用高度图来描述地形中的丘陵和山谷，高度图其实就是一个数组，该数组每个元素都指定了地形方格中某一个特定顶点的高度值。通常将高度图视为一个矩阵，这样高度图中的元素就与地形栅格中的顶点一一对应。 高度图被保存在磁盘中，通常为其每个元素元素只分配一个字节存…
阅读更多...
腾讯云16核服务器配置有哪些？CPU型号处理器主频性能

腾讯云16核服务器配置有哪些？CPU型号处理器主频性能

腾讯云16核服务器配置大全&#xff0c;CVM云服务器可选择标准型S6、标准型SA3、计算型C6或标准型S5等&#xff0c;目前标准型S5云服务器有优惠活动&#xff0c;性价比高&#xff0c;计算型C6云服务器16核性能更高&#xff0c;轻量16核32G28M带宽优惠价3468元15个月&#xff0c;…
阅读更多...
浏览器自动播放音视频-前端实现方案

浏览器自动播放音视频-前端实现方案

目录 前言 浏览器自动播放策略 策略详情&#xff1a; 实现方案 方案1&#xff1a; 互动后播放 方案2&#xff1a; 互动后出声 总结 前言 在开发中可能有遇到这样的需求&#xff0c;当用户打开页面后&#xff0c;需要自动播放视频或音频&#xff0c;按理说那就打开页面…
阅读更多...
vue 集成高德地图，点击图标，弹出van-action-sheet，一闪而过的问题探究

vue 集成高德地图，点击图标，弹出van-action-sheet，一闪而过的问题探究

代码 <van-action-sheet v-model"sheetShow" title""><div class"van-list-vol"><van-col span"3"><div><van-imagestyle"height: 40px; width: 40px"round:src"hospital.orgUrl? hospita…
阅读更多...
用友U8定制版在集简云：无需API即可集成客服系统和用户运营

用友U8定制版在集简云：无需API即可集成客服系统和用户运营

无代码开发的新时代 在这个信息化、自动化的时代&#xff0c;无代码开发已经成为一种新的趋势。集简云就是这样的一款工具&#xff0c;可以轻松连接用友U8 定制版与近千款软件系统&#xff0c;无需开发、无需代码知识就可以打通各种软件之间的数据连接&#xff0c;构建自动化与…
阅读更多...
从零开始搭建微服务(一)

从零开始搭建微服务(一)

构建项目父工程 添加公共核心模块 安装nacos 安装nacos nacos 文档地址&#xff1a; https://nacos.io/zh-cn/docs/what-is-nacos.html 本文使用版本2.2.2 下载地址&#xff1a;https://github.com/alibaba/nacos/archive/refs/tags/2.2.2.zip 使用nacos 我们下载是源代码 解…
阅读更多...
MySQL -- 索引

MySQL -- 索引

MySQL – 索引 文章目录 MySQL -- 索引一、索引简介1.简介2.索引效率的案例 二、认识磁盘1.磁盘2.结论3.磁盘随机访问(Random Access)与连续访问(Sequential Access) 三、MySQL 与磁盘交互基本单位1.基本单位2.MySQL中的数据管理 五、索引的理解1.索引案例2.单页mysql page3.管…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站