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

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

概述

app_links_lego 是一个用于管理Flutter应用链接的插件。通过使用该插件,开发者可以轻松地处理深度链接和应用链接。

安装

步骤1:安装CLI并创建项目

在你的 lego 项目根目录打开终端,执行以下命令来安装CLI并创建一个新的 lego 项目:

flutter pub global activate lego_cli
lego create

步骤2:添加插件到项目

在终端中,进入项目根目录后执行以下命令来将 app_links_lego 添加到项目中:

lego add app_links_lego

步骤3:遵循app_links指南

确保你已经遵循了 app_links_guide 中的所有步骤。

配置

应用配置

如果 juneflow 项目不存在,请按照 this guide 创建它:

june add app_links_lego

网站配置

  1. 使用 this template 在GitHub上创建新的仓库。
  2. 将仓库克隆到本地计算机。
  3. 登录到 Cloudflare,选择 Workers & Pages > Overview > Create application > Pages Tap > Connect to Git > 选择刚刚创建的仓库 > 开始设置 > 保存并部署。
  4. 打开克隆的项目,编辑 index.html 文件,并替换其内容为以下代码:
[your_scheme] -> 你的应用方案名。例如:myapp
[your.app.package] -> 你的应用包名。例如:com.example.myapp

Android部分设置

  1. 获取应用的SHA-256指纹:

    • 如果你想获取 mac上的调试指纹,在终端中输入以下命令(如果未安装Java,请先安装):

      keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
      
    • 如果你想获取 Windows上的调试指纹,在终端中输入以下命令(如果未安装Java,请先安装):

      keytool -list -v -keystore "C:\Users\[UserName]\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
      
    • 如果你想获取 发布指纹,构建应用并上传到Google Play商店,然后可以在Google Play控制台的应用签名部分找到SHA-256指纹。

  2. 替换 .well-known/assetlinks.json 文件中的 [11:22:33:44:55:66...] 为获取到的SHA-256指纹。

  3. 替换 .well-known/assetlinks.json 文件中的 [your.package.name] 为你的应用包名。例如:com.example.myapp

iOS部分设置

  1. 替换 .well-known/apple-app-site-association 文件中的 [apple team id] 为你的Apple团队ID。
  2. 替换 .well-known/apple-app-site-association 文件中的 [[app bundle id]] 为你的应用包名。例如:com.example.myapp
  3. 提交并推送更改到GitHub以更新Cloudflare页面。

Android配置

  1. 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配置

  1. 打开Xcode中的 /ios/Runner.xcworkspace,转到 Runner > Info > URL Types,添加新的URL类型并添加你的应用方案名。例如:sample

  2. 转到 Signing & Capabilities > + Capability > Associated Domains,添加新的关联域。例如:applinks:your.web.site

    警告

    • 当写入关联域前缀时,不要添加 https:// 前缀。例如:applinks:your.web.site
    • 不要在URL末尾添加 /。例如:applinks:your.web.site

macOS配置

  1. 打开Xcode中的 /macos/Runner.xcworkspace,转到 Runner > Info > URL Types,添加新的URL类型并添加你的应用方案名。例如:sample

  2. 转到 Signing & Capabilities > + Capability > Associated Domains,添加新的关联域。例如:applinks:your.web.site

    警告

    • 当写入关联域前缀时,不要添加 https:// 前缀。例如:applinks:your.web.site
    • 不要在URL末尾添加 /。例如:applinks:your.web.site

使用

在你的Flutter应用中,你可以监听接收到的链接事件:

EasyEventBus.on('receive_app_links_uri', (url) {
  print(url); // 在这里编写你的代码。
});

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

1 回复

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


app_links_lego 是一个用于 Flutter 应用程序的插件,用于处理深度链接(Deep Links)和通用链接(Universal Links)。它可以帮助你管理应用程序的链接,使得用户点击链接时能够直接打开你的应用程序,并跳转到特定的页面。

以下是使用 app_links_lego 插件的基本步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 app_links_lego 依赖:

dependencies:
  flutter:
    sdk: flutter
  app_links_lego: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 配置 iOS 和 Android

iOS 配置

ios/Runner/Info.plist 文件中添加以下内容以支持通用链接:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>your.bundle.id</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yourapp</string>
        </array>
    </dict>
</array>
<key>FlutterDeepLinkingEnabled</key>
<true/>

Android 配置

android/app/src/main/AndroidManifest.xml 文件中添加以下内容以支持深度链接:

<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="yourdomain.com" />
</intent-filter>

3. 初始化插件

在你的 Flutter 应用程序的 main.dart 文件中初始化 app_links_lego

import 'package:app_links_lego/app_links_lego.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 AppLinks
  final appLinks = AppLinks();
  
  runApp(MyApp(appLinks: appLinks));
}

class MyApp extends StatelessWidget {
  final AppLinks appLinks;

  MyApp({required this.appLinks});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(appLinks: appLinks),
    );
  }
}

4. 处理链接

MyHomePage 或其他页面中处理链接:

class MyHomePage extends StatefulWidget {
  final AppLinks appLinks;

  MyHomePage({required this.appLinks});

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late StreamSubscription<Uri> _linkSubscription;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 监听链接
    _linkSubscription = widget.appLinks.uriLinkStream.listen((uri) {
      // 处理链接
      print('Received link: $uri');
      // 你可以在这里根据 uri 进行页面跳转或其他操作
    });
  }

  [@override](/user/override)
  void dispose() {
    _linkSubscription.cancel();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

5. 测试链接

你可以通过以下方式测试链接:

  • iOS: 使用 Safari 浏览器访问你的通用链接,例如 https://yourdomain.com/path
  • Android: 使用 Chrome 浏览器访问你的深度链接,例如 https://yourdomain.com/path

如果一切配置正确,点击链接应该会直接打开你的应用程序,并触发 uriLinkStream 事件。

6. 处理冷启动和热启动

app_links_lego 也会处理应用程序在冷启动和热启动时的链接。你可以在 initState 中通过 widget.appLinks.getInitialLink() 获取初始链接。

[@override](/user/override)
void initState() {
  super.initState();

  // 获取初始链接
  widget.appLinks.getInitialLink().then((uri) {
    if (uri != null) {
      print('Initial link: $uri');
      // 处理初始链接
    }
  });

  // 监听链接
  _linkSubscription = widget.appLinks.uriLinkStream.listen((uri) {
    print('Received link: $uri');
  });
}
回到顶部