Flutter插件之webview_flutter簡要使用說明

時間 2019-11-09

標籤 flutter 插件 webview 簡要使用說明简体版

原文原文鏈接

本文以官方插件及代碼爲例，簡要說明webview_flutter插件的使用,包括基本的使用，加載本地html文本，以及Flutter調用js、js調用Flutter等。javascript

前言

最近項目使用到官方的webview_flutter插件,雖然官方有提供Example但並無提供什麼說明文檔，這裏記錄一下本身的使用狀況。以官方代碼爲例，方便使用。html

使用方法

引包

在pubspec.yaml添加依賴java

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。web

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

加載html文本

html文本，這裏也能夠是<body>標籤內的內容，只是界面什麼的就比較醜。bash

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);
          }
        );
複製代碼

也能夠經過其餘方式加載post

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

出現亂碼可添加charset=utf-8,如：ui
webViewController.loadUrl('data:text/html;c> harset=utf-8;base64,$contentBase64');
複製代碼

JS與Flutter交互

JS調用Flutter方法

寫JavascriptChannelgoogle

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

WebView添加javascriptChannelslua

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插件的用法，更多的信息能夠去查閱官方資料或者源碼，但願對新入坑、或者遇到問題的朋友能有所幫助。若有問題，歡迎指正。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。