flutter 通过H5唤醒app及跳转到指定页面 以及 Chrome25 之后的处理

已于 2023-11-23 10:07:05 修改
阅读量2.8k 收藏
点赞数 1
文章标签： flutter android java chrome25 chrome intent
于 2021-07-27 12:00:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gpf1320253667/article/details/119139380
版权
本文介绍了在Flutter中处理H5唤醒App及跳转到指定页面的方法，包括Android和iOS端的配置。重点讨论了Chrome 25之后的唤醒异常处理，涉及Deep Links、App Links的实现，以及如何处理多域名情况和检查link策略。还提供了AndroidManifest.xml的配置示例和intent-filter的详细解释。
摘要由CSDN通过智能技术生成

最新转载：将 UniLinks 与 Flutter 集成（安卓 AppLinks + iOS UniversalLinks）

前言

在h5中通过URl Scheme唤醒app的配置有如下三种：

1，iframe标签

不管是ios还是安卓，浏览器都不可能知道手机有没有装某个app，所以方法是首先通过URL scheme打开app，如果打不开，则跳转下载链接。

之所以要用iframe打开，而不是直接跳链接，是因为如果APP唤醒失败，或者APP未安装的话，很多时候都会跳到错误页，影响用户体验。而iframe方法不会引起页面可见的变化（例如页面内容变成一个新页面），不会导致浏览器历史记录的变化。

iframe方案的唤起原理是: 程序切换到后台时，计时器会被推迟(计时器不准的又一种情况)。如果app被唤醒那么网页必然就进入了后台，如果用户从app切回来，那么时间一般会超过2s; 若app没有被唤起，那么网页不会进入后台，setTimeout基本准时触发，那么时间不会超过2s。

2，a标签


                

                
                
        

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        

    

      

        

            

              
                
                  智玲君
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          

                

                        订阅专栏
                









                



	

		

			

				
					
flutter 与WebView相关的需求整理（推荐）

				
			

			

				

					智玲君
				

				

					03-16
					
					948
					
				

			

		

		

			
				
前言
在一款app的开发中，或多或少都离不开要加载H5页面，例如隐私政策，服务协议等页面的加载，或是HTML类型的富文本数据的显示，并且当富文本之中存在超链接的时候，默认情况下点击会跳转打开对应的外部网页，但有时我们并不想在用户点击时显示超链接对应的web页面，而是拦截跳转，打开app内指定的某个页面，又或者是app中新推出一项活动时，先跳转到某个活动的H5页面，然后当用户在H5页面点击了某个按钮后，又打开app内的某个页面，即涉及到H5和Flutter之间的交互，基于以上这些常见的需求，本篇文章将系统的讲

			
		

	



                

              
                



	

		

			

				
					
flutter h5网页端唤起app

				
			

			

				

					WeiLenNuanYang的博客
				

				

					12-03
					
					3861
					
				

			

		

		

			
				
callapp-lib属性参考
flutter 网页端唤起app

场景需求：通过微信链接唤醒app，引导用户下载注册，如果用户安装了app则打开app，如果未安装则引导到下载地址。
以下方案：可以做到iPhone 和 Android 浏览器中 打开app和引导下载。
微信中会屏蔽，后续补充

网页端
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title

			
		

	



                


  
              

                


	

		

			

				
					
H5 跳转Flutter APP问题：在Flutter中解决H5能够打开APP并接收H5传递的参数

				
			

			

				

					倚栏静望的博客
				

				

					03-02
					
					6051
					
				

			

		

		

			
				
最近遇到了这个问题，其实这个问题在源生开发中算是一个很常见的问题。有很多场景都需要通过其他APP或者H5来打开APP并且有时候会携带参数。
所以在这里我说一下我的做法（大神勿喷，有更好的办法请评论区留言，不胜感激）。
Android端
1.首先在AndroidManifest.xml中修改入口Activity的配置：
            android:name=".MainActivity"...

			
		

	





	

		

			

				
					
Flutter web - 4 H5 移动端适配与依赖推荐

					
最新发布

				
			

			

				

					Kary的博客
				

				

					08-16
					
					911
					
				

			

		

		

			
				
之前开发H5页面时，使用rem方案来适配不同的机型。在flutter中有没类似的方案呢?对于不熟悉flutter开发的前端同学怎么快速上手项目呢？本文将介绍我在项目中所使用到的依赖。

			
		

	



		

			
		



	

		

			

				
					
Flutter web  / Dart web / Dart H5 调用APP桥接

				
			

			

				

					ypppk的博客
				

				

					05-28
					
					1708
					
				

			

		

		

			
				
dart写法：

import'package:js/js_util.dart'asjs;
varo=js.getProperty(window,"bridge");

js.callMethod(o,"callPhone",["400-99-55855"]);

js脚本写法：

  window.bridge.callPhone('400-99-55855')

  ...

			
		

	





	

		

			

				
					
Flutter如何一键唤起

				
			

			

				

					坚果的博客
				

				

					06-02
					
					819
					
				

			

		

		

			
				
如何一键唤起目前我们的项目有分享功能，想通过分享的链接实现判断用户是否已经下载，如果没有，则下载，下载了的用户则可以跳转到对应的详情页，查看详情为了方便尽可能的少写代码，在pub上发现openinstall_flutter_plugin插件openinstall插件封装了openinstall平台原生SDK，集成了 渠道统计,携带参数安装,快速安装与一键拉起 功能，目前渠道支持 H5渠道，广告平台渠道 以及 Apple Search Ads (ASA) 渠道。接下来我们就介绍如何在自己的项目中使用安装方式有

			
		

	





	

		

			

				
					
