Flutter外掛之webview_flutter簡要使用說明

牛肉羹一碗發表於2019-10-21
FlutterWebView

本文以官方外掛及程式碼為例，簡要說明webview_flutter外掛的使用,包括基本的使用，載入本地html文字，以及Flutter呼叫js、js呼叫Flutter等。

前言

最近專案使用到官方的webview_flutter外掛,雖然官方有提供Example但並沒有提供什麼說明文件，這裡記錄一下自己的使用情況。以官方程式碼為例，方便使用。

使用方法

引包

在pubspec.yaml新增依賴

dependencies:
     webview_flutter: ^0.3.14+1
複製程式碼

引數介紹

引數 型別 預設值 備註
onWebViewCreated Function web view建立完成呼叫
initialUrl String
javascriptMode JavascriptMode JavascriptMode.disabled JS執行模式
javascriptChannels Set JS呼叫Dart的介面
navigationDelegate NavigationDelegate 請求攔截
gestureRecognizers Set 手勢
onPageFinished Function 頁面載入完成呼叫
debuggingEnabled bool false webview debug 是否可用
userAgent String
initialMediaPlaybackPolicy AutoMediaPlaybackPolicy

基本使用

最簡單的使用方式，建立一個WebView,完成後直接載入initialUrl提供的URL。

        WebView(
          initialUrl: 'https://flutter.dev',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
        )
複製程式碼

載入html文字

html文字，這裡也可以是<body>標籤內的內容，只是介面什麼的就比較醜。

const String htmlString = '''
<!DOCTYPE html><html>
<head><title>Navigation Delegate Example</title></head>
<body>
<p>
The navigation delegate is set to block navigation to the youtube website.
</p>
<ul>
<ul><a href="https://www.youtube.com/">https://www.youtube.com/</a></ul>
<ul><a href="https://www.google.com/">https://www.google.com/</a></ul>
</ul>
</body>
</html>
''';
複製程式碼

初始化後載入

    WebView(
          initialUrl: 'data:text/html;base64,${base64Encode(const Utf8Encoder().convert(htmlString))}',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          }
        );
複製程式碼

也可以通過其他方式載入

 final String contentBase64 = base64Encode(const Utf8Encoder().convert(htmlString));
    webViewController.loadUrl('data:text/html;base64,$contentBase64');
複製程式碼

出現亂碼可新增charset=utf-8,如：

webViewController.loadUrl('data:text/html;c> harset=utf-8;base64,$contentBase64');
複製程式碼

JS與Flutter互動

JS呼叫Flutter方法

寫JavascriptChannel

 JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'Toaster',
        onMessageReceived: (JavascriptMessage message) {
          Scaffold.of(context).showSnackBar(
            SnackBar(content: Text(message.message)),
          );
        });
  }
複製程式碼

WebView新增javascriptChannels

  WebView(
          initialUrl: 'data:text/html;base64,${base64Encode(const Utf8Encoder().convert(htmlString))}',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
          javascriptChannels: <JavascriptChannel>[
            _toasterJavascriptChannel(context),
          ].toSet(),
        );
複製程式碼

Web端的js函式呼叫

function jsCallFlutter(){
   Toaster.postMessage("msg from js");
}
複製程式碼

JavascriptChannel中的name可以自定義，但js中必須與之相對應：name.postMessage(),postMessage是固定，看包原始碼可知，目前該外掛知定義了這麼一個介面

Flutter呼叫JS方法

可以通過WebViewController.evaluateJavascript()來執行js函式

    controller.evaluateJavascript('flutterCallJs("msg from flutter")');
複製程式碼

Js函式

function flutterCallJs(String msg){
    //do something here
}
複製程式碼

關於js與flutter的互動大佬的這篇Flutter WebView與JS互動簡易指南更為詳細，也提出了不同的方式

最後

簡單的記錄了一下webview_flutter外掛的用法，更多的資訊可以去查閱官方資料或者原始碼，希望對新入坑、或者遇到問題的朋友能有所幫助。如有問題，歡迎指正。

相關文章