flutter开发实战-inappwebview实现flutter与Javascript方法调用

2023-10-07 22:12

本文主要是介绍flutter开发实战-inappwebview实现flutter与Javascript方法调用,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

flutter开发实战-inappwebview实现flutter与Javascript方法调用

在使用inappwebview时候,需要flutter端与JS进行交互,调用相应的方法,在inappwebview中的JavaScript Handlers。
在这里插入图片描述

一、JavaScript Handlers

要添加JavaScript Handlers,可以使用InAppWebViewController.addJavaScriptHandler方法,在该方法中定义handlerName和JavaScript端调用它时要调用的回调。回调可以返回要在JavaScript端发送的数据。如果您需要在加载网页后立即管理JavaScript处理程序,则应在创建InAppWebView时调用InAppWebViewController.addJavaScriptHandler。

以下是如何注册JavaScript处理程序的示例:

onWebViewCreated: (controller) {// register a JavaScript handler with name "myHandlerName"controller.addJavaScriptHandler(handlerName: 'myHandlerName', callback: (args) {// print arguments coming from the JavaScript side!print(args);// return data to the JavaScript side!return {'bar': 'bar_value', 'baz': 'baz_value'};});
},

在JavaScript端,要执行回调处理程序并将数据发送到Flutter,您需要使用window.Flutter_inappwebview.callHandler(handlerName,…args)方法,其中handlerName是一个字符串,表示您正在调用的处理程序名称,args是可以发送到Fluter方面的可选参数。

注意:

如果相更换一个名字,我们可以更换一个名字来嵌套window.flutter_inappwebview

window.myCustomObj = { callHandler: window.flutter_inappwebview.callHandler } and, then, you can use window.myCustomObj.callHandler

此外,可以通过这种方式包装整个特定的处理代码:

const myHandlerName = (…args) => window.flutter_inappwebview.callHandler(‘myHandlerName’, …args);

然后调用myHandlerName();

在Javascript端,如果需要调用callHandler,需要监听flatterInAppWebViewPlatformReady。可以使用在flatterInAppWebViewPlatformReady事件被分派时设置的全局标志变量,并在调用window.flutter_inappwebview.callHandler方法之前使用它。

示例代码如下

// execute inside the "flutterInAppWebViewPlatformReady" event listener
window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {const args = [1, true, ['bar', 5], {foo: 'baz'}];window.flutter_inappwebview.callHandler('myHandlerName', ...args);
});// or using a global flag variable
var isFlutterInAppWebViewReady = false;
window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {isFlutterInAppWebViewReady = true;
});
// then, somewhere in your code
if (isFlutterInAppWebViewReady) {const args = [1, true, ['bar', 5], {foo: 'baz'}];window.flutter_inappwebview.callHandler('myHandlerName', ...args);
}

在flutter端,Flutter在执行注入方法时候,调用evaluateJavascript来执行callHandler,这个flutterInAppWebViewPlatformReady无需监听,因为这个flutterInAppWebViewPlatformReady已经Ready了。

可以在onLoadStop中调用代码

onLoadStop: (controller, url) async {await controller.evaluateJavascript(source: """const args = [1, true, ['bar', 5], {foo: 'baz'}];window.flutter_inappwebview.callHandler('myHandlerName', ...args);""");
},

window.flutter_inappwebview.callHandler返回一个JavaScript Promise,该Promise可用于获取回调返回的json结果。在这种情况下,只需返回您想要发送的数据,它将使用dart:convert库中的jsonEncode自动进行json编码。

一个简单的示例代码


