应用场景：
在Flutter 中显示一个网页（H5之类），然后在Flutter中可以调用网页js里的方法； js里也可以调用 Flutter
中的方法。这样就可以相互通信，方便一些功能的实现。
在Flutter中显示一个网页一般我们借助于官方提供的 webview_flutter 这个插件。
要想Flutter与js相互通信也是要借助于这个插件中的 JavascriptChannel。 我们也知道Flutter 在和android通信的时候是借助于MethodChannel，这两个蛮像的。
在说具体的调用方法之前先说一下WebView中几个关键的方法
1）onWebViewCreated 这个方法在webView 创建完成时调用，只会被调用一次 ，返回的参数是WebViewController 。 后面我们Flutter调用js方法的时候就会用到这个 WebViewController。
2）onPageFinished 这个方法在页面加载完成时调用， 在里边可以通过 WebViewController 来调用 js
调用方式 ： _webViewController.evaluateJavascript("js 方法名").then((res){
// 这个res 是js方法的返回值
});
- Flutter中调用Js里定义的方法 (Flutter 调 js )
// 这个showMessage 是在js中定义的方法，这个方法的返回值是true
// _controller就是WebViewController
_controller?.evaluateJavascript("showMessage('This message is from Flutter!')").then ((res) {
print ("evaluateJavascript-res: ${res}"); // evaluateJavascript-res: true
});
- Js 中发消息给Flutter（js调Flutter )
// 下面这段代码是js中的一个方法
function sendMessage (message ) {
// 这个MessageDeal是和Flutter里JavascriptChannel中的name一致的。
// 不用自己确切的定义，只要Flutter和js里保持一样就可以
// 这里我最开始看这个的时候一直没搞懂MessageDeal是什么，后来敲了一遍代码终于明白了，
// 这个其实和MethodChannle中的channel字符串有类似的意思，唯一标识
MessageDeal.postMessage(message); // 关键
document.getElementById ("content2").innerHTML = message;
}
完整的代码 ：
js端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html demo</title>
</head>
<body>
<script>
<!-- 这个方法是用来给Flutter调用的（即：Flutter调用js方法）-->
function showMessage (message){
document.getElementById ("content").innerHTML = message;
return true;
}
<!-- 这个方法是用来发送一个消息给Flutter的（即：js调用Flutter方法）-->
function sendMessage (message ) {
MessageDeal.postMessage(message);
document.getElementById ("content2").innerHTML = message;
}
</script>
<div id="content"><span>Flutter发送过来的消息是： </span>test</div>
<div id="content2"><span>我发送给Flutter的消息是：</span>test2</div>
<button onclick="sendMessage('我来自js调用sendMessage，我调用了Flutter中的功能')">send a message to Flutter</button>
</body>
</html>
Flutter端：
在本地测试的时候， 可以用上边的Html文件，然后用http-server在html文件所在目录开启一个本地的服务，这样就可以通过http://你的ip:8080/demo.html来访问你的html文件来测试了。 没有http-server这个的可以去安装一下，用这个还是还方便的。 【安装http-server: npm i http-server -g 】
WebView(
key: key,
javascriptMode: JavascriptMode.unrestricted,
initialUrl: url, // 网页地址： "http://172.18.230.138:8080/demo.html";
onWebViewCreated: (controller) {
_controller = controller;
},
navigationDelegate: (NavigationRequest request) {
var url = request.url;
setState(() {
isLoading = true; // 开始访问页面，更新状态
});
return NavigationDecision.navigate;
},
onPageFinished: (url) {
_controller?.evaluateJavascript("showMessage('This message is from Flutter!')").then ((res) {
print ("evaluateJavascript-res: ${res}");
});
},
javascriptChannels: <JavascriptChannel>[
JavascriptChannel(
name: "MessageDeal",
onMessageReceived: (JavascriptMessage message) {
// 这里接收到的就是 js 中发送过来的message。 和js里MessageDeal.postMessage(message) 中的message 对应 。
// 可以根据message来做一些相应的处理
print("${message.toString()}, ${message.hashCode}, message: ${message.message}") ;
// 收到消息后回复一个消息给js那边
_controller?.evaluateJavascript("showMessage ('我（Flutter）收到了你的消息[${message.message}].)");
}),
].toSet(),
)
如上， 简单的js发消息给flutter , flutter调js方法就说完了 。 仅记录学习。
网友评论