flutter 与 js 进行交互

本文采用的 webview 插件为 flutter官方维护的 webview_Flutter

  关于webview与js的交互就分为两部分: Flutter 调用 js, js 调用 Flutter

开始之前我们先来熟悉下官方提供的Api

• onWebViewCreated：在WebView创建完成后调用，只会被调用一次；
• initialUrl：初始load的url；
• javascriptMode：JS执行模式（是否允许JS执行）；
• javascriptChannels：JS和Flutter通信的Channel；
• navigationDelegate：路由委托（可以通过在此处拦截url实现JS调用Flutter部分）；
• gestureRecognizers：手势监听；
• onPageFinished：WebView加载完毕时的回调

js 调用 Flutter

JavascriptChannel _alertJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'Ad',
        onMessageReceived: (JavascriptMessage message) {
           Navigator.push(context, DialogRouter(WhiteMyPopup(
             title:' hello',
             middleContent: Container(
               child: Text('我跳转了广告了'),
             ),
           )));
        });
  }
WebView(
      javascriptChannels: <JavascriptChannel>[
        _alertJavascriptChannel(context),
      ].toSet(),
);

FLutter 调用 Js

在WebView创建完成之后，我们可以拿到一个WebViewController，通过它的evaluateJavascript()方法，我们可以执行JS语句：

      onWebViewCreated: (WebViewController webViewController) {
    _controller = webViewController;
},
······
floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller
              ?.evaluateJavascript('callJS("visible")')
              ?.then((result) {
                  // You can handle JS result here.
              });
        },
        child: Text('call JS'),
      ),


 <p id="p1" style="visibility:hidden;">
    Flutter 调用了 JS.
  </p>
  
function callJS(message){
  document.getElementById("p1").style.visibility = message;
}

当我们点击Flutter的按钮的时候就会触发js的方法了;
有个需要注意的点, 如果我们需要接受js传递的参数的话, 在android上需要进行json解析