Flutter 应用间跳转应用，实现唤起第三方App

Flutter 应用间跳转应用，实现唤起第三方App

文章目录

• Flutter 应用间跳转应用，实现唤起第三方App
• 前言
• 一、应用间跳转应用场景
• 二、配置URL Scheme
• • • Android 配置
    • ios配置
    • uni_links使用
• 三、实现跳转
• • 1.引入库
  • 2. 跳转
  • • 打开浏览器
    • 打开外部APP
    • H5跳转App
• 四、结尾

前言

最近因为工作需求，做了应用间跳转应用，因为是一个flutter新手，所以在工作之余随便总结记录一下。

一、应用间跳转应用场景

使用第三方用户登录，跳转到需授权的App。如QQ登录，微信登录等。需要用户授权，还需要"返回到调用的程序，同时返回授权的用户名、密码"。
2.应用程序推广，跳转到另一个应用程序（本机已经安装），或者跳转到iTunes并显示应用程序下载页面（本机没有安装）。
3.第三方支付，跳转到第三方支付App，如支付宝支付，微信支付。
4.内容分享，跳转到分享App的对应页面，如分享给微信好友、分享给微信朋友圈、分享到微博。
5.显示位置、地图导航，跳转到地图应用。
6.使用系统内置程序，跳转到打电话、发短信、发邮件、Safari打开网页等内置App中。
…
等等

二、配置URL Scheme

跳转应用的实现，需要使用 uni_links 第三方库来协助完成外部页面的 Scheme（在想要跳转到的应用中引入uni_links库，并配置Scheme）

Android 配置

安卓支持两种app links 和deep links.
app links需要是scheme需要指定https，并且要增加hosts文件assetlinks.json，还需要服务端配合。
deep links可以自定义scheme，也不要服务端的验证.

在AndroidManifest.xml中添加

<!-- 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>

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>

Custom URL schemes在Info.plist中添加

<key>CFBundleURLTypes</key><array><dict><key>CFBundleTypeRole</key><string>Editor</string><key>CFBundleURLName</key><string>Two You</string><key>CFBundleURLSchemes</key><array><string>tyfapp</string></array></dict></array>

提示：当需要被拉起的 App 没有被安装时，这个链接就不会生效；

uni_links使用

它可以帮助我们帮助我们获取进入的链接，它有两个方法供我们使用。一个是获取初始链接，另一个是监听。
初始链接方法：

   Future<void> _handleInitialUri() async {    // In this example app this is an almost useless guard, but it is here to    // show we are not going to call getInitialUri multiple times, even if this    // was a weidget that will be disposed of (ex. a navigation route change).    if (!_initialUriIsHandled) {      _initialUriIsHandled = true;      _showSnackBar('_handleInitialUri called');      try {        final uri = await getInitialUri();        if (uri == null) {          print('no initial uri');        } else {          print('got initial uri: $uri');        }        if (!mounted) return;        setState(() => _initialUri = uri);      } on PlatformException {        // Platform messages may fail but we ignore the exception        print('falied to get initial uri');      } on FormatException catch (err) {        if (!mounted) return;        print('malformed initial uri');        setState(() => _err = err);      }    }  }

监听链接变化：

void _handleIncomingLinks() {    if (!kIsWeb) {      // It will handle app links while the app is already started - be it in      // the foreground or in the background.      _sub = uriLinkStream.listen((Uri? uri) {        if (!mounted) return;        print('got uri: $uri');        setState(() {          _latestUri = uri;          _err = null;        });      }, onError: (Object err) {        if (!mounted) return;        print('got err: $err');        setState(() {          _latestUri = null;          if (err is FormatException) {            _err = err;          } else {            _err = null;          }        });      });    }  }

销毁监听：

@override  void dispose() {    _sub?.cancel();    super.dispose();  }

三、实现跳转

上面我们配置好了android和ios,现在只需要我们通过我们配置的deeplink来打开跳转App了。

1.引入库

url_launcher: ^6.1.8

2. 跳转

打开浏览器

const url = 'https://flutter.io'; if (await canLaunch(url)) {      await launch(url); } else {      throw 'Could not launch $url'; }

打开外部APP

代码如下（示例）：

final Uri launch = Uri.parse('tyfapp://');bool isInstall = await canLaunchUrl(launch); if(isInstall){   print('已安装，跳转app');   await launchUrl(launch); }else{   print('未安装,做出提示或者到下载页面'); }

提示：ios跳转到App Store可通过这样实现：

final url = "https://itunes.apple.com/cn/app/id1380512641"; // id 后面的数字换成自己的应用 id 就行了launchUrlString(url);

H5跳转App

第一种

window.location = 'wechat://';

第二种

<a href="wechat://"></a>或const a = document.createElement('a')a.href = "wechat://";document.body.appendChild(a);a.click();

四、结尾

这样就完成了打开第三方app了，我只是随便简单记录了一下，后续继续完善补充。

来源地址：https://blog.csdn.net/wk1206/article/details/131686628