Android开发之Flutter与webview通信桥梁实现
前言
最近业务有需求需要在flutter内使用webview进行内嵌H5进行展示,此时需要涉及到H5与flutter之间额通信问题。比如发送消息或者H5调用Flutter的相机等等
webview选型
这里我们使用官方维护的插件webview_flutter
如何通信?
webview在初始化的时候需要向容器内注册一个全局方法供H5进行调用
WebView( initialUrl: 'https://flutter.dev', javascriptMode: JavascriptMode.unrestricted, javascriptChannels: <JavascriptChannel>{ _toasterJavascriptChannel(context), } .... .... ) JavascriptChannel _toasterJavascriptChannel(BuildContext context) { return JavascriptChannel( name: 'Toaster',//注册一个名字为Toaster的全局js方法 onMessageReceived: (JavascriptMessage message) { //处理业务的代码逻辑 print(message) }); }
H5发送消息给flutter
H5发送消息采用xxxx.postMessage形式,注意这里对象需要JSON.stringify
Toaster.postMessage( JSON.stringify({ name: 'tom', age: 12 }) );
flutter发送消息给H5
需要调用runJavascript
方法,我们可以在H5中声明一个全局windows
方法
window.globalCallback = function (data) { console.log(data) };
flutter发送采用runJavascript
形式
WebViewController!.runJavascript('globalCallback(123)');//如果是对象也需要json.encode序列化
以上就是Android开发之Flutter与webview通信桥梁实现的详细内容,更多关于Android开发Flutter webview通信的资料请关注我们其它相关文章!
相关推荐
-
详解Flutter WebView与JS互相调用简易指南
本文采用Flutter官方WebView插件:https://pub.dartlang.org/packages/webview_flutter WebView与JS互相调用是一个刚需,但是貌似现在大家写的文章讲的都不是很清楚,我这个简易指南简单粗暴地分为两部分:JS调用Flutter和Flutter调用JS,拒绝花里胡哨,保证一看就懂,一学就会. 开始之前先简单了解一下官方WebView所包含的API: onWebViewCreated:在WebView创建完成后调用,只会被调用一次: ini
-
Flutter实现webview与原生组件组合滑动的示例代码
最近在用Flutter写一个新闻客户端, 新闻详情页中的内容 需要用Flutter的本地Widget和WebView共同展示 . 比如标题/上方的视频播放器是用本地Widget展示, 新闻内容的富文本文字使用webview展示html, 这样就要求标题/视频播放器与webview可以 组合滑动 . ps: 如果把新闻详情页都用html画出, 就不用考虑组合滑动的问题. 找到支持与本地组件共存的webview控件 找一个可以与本地组件共存的webview控件是首要任务, 以下是我测试过的几个库:
-
Flutter webview与网页通讯交互实现
目录 前言 预览 具体实现 flutter中使用ds_bridge 网页端使用dsbridge_flutter 总结 前言 在app开发中我们有JSBridge来实现app和网页端通讯,现参考JSBridge实现了Flutter webview和网页端通讯. 预览 flutter import 'package:ds_bridge/ds_bridge.dart'; class JsBridgeUtil { // 向H5调用接口 static executeMethod(flutterWebVie
-
Flutter使用JsBridge方式处理Webview与H5通信的方法
目前,移动跨平台开发作为移动开发的重要组成部分,是移动开发者必须掌握的技能,也是自我提升的重要手段.作为Google推出的跨平台技术方案,Flutter具有诸多的优势,已经或正在被广大开发者应用在移动应用开发中.在过去的2019年,我看到越来越多的公司和个人开始使用Flutter来开发跨平台应用,对于移动应用开发来说,Flutter能够满足几乎所有的业务开发需求,所以,学习Flutter正当时. 众所周知,使用Flutter进行项目开发时,就免不了要加载H5页面,在移动开发中打开H5页面需要使用
-
Flutter WebView 预加载实现方法(Http Server)
目录 背景 分析 HttpServer 接下来? 资源配置 下载解压与本地存储 版本管理与更新 获取LocalServer Url并加载Webview 兜底措施 统一管理 展示与分析 总结 Demo 背景 WebView是在APP中,可以很方便的展示web页面,并且与web交互APP的数据.方便,并且更新内容无需APP发布新版本,只需要将最新的web代码部署完成,用户重新刷新即可. 在WebView中,经常能够听到的一个需求就是:减少首次白屏时间,加快加载速度.因为加载web页面,必然会受到网络
-
Android开发之Flutter与webview通信桥梁实现
前言 最近业务有需求需要在flutter内使用webview进行内嵌H5进行展示,此时需要涉及到H5与flutter之间额通信问题.比如发送消息或者H5调用Flutter的相机等等 webview选型 这里我们使用官方维护的插件webview_flutter 如何通信? webview在初始化的时候需要向容器内注册一个全局方法供H5进行调用 WebView( initialUrl: 'https://flutter.dev', javascriptMode: JavascriptMode.unr
-
Android开发之Activity管理工具类完整示例
本文实例讲述了Android开发之Activity管理工具类.分享给大家供大家参考,具体如下: 这个工具类是对Activity的一些管理,非常适用 package com.maobang.imsdk.util; import java.util.Stack; import android.app.Activity; import android.app.ActivityManager; import android.content.Context; import android.graphics
-
Android开发之Button事件实现与监听方法总结
本文实例总结了Android开发之Button事件实现与监听方法.分享给大家供大家参考,具体如下: 先来介绍Button事件实现的两种方法 main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="
-
Android开发之button事件监听简单实例
本文实例讲述了Android开发之button事件监听用法.分享给大家供大家参考.具体如下: 事件监听的listener,有以下几种方式: 1.声明一个普通的class,实现OnClickListener接口,然后在button的setOnClickListener中new该类的一个对象. 2.使用匿名内部类,直接 btn.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { S
-
Android开发之Service用法实例
本文实例讲述了Android开发之Service用法.分享给大家供大家参考.具体分析如下: Service是一个生命周期较长而且没有界面的程序. 下面通过一个播放mp3的例子来学习. 先看MainActivity.java package com.example.servicetest; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view
-
Android开发之ContentProvider的使用详解
前言 Content Provider为存储数据和获取数据提供了统一的接口,它可以完成在不同应用程序下的数据共享,而在上一篇文章Android开发之SQLite的使用方法讲到的SQLite只能在同一个程序中共享数据.另外android为一些常见的数据,比如说音频,视频,图片,通讯录等提供了Content Provider,这样我们就可以很方便的对这些类型的数据操作了.使用ContentProvider的好处是开发人员不需要考虑数据内部是怎么存储的,比如说如果我们想利用Conten
-
Android开发之ListView实现Item局部刷新
对于android中的ListView刷新机制,大多数的程序员都是很熟悉的,修改或者添加adapter中的数据源之后,然后调用notifyDataSetChanged()刷新ListView.在这种模式下,我们会在getView中,根据不同的数据源,让控件显示不同的内容.这种模式是最常见的刷新模式,当我们来回滑动ListView的时候,调用adapter的getView方法,然后listview对adapter返回的View进行绘制.这种模式下,View的显示内容或状态都记录在adapter里面
-
Android开发之ListView列表刷新和加载更多实现方法
本文实例讲述了Android开发之ListView列表刷新和加载更多实现方法.分享给大家供大家参考.具体如下: 上下拉实现刷新和加载更多的ListView,如下: package com.sin.android.ui; import android.content.Context; import android.util.AttributeSet; import android.view.Gravity; import android.view.MotionEvent; import andro
-
Android开发之TextView控件用法实例总结
本文实例总结了Android开发之TextView控件用法.分享给大家供大家参考,具体如下: TextView控件可以向用户展现文本信息,我们可以设置该文本信息是否能编辑 1.TextView基本使用 在程序中创建TextView对象 在xml文件中布局使用 2.New Android Project-> Project name:TextView Build Target:Android 2.2 Application name:TextViewDemo Package name:com.b5
-
Android开发之Animations动画用法实例详解
本文实例讲述了Android开发之Animations动画用法.分享给大家供大家参考,具体如下: 一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面转移旋转动画效果 Java Code代码中 AlphaAnimation 渐变透明度动画效果 ScaleAnimation 渐变尺寸
随机推荐
- Mysql中基本语句优化的十个原则小结
- Oracle数据库的安全策略
- js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
- 屏蔽浏览器缓存另类方法
- JS实现支持多选的遍历下拉列表代码
- Python selenium 三种等待方式详解(必会)
- asp下的风讯用的SQL通用防注入模块提供了
- php获得客户端浏览器名称及版本的方法(基于ECShop函数)
- Jquery搜索父元素操作方法
- 深入分析MSSQL数据库中事务隔离级别和锁机制
- SQL SERVER修改函数名容易引发的问题分析
- java中用ObjectMapper类实现Json与bean的转换示例
- 关于Rising病毒的查杀
- windows中apache 301页面跳转实现方法
- Android Handler 机制实现原理分析
- php在服务器执行exec命令失败的解决方法
- 详解Android中AsyncTask的使用方法
- 微信小程序--获取用户地理位置名称(无须用户授权)的方法
- .Net整合Json实现REST服务客户端的方法详解
- WPF水珠效果按钮组的实现教程