Flutter应用链接管理插件app_links_module的使用

Flutter应用链接管理插件app_links_module的使用

概述

app_links_module 是一个用于动态处理应用内链接的 Flutter 插件。通过它可以实现深度链接(Deep Links)和应用链接(App Links)的功能,从而在用户点击链接时引导到特定的页面或执行特定的操作。


安装与配置

1. 在 Juneflow 项目中添加 app_links_module

如果您的 Juneflow 项目不存在,请按照 Juneflow 文档 创建项目。然后,在项目的根目录下打开终端并运行以下命令:

june add app_links_module

网站配置

2. 使用模板创建 GitHub 仓库

克隆以下模板仓库到您的本地计算机: GitHub 模板

3. 配置 Cloudflare Pages

登录 Cloudflare 并完成以下步骤:

  1. 创建应用。
  2. 连接到您的 GitHub 仓库。
  3. 开始设置并部署。
4. 修改 index.html 文件

打开克隆的项目,找到 index.html 文件,并将其内容替换为以下代码:

<script>
  window.location.href = "[your_scheme]://[your.app.package]/";
</script>
  • [your_scheme] 替换为您的应用方案名称,例如 myapp
  • [your.app.package] 替换为您的应用包名,例如 com.example.myapp

Android 部分配置

5. 获取 SHA-256 指纹
(a) 获取调试指纹(Mac)

确保已安装 Java,然后运行以下命令:

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
(b) 获取调试指纹(Windows)

确保已安装 Java 和环境变量,然后运行以下命令:

keytool -list -v -keystore "C:\Users\[UserName]\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
© 获取发布指纹

生成 appbundle 文件并上传到 Google Play Store,然后在 Google Play 控制台的“应用签名”部分查找 SHA-256 指纹。

6. 修改 .well-known/assetlinks.json

将获取到的 SHA-256 指纹替换到 [11:22:33:44:55:66...],并将 [your.package.name] 替换为您的应用包名。

7. 修改 AndroidManifest.xml

android/app/src/main/AndroidManifest.xml 中添加以下代码:

<!-- App Link -->
<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="http" android:host="[your.web.site]" />
    <data android:scheme="https" android:host="[your.web.site]" />
</intent-filter>

<!-- Deep Link -->
<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- Add optional android:host to distinguish your app
         from others in case of conflicting scheme name -->
    <data android:scheme="[your_scheme]" android:host="[your.app.package]" />
    <!-- <data android:scheme="sample" /> -->
</intent-filter>

iOS 部分配置

8. 修改 apple-app-site-association 文件

替换 [apple team id][[app bundle id]] 为您的 Apple 团队 ID 和应用包名。

9. 提交更改到 GitHub

提交并推送更改以更新 Cloudflare Pages。


macOS 配置

10. 修改 macos/Runner.xcworkspace

按照 iOS 的配置步骤进行操作。


使用示例

以下是一个完整的示例代码,展示如何监听 URI 链接事件:

import 'package:flutter/material.dart';
import 'package:app_links_module/app_links_module.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final _appLinks = AppLinks(); // AppLinks 是单例对象

  MyApp() {
    // 订阅所有事件(初始链接和后续链接)
    _appLinks.uriLinkStream.listen((Uri uri) {
      // 处理 URI 链接,例如导航到特定页面
      print('Received URI: $uri');
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Links Example'),
        ),
        body: Center(
          child: Text('Listening for links...'),
        ),
      ),
    );
  }
}

更多关于Flutter应用链接管理插件app_links_module的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter应用链接管理插件app_links_module的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中,app_links 是一个常用的插件,用于处理深度链接(Deep Links)和通用链接(Universal Links)。它允许你在应用中处理来自外部链接的导航,例如用户点击了一个链接并希望跳转到应用的特定页面。

app_links 插件的主要功能包括:

  1. 处理深度链接:允许应用通过自定义的 URL 方案(如 myapp://)打开特定页面。
  2. 处理通用链接:允许应用通过标准的 HTTP/HTTPS 链接(如 https://example.com)打开特定页面。

安装 app_links 插件

首先,你需要在 pubspec.yaml 文件中添加 app_links 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  app_links: ^2.0.0

然后,运行 flutter pub get 来安装依赖。

配置 Android 和 iOS

Android 配置

android/app/src/main/AndroidManifest.xml 文件中,添加 <intent-filter> 来处理深度链接和通用链接:

<activity
    android:name=".MainActivity"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|screenLayout|density|uiMode"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">
    <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="example.com" />
        <data android:scheme="http" android:host="example.com" />
    </intent-filter>
</activity>

iOS 配置

ios/Runner/Info.plist 文件中,添加以下内容来处理通用链接:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>com.example.app</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>myapp</string>
        </array>
    </dict>
</array>
<key>FlutterDeepLinkingEnabled</key>
<true/>

使用 app_links 插件

在 Flutter 代码中,你可以使用 app_links 插件来监听和处理链接。

import 'package:flutter/material.dart';
import 'package:app_links/app_links.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final appLinks = AppLinks();

  // Listen to link updates
  appLinks.uriLinkStream.listen((uri) {
    // Handle the link
    print('App opened with link: $uri');
    // You can navigate to a specific page based on the link
  });

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App Links Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Links Example'),
        ),
        body: Center(
          child: Text('Welcome to the App Links Example!'),
        ),
      ),
    );
  }
}

处理链接

appLinks.uriLinkStream.listen 中,你可以根据 uri 的值来决定导航到哪个页面。例如:

appLinks.uriLinkStream.listen((uri) {
  if (uri.path == '/profile') {
    Navigator.pushNamed(context, '/profile');
  } else if (uri.path == '/settings') {
    Navigator.pushNamed(context, '/settings');
  }
});

获取初始链接

你还可以通过 appLinks.getInitialAppLink 来获取应用启动时的初始链接:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final appLinks = AppLinks();

  // Get the initial link
  final initialUri = await appLinks.getInitialAppLink();
  if (initialUri != null) {
    print('App opened with initial link: $initialUri');
    // Handle the initial link
  }

  // Listen to link updates
  appLinks.uriLinkStream.listen((uri) {
    print('App opened with link: $uri');
    // Handle the link
  });

  runApp(MyApp());
}
回到顶部