Dart与Flutter教程 深度链接集成

我在学习Dart和Flutter的过程中遇到了深度链接集成的问题，想请教大家几个具体问题：

  1. 在Flutter中实现深度链接的基本流程是什么？有没有官方推荐的最佳实践？
  2. 如何处理Android和iOS平台在深度链接配置上的差异？
  3. 有没有好用的第三方库可以简化深度链接的实现过程？
  4. 在测试深度链接时，有哪些常见的陷阱需要注意？
  5. 如何确保深度链接在应用冷启动时也能正常工作？

希望能得到有实际项目经验的朋友分享，最好能提供一些代码示例。谢谢！

3 回复

深度链接（Deep Links）可以让用户通过点击链接直接打开你的应用并跳转到指定页面。在Dart/Flutter中集成深度链接，可按以下步骤：

  1. 配置Android: 在android/app/src/main/AndroidManifest.xml中为每个需要支持深度链接的Activity添加<intent-filter>：
    <activity android:name=".MainActivity">
    <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>
</activity>
  2. 配置iOS: 编辑ios/Runner/Info.plist，添加CFBundleURLTypes字段：
    <key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yourapp</string>
        </array>
    </dict>
</array>
  3. Dart代码实现: 使用uni_links插件监听链接事件：
    import 'package:flutter/material.dart';
import 'package:uni_links/uni_links.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _latestLink = 'Unknown';

  @override
  void initState() {
    super.initState();
    initUniLinks();
  }

  Future<void> initUniLinks() async {
    String initialLink;
    try {
      initialLink = await getInitialUri();
    } catch (e) {
      print('getInitialUri error: $e');
    }
    if (!mounted) return;

    setState(() {
      _latestLink = initialLink?.toString() ?? 'Unknown';
    });

    uriLinkStream.listen((Uri uri) {
      setState(() {
        _latestLink = uri.toString();
      });
    }, onError: (Object err) {
      print('got err $err');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Deep Link Test')),
      body: Center(child: Text('Latest Link: $_latestLink')),
    );
  }
}

这样就完成了深度链接的基本集成，根据需求调整域名和路径即可。

更多关于Dart与Flutter教程 深度链接集成的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


深度链接（Deep Links）允许用户通过点击链接直接打开应用的特定页面。以下是Dart/Flutter中集成深度链接的基本步骤：

  1. 配置Android: 在android/app/src/main/AndroidManifest.xml中添加intent-filter：

    <activity ...>
    <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>
</activity>

  2. 配置iOS: 在ios/Runner/Info.plist中添加URL Types:

    <key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yourapp</string>
        </array>
    </dict>
</array>
<key>CFBundleURLName</key>
<string>com.yourdomain</string>

  3. 处理链接: 在Flutter中监听并处理深度链接：

    void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final data = await getInitialLink(); // 获取启动时的链接
  runApp(MyApp(initialData: data));
}

  4. 测试: 使用工具如Postman或浏览器访问你的链接，确保能正确跳转到应用指定页面。

遵循这些步骤，就能在Dart/Flutter应用中成功集成深度链接功能。

Dart与Flutter深度链接集成指南

深度链接(Deeplink)允许用户通过点击链接直接打开应用并导航到特定页面。以下是Flutter中实现深度链接的步骤：

1. 配置Android端

在AndroidManifest.xml中添加intent过滤器：

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="yourapp" android:host="example.com" />
</intent-filter>

2. 配置iOS端

在Info.plist中添加：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>yourapp</string>
        </array>
    </dict>
</array>

3. Flutter端实现

安装依赖：

dependencies:
  uni_links: ^0.5.1

处理链接的代码示例：

import 'package:uni_links/uni_links.dart';

void initDeepLinks() {
  // 处理应用冷启动时的链接
  getInitialLink().then((String? link) {
    if (link != null) _handleDeepLink(link);
  });

  // 监听应用运行时的链接变化
  linkStream.listen((String? link) {
    if (link != null) _handleDeepLink(link);
  });
}

void _handleDeepLink(String link) {
  final uri = Uri.parse(link);
  if (uri.pathSegments.contains('product')) {
    final productId = uri.pathSegments.last;
    // 导航到产品详情页
    Navigator.push(context, MaterialPageRoute(
      builder: (context) => ProductPage(id: productId)
    ));
  }
}

4. 测试深度链接

Android测试命令：

adb shell am start -W -a android.intent.action.VIEW -d "yourapp://example.com/product/123" com.your.package

iOS测试命令：

xcrun simctl openurl booted "yourapp://example.com/product/123"

以上是Flutter深度链接的基本实现方式，可根据实际需求调整路由处理和参数解析逻辑。

回到顶部