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

时间：2025-03-23 11:33:54

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

文章目录

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

前言

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

一、应用间跳转应用场景

1.使用第三方用户登录，跳转到需授权的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文件，还需要服务端配合。
deep links可以自定义scheme，也不要服务端的验证.

在中添加

<!-- Deep Links -->
  <intent-filter>
    <action android:name="" />
    <category android:name="" />
    <category android:name="" />
    <!-- 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="" />
    <category android:name="" />
    <category android:name="" />
    <!-- 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/添加一个-domains环境，

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "/DTDs/PropertyList-1.">
<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在中添加

<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 = '';
 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 = "/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了，我只是随便简单记录了一下，后续继续完善补充。

相关文章