Flutter webview 使用和交互

在Flutter中使用webview，在pub.dev中查看，有幾個組件均可以使用webview

本文使用的是webview_flutter，它是Flutter團隊開發的，目前還不是正式版，但已經可使用。在iOS中底層調用的是WKWebView，在Android中底層調用的是WebView。

webview_flutter 使用

1. 添加組件 添加webview_flutter
2. 主要代碼

WebView(
   initialUrl: "https://flutterchina.club/",
   //JS執行模式 是否容許JS執行
   javascriptMode: JavascriptMode.unrestricted,
 )
複製代碼

3. 針對iOS，須要在ios-Runner-info.plist中添加

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>
複製代碼

第三步不可少，不然會報錯。

Flutter調用JS

在調用以前 先看一下WebView的其餘參數:

WebView建立完成時調用 onWebViewCreated,

要顯示的url initialUrl

JS執行模式 默認是不調用 javascriptMode = JavascriptMode.disabled

使用javascriptChannel JS能夠調用Flutter javascriptChannels

攔截請求 navigationDelegate

手勢 gestureRecognizers

頁面加載完成 onPageFinished

經過WebViewController調用evaluateJavascript方法，便可調用JS。

瞭解了每一個參數的做用以後，交互就看似簡單了。

Flutter調用JS的流程：

1. WebView建立完成時在onWebViewCreated 中，獲取到WebViewController實例。
2. 當頁面加載完成以後，即onPageFinished以後，經過WebViewController的evaluateJavascript方法調用JS。
3. evaluateJavascript返回的是Future<String>，經過Future能夠獲取到JS的返回結果。

示例代碼： 在頁面加載完成以後，獲取網頁標題，並顯示在導航欄上。

WebView(
    initialUrl: "https://flutterchina.club/",
    //JS執行模式 是否容許JS執行
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (controller) {
      _controller = controller;
    },
    onPageFinished: (url) {
        _controller.evaluateJavascript("document.title").then((result){
          setState(() {
            _title = result;
          });
        }
      );
    },
  )
複製代碼

效果：

JS調用Flutter

JS調用Flutter主要看剩下的兩個參數：

javascriptChannels

navigationDelegate

這兩個參數均可以從JS調用Flutter，能夠單獨使用，也能夠混合使用。

javascriptChannels使用：

javascriptChannels相似於往JS中註冊方法，這些方法名要和web端約定好。

javascriptChannels參數接受Set<JavascriptChannel>一個成員類型爲JavascriptChannel的Set集合。

來看一下JavascriptChannel的用法：

JavascriptChannel(
  name: "share",
  onMessageReceived: (JavascriptMessage message)    {
        print("參數爲： ${message.message}");
  }
)
複製代碼

在JS端就能夠調用share方法，同時能夠傳遞參數，在Flutter中經過JavascriptMessage能夠獲取到參數。

navigationDelegate使用：

navigationDelegate: (NavigationRequest request) {
  //對於須要攔截的操做 作判斷
  if(request.url.startsWith("myapp://")) {
    print("即將打開 ${request.url}");
    //作攔截處理
    //pushto.... 
    
    Application.push(context, request.url);
    return NavigationDecision.prevent;
  }
  
  //不須要攔截的操做
  return NavigationDecision.navigate;
} ,
複製代碼

例如想要經過webview打開app的原生頁面，經過約定好的連接，攔截到指定連接後可跳轉到原生頁面。

完整示例代碼：

import 'package:flutter/cupertino.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  WebViewController _controller;
  String _title = "webview";

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text("$_title"),
        ),
        child: SafeArea(
          child: WebView(
            initialUrl: "https://flutterchina.club/",
            //JS執行模式 是否容許JS執行
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (controller) {
              _controller = controller;
            },
            onPageFinished: (url) {
               _controller.evaluateJavascript("document.title").then((result){
                  setState(() {
                    _title = result;
                  });
                }
              );
            },
            navigationDelegate: (NavigationRequest request) {
              if(request.url.startsWith("myapp://")) {
                print("即將打開 ${request.url}");
                
                return NavigationDecision.prevent;
              }
              return NavigationDecision.navigate;
            } ,
            javascriptChannels: <JavascriptChannel>[
              JavascriptChannel(
                name: "share",
                onMessageReceived: (JavascriptMessage message) {
                  print("參數： ${message.message}");
                }
              ),
            ].toSet(),

          ),
        ),
    );
  }
}
複製代碼

可能已經有同窗看出來了，JS調用Flutter時，JS獲取不到Flutter的返回值，目前尚未找到直接的解決辦法，但能夠經過迂迴的方法解決。

下面提供兩種思路：

1. js調用Flutter時，除了傳遞業務須要的參數以外，再添加一個callbackname參數 經過callbackname參數把JS調用Flutter和Flutter返回參數綁定起來。

JavascriptChannel(
       name: "share",
       onMessageReceived: (JavascriptMessage message) {
       print("參數： ${message.message}");
                
        String callbackname = message.message; //實際應用中要經過map經過key獲取
                  
        String data = "收到消息調用了";
        String script = "$callbackname($data)";
         _controller.evaluateJavascript(script);
       }
  )
複製代碼

2. 在網頁加載成功後,把JS須要獲取的Flutter的值，注入到widow上, 在JS中就能夠經過widow獲取到相應的值。

String script = "window.isLogin=是否登陸";
 _controller.evaluateJavascript(script).then((result){

   }
);
複製代碼