Flutter实现外部跳转,跳转到其他app

- 外部跳转

该功能的实现,需要使用 uni_links 第三方库来协助完成外部页面的 Scheme,在 pubspec.yaml 中增加依赖,然后更新本地库文件。由于 Android 和 iOS 在配置上会有点区别,因此这里分别来介绍。

Android 流程
在项目中找到这个路径下的文件
android/app/src/main/AndroidManifest.xml
在配置的 application 下的 activity 内增加如下配置:


*<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="tyfapp"/>
</intent-filter>*

第 6 行代码就是声明这个 App 的 Scheme 的协议。

iOS 流程
在项目中找到这个路径下的文件

ios/Runner/info.plist

在 dict 内增加下面的配置:

CFBundleURLTypes


CFBundleTypeRole
Editor
CFBundleURLName
Two You
CFBundleURLSchemes

tyfapp


其中的第 9 行声明 App 的 Scheme。
以上就完成了基础的配置,接下来我们就使用 uni_links 来实现 Scheme 的监听。
Uni_links 实现外部跳转
首先我们在 pages 目录下新建一个主入口文件 entrance.dart ,该文件需要设计为一个有状态类组件。在组件中最关键的是监听获取到打开 App 的链接地址,实现的方式如下代码。


/// 使用[String]链接实现
Future<void> initPlatformStateForStringUniLinks() async {
  String initialLink;
  // Platform messages may fail, so we use a try/catch PlatformException.
  try {
    ***initialLink = await getInitialLink();***
    if (initialLink != null) {
      //  跳转到指定页面
      router.push(context, initialLink);
    }
  } on PlatformException {
    initialLink = 'Failed to get initial link.';
  } on FormatException {
    initialLink = 'Failed to parse the initial link as Uri.';
  }
  // Attach a listener to the links stream
  **_sub = getLinksStream().listen((String link) {**
    if (!mounted || link == null) return;
    //  跳转到指定页面
    router.push(context, link);
  }, onError: (Object err) {
    if (!mounted) return;
  });

其中第 6 行是处理在外部直接拉起 App 的业务逻辑,第 17 行则表示当前 App 处于打开状态,监听外部拉起事件,监听变化后处理相应的跳转逻辑。由于组件中有一个监听事件,为了避免组件被销毁后还在监听,因此需要在组件销毁阶段移除监听事件,代码如下:

@override
void dispose() {
super.dispose();
if (_sub != null) _sub.cancel();
}

以上就实现了 Scheme 可以直接在内外部使用的跳转逻辑。不过 Scheme 在 App 外部存在一些体验方面的问题,比如:

当需要被拉起的 App 没有被安装时,这个链接就不会生效;

在大部分 App 内 Scheme 是被禁用的,因此在用户体验的时候会非常差;

注册的 Scheme 相同导致冲突;

为了解决上述问题,Andorid 和 iOS 都提供了一套解决方案,在 Android 叫作 App link / Deep links ,在 iOS 叫作 Universal Links / Custom URL schemes。解决的方案就是在未安装 App 时可提供网页跳转,其次可以使用 https 和 http 域名链接的方式来进一步提升唯一性。

App link / Deep links

应用链接仅适用于 https 方案,并且需要指定的主机以及托管文件 assetlinks.json,该配置文件可参考如下:

[{
“relation”: [“delegate_permission/common.handle_all_urls”],
“target”: {
“namespace”: “android_app”,
“package_name”: “com.example”,
“sha256_cert_fingerprints”:
[“14:6D:E9:83:C5:73:06:50:D8:EE:B9:95:2F:34:FC:64:16:A0:83:42:E6:1D:BE:A8:8A:04:96:B2:3F:CF:44:E5”]
}
}]

package_name,在应用的 build.gradle 文件中声明的应用 ID;

sha256_cert_fingerprints:应用签名证书的 SHA256 指纹,你可以利用 Java 密钥工具。

配置好该文件后,同样是修改下面路径下的文件。

android/app/src/main/AndroidManifest.xml

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

具体的过程,你可以在线上项目开发过程中尝试应用。

Universal Links / Custom URL schemes

该方法也是需要一个主机域名来启动应用,因此需要服务的一个在线配置,例如:https://www.example.test/apple-app-site-association 获取 apple-app-site-association 的配置文件如下。

{
“applinks”: {
“apps”: [],
“details”: [
{
“appID”: “8LX3M43WHV.me.gexiao.me”,
“paths”: [ “/*” ]
}
]
}
}
同样我们需要修改下面路径的文件。
ios/Runner/info.plist
在 dict 内增加下面的配置:

com.apple.developer.associated-domains

applinks:[YOUR_HOST]

以上就是外部跳转的实现方案,实现外部跳转的 App Links 和 Universal Link 功能,由于需要域名部署,我这里就没有实际应用,具体你可以在项目开发中尝试。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter 是一种跨平台的移动应用开发框架,能够快速构建高效、美观的应用程序。下面我将介绍从入门到进阶的学习路径,并给出实战携程网应用程序的资料。 1. 入门阶段: - 学习Dart语言基础:Dart 是 Flutter 的编程语言,掌握其基本语法和特性非常重要。 - 安装Flutter SDK:根据官方指南下载并配置好Flutter开发环境。 - 理解Flutter基础概念:学习Flutter的基本概念,如Widget、State、BuildContext等。 - 创建第一个Flutter应用:通过编写一个简单的计数器应用程序加深对Flutter开发流程的理解。 2. 进阶阶段: - 深入学习Widget:掌握Flutter中的各种Widget,了解它们的层次结构以及常用属性和方法。 - 路由和导航组件:学习如何实现应用程序之间的页面和导航功能。 - 网络请求与数据处理:学习如何使用Flutter的网络请求库,并结合携程网的API接口获取数据。 - 状态管理:掌握不同的状态管理方案,例如Provider、GetX等,以便更好地管理应用程序的复杂状态。 - 自定义控件和动画:学习如何自定义Flutter控件,以及如何使用动画使应用程序更加生动和流畅。 实战携程网app资料: - Flutter官方文档:提供了全面的Flutter开发指南和示例代码,可在Flutter官方网站找到。 - Github上的开源项目:可以在Github上搜索到一些开源的Flutter项目,其中可能包含实现携程网app功能的示例代码。 - 携程网提供的开放API:携程网提供了一些开放接口供开发者使用,可通过API文档了解接口的使用方法,然后在Flutter中进行集成。 通过系统学习和实践,从入门到进阶,您将能够掌握Flutter开发技术,并有能力构建出类似携程网的应用程序。加油!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值