import 'dart:async';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';Future main() async {WidgetsFlutterBinding.ensureInitialized();if (Platform.isAndroid) {await AndroidInAppWebViewController.setWebContentsDebuggingEnabled(true);}runApp(new MyApp());
}class MyApp extends StatefulWidget {@override_MyAppState createState() => new _MyAppState();
}class _MyAppState extends State<MyApp> {InAppWebViewGroupOptions options = InAppWebViewGroupOptions(android: AndroidInAppWebViewOptions(useHybridComposition: true,),);@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text("JavaScript Handlers")),body: SafeArea(child: Column(children: <Widget>[Expanded(child: InAppWebView(initialData: InAppWebViewInitialData(data: """
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"></head><body><h1>JavaScript Handlers</h1><script>window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {window.flutter_inappwebview.callHandler('handlerFoo').then(function(result) {// print to the console the data coming// from the Flutter side.console.log(JSON.stringify(result));window.flutter_inappwebview.callHandler('handlerFooWithArgs', 1, true, ['bar', 5], {foo: 'baz'}, result);});});</script></body>
</html>"""),initialOptions: options,onWebViewCreated: (controller) {controller.addJavaScriptHandler(handlerName: 'handlerFoo', callback: (args) {// return data to the JavaScript side!return {'bar': 'bar_value', 'baz': 'baz_value'};});controller.addJavaScriptHandler(handlerName: 'handlerFooWithArgs', callback: (args) {print(args);// it will print: [1, true, [bar, 5], {foo: baz}, {bar: bar_value, baz: baz_value}]});},onConsoleMessage: (controller, consoleMessage) {print(consoleMessage);// it will print: {message: {"bar":"bar_value","baz":"baz_value"}, messageLevel: 1}},),),]))),);}
}

二、监听自定义CustomEvent

可以设置一个消息事件侦听器(与postMessage一起使用)或一个自定义事件侦听器。

// message event listener
window.addEventListener("message", (event) => {console.log(event.data);
}, false);// or custom event listener
window.addEventListener("myCustomEvent", (event) => {console.log(event.detail);
}, false);

然后使用window.dispatch

// using postMessage method
window.postMessage({foo: 1, bar: false});// or dispatching a custom event
const event = new CustomEvent("myCustomEvent", {detail: {foo: 1, bar: false}
});
window.dispatchEvent(event);

因此,可以在运行时使用InAppWebViewController.eevaluatteJavascript方法或在web应用程序内部设置这些事件侦听器,并使用相同的方法调度这些事件。

例如:

onLoadStop: (controller, url) async {await controller.evaluateJavascript(source: """window.addEventListener("myCustomEvent", (event) => {console.log(JSON.stringify(event.detail));}, false);""");await Future.delayed(Duration(seconds: 5));controller.evaluateJavascript(source: """const event = new CustomEvent("myCustomEvent", {detail: {foo: 1, bar: false}});window.dispatchEvent(event);""");
},
onConsoleMessage: (controller, consoleMessage) {print(consoleMessage);// it will print: {message: {"foo":1,"bar":false}, messageLevel: 1}
},

三、小结

flutter开发实战-inappwebview实现flutter与Javascript方法调用。描述可能不是特别准确,请见谅。

学习记录,每天不停进步。

这篇关于flutter开发实战-inappwebview实现flutter与Javascript方法调用的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/160766

相关文章

SpringBoot 获取请求参数的常用注解及用法

《SpringBoot获取请求参数的常用注解及用法》SpringBoot通过@RequestParam、@PathVariable等注解支持从HTTP请求中获取参数,涵盖查询、路径、请求体、头、C... 目录SpringBoot 提供了多种注解来方便地从 HTTP 请求中获取参数以下是主要的注解及其用法:1

HTTP 与 SpringBoot 参数提交与接收协议方式

《HTTP与SpringBoot参数提交与接收协议方式》HTTP参数提交方式包括URL查询、表单、JSON/XML、路径变量、头部、Cookie、GraphQL、WebSocket和SSE,依据... 目录HTTP 协议支持多种参数提交方式,主要取决于请求方法(Method)和内容类型(Content-Ty

深度解析Java @Serial 注解及常见错误案例

《深度解析Java@Serial注解及常见错误案例》Java14引入@Serial注解,用于编译时校验序列化成员,替代传统方式解决运行时错误,适用于Serializable类的方法/字段,需注意签... 目录Java @Serial 注解深度解析1. 注解本质2. 核心作用(1) 主要用途(2) 适用位置3

QT Creator配置Kit的实现示例

《QTCreator配置Kit的实现示例》本文主要介绍了使用Qt5.12.12与VS2022时,因MSVC编译器版本不匹配及WindowsSDK缺失导致配置错误的问题解决,感兴趣的可以了解一下... 目录0、背景:qt5.12.12+vs2022一、症状:二、原因:(可以跳过,直奔后面的解决方法)三、解决方

深入浅出Spring中的@Autowired自动注入的工作原理及实践应用

《深入浅出Spring中的@Autowired自动注入的工作原理及实践应用》在Spring框架的学习旅程中,@Autowired无疑是一个高频出现却又让初学者头疼的注解,它看似简单,却蕴含着Sprin... 目录深入浅出Spring中的@Autowired:自动注入的奥秘什么是依赖注入?@Autowired

Spring 依赖注入与循环依赖总结

《Spring依赖注入与循环依赖总结》这篇文章给大家介绍Spring依赖注入与循环依赖总结篇,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. Spring 三级缓存解决循环依赖1. 创建UserService原始对象2. 将原始对象包装成工

Java中如何正确的停掉线程

《Java中如何正确的停掉线程》Java通过interrupt()通知线程停止而非强制,确保线程自主处理中断,避免数据损坏,线程池的shutdown()等待任务完成,shutdownNow()强制中断... 目录为什么不强制停止为什么 Java 不提供强制停止线程的能力呢?如何用interrupt停止线程s

MySQL中On duplicate key update的实现示例

《MySQL中Onduplicatekeyupdate的实现示例》ONDUPLICATEKEYUPDATE是一种MySQL的语法,它在插入新数据时,如果遇到唯一键冲突,则会执行更新操作,而不是抛... 目录1/ ON DUPLICATE KEY UPDATE的简介2/ ON DUPLICATE KEY UP

Python中Json和其他类型相互转换的实现示例

《Python中Json和其他类型相互转换的实现示例》本文介绍了在Python中使用json模块实现json数据与dict、object之间的高效转换,包括loads(),load(),dumps()... 项目中经常会用到json格式转为object对象、dict字典格式等。在此做个记录,方便后续用到该方

SpringBoot请求参数传递与接收示例详解

《SpringBoot请求参数传递与接收示例详解》本文给大家介绍SpringBoot请求参数传递与接收示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋... 目录I. 基础参数传递i.查询参数(Query Parameters)ii.路径参数(Path Va