【flutter h5微信开放标签拉起app】

				
			

			

				

					androidhyf的博客
				

				

					01-30
					
					557
					
				

			

		

		

			
				
2.在app首页注册微信开放sdk、调用获取开放标签的方法。在app的AndroidMainfest.xml中添加。3.使用fluwx拉起flutter白屏问题。分享到微信的h5网页中点击调起app。

			
		

	





	

		

			

				
					
【flutter】特别篇：flutter嵌入h5页面

				
			

			

				

					LCQ_CG的博客
				

				

					09-19
					
					5259
					
				

			

		

		

			
				
flutter插入页面的两个demo，对基础用法的理解，真机和虚拟机联网测试成功

			
		

	





	

		

			

				
					
Flutter加载H5与js交互

				
			

			

				

					鲸落
				

				

					08-27
					
					2269
					
				

			

		

		

			
				
文章目录3. [webview_flutter（Null safety）](https://pub.dev/packages/url_launcher)（1)描述：嵌入H5页面及与js交互（2)适合平台：ANDRIOD、IOS（3)使用a. 判断页面是否加载完b. Flutter调用JS方法c. JS调用Flutter方法(4) 完整代码
3. webview_flutter（Null safety）

（1)描述：嵌入H5页面及与js交互
（2)适合平台：ANDRIOD、IOS
（3)使用
a. 判断页面

			
		

	





	

		

			

				
					
Flutter：从入门到实践

				
			

			

				

					GitChat
				

				

					07-02
					
					2818
					
				

			

		

		

			
				

			
		

	





	

		

			

				
					
Flutter和SwiftUI和ReactNative比较

				
			

			

				

					VictorZhang
				

				

					10-23
					
					1356
					
				

			

		

		

			
				
例如系统的摄像机、麦克风、GPS、陀螺仪，等等。

			
		

	





	

		

			

				
					
阿里卖家 Flutter for Web 工程实践

				
			

			

				

					qq_32198115的博客
				

				

					02-25
					
					2673
					
				

			

		

		

			
				
阿里卖家外贸资讯版块主要使用 Flutter 开发，经过一定的考虑我们选择了 FFW，并正式开启填坑之旅……

			
		

	





	

		

			

				
					
Flutter使用url_launcher包跳转默认浏览器打开网页

				
			

			

				

					野猿新一
				

				

					10-11
					
					9822
					
				

			

		

		

			
				
1.首先打开或者创建一个Flutter项目

2.打开pubspec.yaml配置文件，添加url_launcher的引用


dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^0.4.1

3.在命令行中运行flutter pub get指令或者在Android Studio中点击pubspec.yaml配置文件编辑页面顶部的P...

			
		

	





	

		

			

				
					
flutter 与H5交互

				
			

			

				

					随身笔记
				

				

					09-14
					
					2275
					
				

			

		

		

			
				
主要是flutter内嵌H5页面，之后就是两者之间的交互。

			
		

	





	

		

			

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

				
			

			

				

					wk1206的博客
				

				

					07-13
					
					5970
					
				

			

		

		

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

			
		

	





	

		

			

				
					
我的第一个flutter项目-加载H5界面（Android & Webview）

				
			

			

				

					麦小洛
				

				

					07-26
					
					1762
					
				

			

		

		

			
				
第一个flutter项目，主体就是一个主界面：
  1.内容点击数字自增

  2.跳转一个空页，

  3.跳转一个WebView界面

其中涉及添加主键，新建界面类，导入依赖，使用WebView, 兼容http网络安全

			
		

	





	

		

			

				
					
flutter 用 webview_flutter 与 h5 交互

				
			

			

				

					渣女园的博客
				

				

					10-10
					
					1989
					
				

			

		

		

			
				
flutter  用  webview_flutter  与 h5 交互

			
		

	





	

		

			

				
					
flutter怎么通过路由从别的页面跳转到TabBar和TabBarView里面页面

				
			

			

				

					07-14
				

			

		

		

			
				
要从另一个页面跳转到TabBar和TabBarView中的页面，您可以使用Flutter的导航机制。以下是一个简单的示例：

假设您有两个页面：HomePage和TabbedPage。HomePage包含一个按钮，点击该按钮将导航到TabbedPage，TabbedPage包含TabBar和TabBarView，每个标签对应一个页面。

在HomePage中，您可以使用Navigator.push方法跳转到TabbedPage：

```dart
import 'package:flutter/material.dart';
import 'tabbed_page.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Tabbed Page'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => TabbedPage()),
            );
          },
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: HomePage(),
  ));
}
```

在TabbedPage中，您可以创建一个DefaultTabController来管理TabBar和TabBarView，并在TabBar中定义标签。每个标签对应一个页面。

```dart
import 'package:flutter/material.dart';
import 'tab_page.dart';

class TabbedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tabbed Page'),
        bottom: TabBar(
          tabs: [
            Tab(text: 'Page 1'),
            Tab(text: 'Page 2'),
          ],
        ),
      ),
      body: TabBarView(
        children: [
          TabPage(title: 'Page 1'),
          TabPage(title: 'Page 2'),
        ],
      ),
    );
  }
}

class TabPage extends StatelessWidget {
  final String title;

  TabPage({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(title),
      ),
    );
  }
}
```

在上面的示例中，TabbedPage使用TabBar和TabBarView来展示两个页面。每个页面由TabPage小部件表示。您可以根据实际需求自定义这些页面。

当您从HomePage点击按钮跳转到TabbedPage时，将会显示TabBar和TabBarView，并且您可以在TabBar中进行不同标签页之间的切换。

希望对您有所帮助！如果有任何其他问题，请随时提问。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
智玲君

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值