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

news2024/11/28 9:38:06

让我们使用 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.coloradmin.cn/o/1168748.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

cocosCreator微信小游戏 之 分享好友和朋友圈(四)

cocosCreator微信小游戏 之 分享好友和朋友圈(四)

creator版本&#xff1a; 3.8.0 语言&#xff1a; TypeScript 环境&#xff1a; Mac 简介 微信小游戏的分享分为两种&#xff1a; 被动分享 通过右上角的**…**打开&#xff0c;需要手动设置显示菜单才能分享好友或朋友圈主动分享 调用指定的 wx API接口即可进行分享好友 他…
阅读更多...
[2016-2018]phpstudy的exp制作

[2016-2018]phpstudy的exp制作

[2016-2018]phpstudy的exp制作 用python的requests模块进行编写 修改请求数据包进行远程代码执行 import requests import base64 def remove_code_execute():try:url input("请输入要测试的网址:")cmd input("想要执行的命令:")cmd f"system({…
阅读更多...
开源 | 30余套STM32单片机、嵌入式Linux、物联网、人工智能项目(开发板+教程+视频)

开源 | 30余套STM32单片机、嵌入式Linux、物联网、人工智能项目(开发板+教程+视频)

文末免费领取&#xff01; 30余套综合项目案例 STM32单片机、嵌入式、物联网、人工智能 项目文档源码视频 高校教学、学生毕设、个人项目练手 嵌入式实战项目推荐 15个嵌入式LinuxQt综合应用项目&#xff0c;涉及家居、医疗、农业等多种应用领域&#xff0c;案例中使用了嵌…
阅读更多...
【MATLAB源码-第66期】基于麻雀搜索算法(SSA)的栅格路径规划，输出做短路径图和适应度曲线。

【MATLAB源码-第66期】基于麻雀搜索算法(SSA)的栅格路径规划，输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 麻雀搜索算法&#xff08;Sparrow Search Algorithm, SSA&#xff09;是一种新颖的元启发式优化算法&#xff0c;它受到麻雀社会行为的启发。这种算法通过模拟麻雀的食物搜索行为和逃避天敌的策略来解决优化问题。SSA通过模拟…
阅读更多...
unity 从UI上拖出3D物体，（2D转3D）

unity 从UI上拖出3D物体，（2D转3D）

效果展示&#xff1a; 2D转3D视频 UI结构 UI组件挂载 UI结构 这个脚本挂载到 3D物体身上 using DG.Tweening; using System.Collections; using System.Collections.Generic; using UnityEngine;public class DragGame : MonoBehaviour {[HideInInspector]public bool isDrag…
阅读更多...
数据库存储引擎和锁

数据库存储引擎和锁

存储引擎&#xff1a; mysal当中数据用各种不同的技术存储在文件中&#xff0c;每一种技术都使用不同的存储机制&#xff0c;索引技巧&#xff0c;锁定水平以及最终提供的不同功能和能力&#xff0c;这些就是我们说的存储引擎。 功能&#xff1a; 1、mysql将数据存储在文件系…
阅读更多...
H5ke9

H5ke9

上次fetvh就一个参数url,,就是get请求 fetch还可以第二个参数对象,可以指定method:改为POST 请求头header :发送txt,servlet,json给客户端,,异步请求图片 1 这节客户端传到服务器端 2异步文件上传,两三行代码把文件传输 mouseover事件 .then()的使用 是Promise对象的一个方法…
阅读更多...
prometheus监控告警部署(k8s内部)

prometheus监控告警部署(k8s内部)

一、部署prometheus 先来说明一下需要用到的组件&#xff0c;需要使用pv、pvc存放prometheus的数据,使用pvc存放数据即使pod挂了删除重建也不会丢失数据&#xff0c;使用configmap挂载prometheus的配置文件和告警规则文件&#xff0c;使用service开放对外访问prometheus服务的端…
阅读更多...
高防IP的原理

高防IP的原理

高防IP&#xff0c;把域名解析到高防IP上(web事务只要把域名指向高防IP 即可。非web事务&#xff0c;把事务IP换成高防IP即可)一起在高防IP上设置转发规矩;所有公网流量都会走高防IP&#xff0c;通过端口协议转发的方法将用户的拜访通过高防IP转发到源站IP&#xff0c;一起将歹…
阅读更多...
进程控制（三）：进程替换

进程控制（三）：进程替换

文章目录 进程控制&#xff08;三&#xff09;进程替换进程替换函数进程中的环境变量 总结 进程控制&#xff08;三&#xff09; 进程控制中的进程替换&#xff0c;下文我们学习进程替换的意义&#xff0c;以及进程替换的方式 进程替换 初步认识进程替换&#xff0c;我们先使…
阅读更多...
Appium —— 初识移动APP自动化测试框架Appium

