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解析