[英]Flutter two way communication js to dart and callback result from dart to js
我是扑的新手。 我已经开发了 js 来使用 webview_flutter 进行 flutter dart 通信。 像这样 :
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example'),
actions: <Widget>[
MenuList(_controller.future),
],
),
body: Builder(builder: (BuildContext context) {
return WebView(
initialUrl: localServerUrl,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
javascriptChannels: <JavascriptChannel>[
_scanBarcode(context),
].toSet(),
onPageFinished: (String url) {
//TODO : events after page loading finished
},
);
}),
),
);
}
JavascriptChannel _scanBarcode(BuildContext context) {
return JavascriptChannel(
name: 'Barcode',
onMessageReceived: (JavascriptMessage message) {
String result = scanBarcode(context);
******I got result of scanned barcode in result variable******
});
}
服务器 html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="script.js"></script>
</head>
<body>
<button id="btnBarcode" style="margin-top:20px; height:30px;">Scan Barcode</button>
</body>
</html>
这是JS文件
function scanBarcode(message) {
if (window.Barcode && window.Barcode.postMessage) {
Barcode.postMessage(message);
}
}
window.onload = function () {
document.getElementById('btnBarcode').onclick = function () {
scanBarcode("Scan Barcode");
}
}
我在 Dart 文件中的 javascript 通道_scanBarcode中成功获得了扫描条形码的结果。
现在我想在scanBarcode函数中将此条码结果回调回 JS 文件。
我已经研究了很多时间,但没有得到任何东西。
我被困在这里。 谁能帮我?? 非常感谢你。
您可以使用webViewctrl.evaluateJavascript
你可以参考https://www.elasticfeed.com/7ee71117c626c2021eb919c182ec483a/
代码片段
onPressed: () {
webViewctrl.evaluateJavascript(
"scanBarcode('123')");
}
我添加console.log(message);
到 javascript 函数 scanBarcode 来证明它有效
function scanBarcode(message) {
console.log(message);
if (window.Barcode && window.Barcode.postMessage) {
console.log(document.documentElement.innerHTML);
Barcode.postMessage(message);
}
}
输出
I/chromium( 5209): [INFO:CONSOLE(2)] "123", source: http://yoursite/jschannel/script.js (2)
完整的测试代码
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
WebViewController webViewctrl;
class _MyHomePageState extends State<MyHomePage> {
final Completer<WebViewController> _controller =
Completer<WebViewController>();
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Plugin example'),
actions: <Widget>[
//MenuList(_controller.future),
],
),
body: Builder(builder: (BuildContext context) {
return WebView(
initialUrl: 'http://yoursite/jschannel/index.html',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
webViewctrl = webViewController;
},
javascriptChannels: <JavascriptChannel>[
_scanBarcode(context),
].toSet(),
onPageFinished: (String url) {
//TODO : events after page loading finished
},
);
}),
floatingActionButton: FloatingActionButton(
onPressed: () {
webViewctrl.evaluateJavascript(
"scanBarcode('123')");
},
child: Icon(Icons.navigation),
backgroundColor: Colors.green,
)),
);
}
}
JavascriptChannel _scanBarcode(BuildContext context) {
return JavascriptChannel(
name: 'Barcode',
onMessageReceived: (JavascriptMessage message) {
/*String result = scanBarcode(context);
******I got result of scanned barcode in result variable*******/
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.