Appium —— 初识移动APP自动化测试框架Appium

说到移动APP自动化测试&#xff0c;代表性的测试框架非Appium莫属&#xff0c;从今天开始我们将从APP结构解析、Appium框架学习、安卓/iOS自动化测试实战、自动遍历回归测试、自动化测试平台及持续集成&#xff0c;多个维度一起由浅入深的学废Appium 今天我们先来初步认识Appi…
阅读更多...
远程设备常用工具：向日葵、Todesk

远程设备常用工具：向日葵、Todesk

其实按理说远程工具例如向日葵、Todesk如果是计算机专业、计算机从业者是必须知道的一个东西&#xff0c;但是在大学期间身边知道的人是少之又少的。 向日葵、Todesk工具的优势&#xff1a;方便、快捷、速度快等等我就不过多阐述了 PS:现在我就是在学校用远程写这篇 很多时候…
阅读更多...
使用Navicat访问宝塔中的MySQL数据库

使用Navicat访问宝塔中的MySQL数据库

首先放开数据库权限 然后放开3306端口 数据库默认端口是3306&#xff0c;如果改了&#xff0c;这里就填改的那个端口 连接数据库 复制数据库用户名和密码 填入Navicat中&#xff0c;主机只需要填IP即可 连接成功
阅读更多...
动手学深度学习——残差网络ResNet（原理解释+代码详解）

动手学深度学习——残差网络ResNet（原理解释+代码详解）

残差网络ResNet 1. 函数类2. 残差块3. ResNet模型4. 训练模型 ResNet为了解决“新添加的层如何提升神经网络的性能”&#xff0c;它在2015年的ImageNet图像识别挑战赛夺魁 它深刻影响了后来的深度神经网络的设计&#xff0c;ResNet的被引用量更是达到了19万。 1. 函数类 假…
阅读更多...
Android studio新版本多渠道打包配置

Android studio新版本多渠道打包配置

最近公司套壳app比较多 功能也都一样只有地址&#xff0c;和app名字还有icon不一样 签名文件也是一样的,所以就研究了多渠道打包 配置如下&#xff1a; 在app下build.gradle配置 因为最新版as中禁用了BuildConfig 所以我们需要手动配置一下 android { //TODO 其他省略buildFe…
阅读更多...
网络编程套接字（二）

网络编程套接字（二）

目录 简单的TCP网络程序服务端创建套接字服务端绑定服务端监听服务端获取连接服务端处理请求单执行流服务器的弊端 多进程版TCP网络程序捕捉SIGCHLD信号让孙子进程提供服务多线程版的TCP网络程序客户端创建套接字客户端链接服务器客户端发起请求 线程池版的TCP网络程序 简单的T…
阅读更多...
SpringBoot整合数据库版本管理工具Liquibase，赶紧整起来！

SpringBoot整合数据库版本管理工具Liquibase，赶紧整起来！

SpringBoot整合数据库版本管理工具Liquibase 背景一、什么是数据库版本管理工具&#xff1f;数据库版本管理工具主要特性什么是数据库版本管理工具Flyway和Liquibase对比及选型 二、Liquibase整合步骤1.引入pom依赖2.配置application.yml3.新建master.xml&#xff08;用于配置你…
阅读更多...
使用pandas处理excel文件【Demo】

使用pandas处理excel文件【Demo】

一、代码示例 import pandas as pd from pandas import Series,DataFrame from pandasql import sqldf import matplotlib.pyplotidInfos DataFrame(pd.read_excel(home_data.xlsx))print(idInfos.head(2))print(idInfos.dtypes)# print(idInfos[:][姓名]) # 自定义一个函数s…
阅读更多...
QTreeView 常见节点操作

QTreeView 常见节点操作

目录 1、节点遍历 2、设置当前选中项 3、树节点数据绑定 4、树节点自定义样式 5、数据检索 6、获取当前选中项 QTreeView作为项目最经常使用的空间&#xff0c;常用接口和操作必须熟悉熟悉在熟悉&#xff01;&#xff01;&#xff01; 1、节点遍历 void ParamSettingDl…
阅读更多...
【python VS vba】(3) 在python直接调用vba脚本

【python VS vba】(3) 在python直接调用vba脚本

目录 0 前言 1 VBA 内容 1.1 EXCEL这边VBA的内容 1.2 VBA的测试代码 2 python 调用 2.1 python 调用VBA的过程和结果 2.2 代码 0 前言 前面写了这么多&#xff0c;没想到&#xff0c;其实py是可以直接支持VBA的 python的模块import xlwings&#xff0c;可以让python直…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023