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通信的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 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 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使用JsBridge方式处理Webview与H5通信的方法

    目前,移动跨平台开发作为移动开发的重要组成部分,是移动开发者必须掌握的技能,也是自我提升的重要手段.作为Google推出的跨平台技术方案,Flutter具有诸多的优势,已经或正在被广大开发者应用在移动应用开发中.在过去的2019年,我看到越来越多的公司和个人开始使用Flutter来开发跨平台应用,对于移动应用开发来说,Flutter能够满足几乎所有的业务开发需求,所以,学习Flutter正当时. 众所周知,使用Flutter进行项目开发时,就免不了要加载H5页面,在移动开发中打开H5页面需要使用

  • Flutter WebView 预加载实现方法(Http Server)

    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的使用详解

    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列表刷新和加载更多实现方法

    本文实例讲述了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 渐变尺寸

随机推荐