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

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文件assetlinks.json，还需要服务端配合。

          deep links可以自定义scheme，也不要服务端的验证.

          在AndroidManifest.xml中添加

          ios配置

          ios也支持两种，“Universal Links” 和 “Custom URL schemes”，两个功能和android类似。

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

          
          
          
            
            com.apple.developer.associated-domains
            
              applinks:[YOUR_HOST]
            
            
          
          
          

          Custom URL schemes在Info.plist中添加

          CFBundleURLTypes
          	
          		
          			CFBundleTypeRole
          			Editor
          			CFBundleURLName
          			Two You
          			CFBundleURLSchemes
          			
          				tyfapp
          			
          		
          	
          

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

          uni_links使用

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

          初始链接方法：

             Future _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://';
          

          第二种

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

          四、结尾

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