flutter中如何实现deeplink

2022-09-20 16:44:02 浏览数 (1)

1.哪些场景会用到deeplink?

  • h5唤醒APP(比如活动页,通过短信下发链接等等)
  • 其他APP跳转打开自己的APP

2.flutter中如何使用

2.1 安卓配置

代码语言:javascript复制
安卓支持两种app links 和deep links
app links需要是scheme需要指定https,并且要增加hosts文件assetlinks.json,还需要服务端配合。
deep links可以自定义scheme,也不要服务端的验证
为了支持deeplink, 需要在android/app/src/main/AndroidManifest.xml中加入如下代码:
```
<manifest ...>

<application ...> <activity ...>

代码语言:javascript复制
  <!-- Deep Links -->
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <!-- Accepts URIs that begin with YOUR_SCHEME://YOUR_HOST -->
    <data
      android:scheme="[YOUR_SCHEME]"
      android:host="[YOUR_HOST]" />
  </intent-filter>

  <!-- 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" />
    <!-- Accepts URIs that begin with https://YOUR_HOST -->
    <data
      android:scheme="https"
      android:host="[YOUR_HOST]" />
  </intent-filter>
</activity>

```

2.2 IOS配置

ios也支持两种,"Universal Links" 和 "Custom URL schemes",两个功能和android类似。

Universal Link需要在ios/Runner/Runner.entitlements添加一个com.apple.developer.associated-domains环境,

代码语言:javascript复制
<?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>
  <!-- ... other keys -->
  <key>com.apple.developer.associated-domains</key>
  <array>
    <string>applinks:[YOUR_HOST]</string>
  </array>
  <!-- ... other keys -->
</dict>
</plist>

这样就可以通过https://YOUR_HOST的形式启动App

Custom URL schemes 在ios/Runner/Info.plist添加如下信息即可;

代码语言:javascript复制
<?xml ...>
<!-- ... other tags -->
<plist>
<dict>
  <!-- ... other tags -->
  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLName</key>
      <string>[ANY_URL_NAME]</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>[YOUR_SCHEME]</string>
      </array>
    </dict>
  </array>
  <!-- ... other tags -->
</dict>
</plist>

2.3 在flutter中的使用

上面我们配置好了android和ios,在浏览器火或其他App可以通过我们定义的deeplink打开我们的app了,但是我们如何在flutter中使用呢?

下面,我们需要引入一个插件,帮助我们获取进入的链接。首先,安装我们的uni_links插件。

uni_links有两个方法供我们使用。一个是获取初始链接,另一个是监听。

初始链接

初始链接方法只能调用一次就好。

代码语言:javascript复制
    // Uri parsing may fail, so we use a try/catch FormatException.
    try {
      final initialUri = await getInitialUri();
      // Use the uri and warn the user, if it is not correct,
      // but keep in mind it could be `null`.
    } on FormatException {
      // Handle exception by warning the user their action did not succeed
      // return?
    }
    // ... other exception handling like PlatformException

```dart
#### 监听链接变化
import 'dart:async';
import 'dart:io';

import 'package:uni_links/uni_links.dart';

// ...

  StreamSubscription _sub;

  Future<void> initUniLinks() async {
    // ... check initialLink

    // Attach a listener to the stream
    _sub = linkStream.listen((String? link) {
      // Parse the link and warn the user, if it is not correct
    }, onError: (err) {
      // Handle exception by warning the user their action did not succeed
    });

    // NOTE: Don't forget to call _sub.cancel() in dispose()
  }

// ...

3.如何在flutter内部实现不同页面的跳转

上面我们学习了如何在flutter中加入deeplink,那我们应该如何去优雅的使用它呢?

我们可以引入bloc或者getX做一个状态管理,在页面中监听状态改变,从而实现路由的管理。说一个deeplink的设计思路,

scheme://host/[:tab]/[subpage][?p=a]

tab对应我们app里的不同tab页面,我们根据tab来切换app的对应tab

subpage就是我们要跳转的具体页面

后面可以加入具体的参数

这样我们在解析uri的时候就知道切换哪个tab,跳哪个页面了。

关注我的微信公众号,获取更多资料

0 人点赞