flutter中如何实现deeplink
flutter 实现 如何 deeplink
2023-06-13 09:12:59 时间
1.哪些场景会用到deeplink?
- h5唤醒APP(比如活动页,通过短信下发链接等等)
- 其他APP跳转打开自己的APP
2.flutter中如何使用
2.1 安卓配置
安卓支持两种app links 和deep links
app links需要是scheme需要指定https,并且要增加hosts文件assetlinks.json,还需要服务端配合。
deep links可以自定义scheme,也不要服务端的验证
为了支持deeplink, 需要在android/app/src/main/AndroidManifest.xml中加入如下代码:
```
<manifest ...>
<application ...> <activity ...>
<!-- 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环境,
<?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添加如下信息即可;
<?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有两个方法供我们使用。一个是获取初始链接,另一个是监听。
初始链接
初始链接方法只能调用一次就好。
// 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,跳哪个页面了。
关注我的微信公众号,获取更多资料
相关文章
- Flutter实现文件上传华为对象存储(OBS)
- Flutter初步-第一个电视直播APP「建议收藏」
- 【 源码之间 - Flutter 】 FutureBuilder 使用
- Flutter 组件集录 | 桌面导航 NavigationRail
- 2022-02-23:flutter weekly第7期
- Flutter 实战-快速实现音视频通话应用
- Flutter 实现登录 UI
- flutter系列之:builder为构造器而生
- flutter系列之:Navigator的高级用法
- Flutter 多引擎渲染,在稿定 App 的实践
- Flutter 耗时监控 | 路由名为空原因分析
- Flutter 3.7 新特性:介绍后台isolate通道
- Flutter 知识集锦 | 基于 Flow 实现滑动显隐层
- 【Flutter】Dart 数据类型 字符串类型 ( 字符串定义 | 字符串拼接 | 字符串 API 调用 )
- 【错误记录】Flutter 报错 ( Could not read script ‘xxxflutter_toolsgradleapp_plugin_loader.gradle‘ )
- 【错误记录】Flutter 报错 ( Because xx depends on flutter_driver any from sdk which depends on args 1.6.0 )
- 【Flutter】Hero 动画 ( Hero 实现径向动画 | Hero 组件 createRectTween 设置 )
- 【Flutter】底部导航栏实现 ( BottomNavigationBar 底部导航栏 | BottomNavigationBarItem 导航栏条目 | PageView )
- 【Flutter】侧拉导航栏实现 ( Drawer 组件 | PageView 组件 )
- 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 在 Flutter 端实现 MethodChannel 通信 )
- 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 在 Flutter 端实现 EventChannel 通信 )