【Flutter】webview

文章目录

• 前言
• 一、如何使用

  ---

  前言

  webview_flutter是Flutter官方推出的一款用于Flutter上的webview插件，该插件在 iOS 用的是WKWebView 支持； 在 Android 上用的是系统WebView。

  
  （图片来源网络，侵删）

  插件地址：https://pub.dev/packages/webview_flutter

  ---

  一、如何使用

  第一步：在项目根目录下运行如下命令配置依赖

  flutter pub add webview_flutter

  第二步：导入

  在需要使用WebView的页面添加：

  import ‘package:webview_flutter/webview_flutter.dart’;

  
  （图片来源网络，侵删）

  第三步：初始化一个WebViewController

  @override
    void initState() {
      super.initState();
      _initWebViewController();
    }
    void _initWebViewController() {
      controller = WebViewController()
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..setBackgroundColor(const Color(0x00000000))
        ..setNavigationDelegate(
          NavigationDelegate(
            onProgress: (int progress) {
  		// Update loading bar.
            },
            onPageStarted: (String url) {},
            onPageFinished: (String url) {
  		//页面加载完成后才能执行js
              _handleBackForbid();
            },
            onWebResourceError: (WebResourceError error) {},
            onNavigationRequest: (NavigationRequest request) {
              return NavigationDecision.navigate;
            },
          ),
        )
        ..loadRequest(Uri.parse('https://www.geekailab.com'));
    }
    
  

  第四步：将WebViewController传递给WebViewWidget

  @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: const Text('Flutter Simple Example')),
        body: WebViewWidget(controller: controller),
      );
    }
  

  API说明

  WebViewController提供的API

  ///是否启用JavaScript执行，默认不启用
  Future setJavaScriptMode(JavaScriptMode javaScriptMode);
  ///设置webview的背景色
  Future setBackgroundColor(Color color);
  /// 当WebView的导航状态发生变化时会回调此方法，在此法中可以进行跳转拦截；
  /// 这里的 NavigationDecision.prevent表示阻止路由替换，NavigationDecision.navigate表示允许路由替换
  Future setNavigationDelegate(NavigationDelegate delegate);
  ///加载一个URL
  /// uri：可以通过Uri.parse(url)来将url转成uri
  /// method：支持get请求和post请求两种，默认为get
  /// headers：发起url加载是携带的header信息，根据请求的网站要求进行传递
  /// body：发起url请求是携带的body信息，可空
  Future loadRequest(
  	Uri uri, {
  	LoadRequestMethod method = LoadRequestMethod.get,
  	Map headers = const {},
  	Uint8List? body,
  })
  ///设置WebView 是否应支持使用其屏幕缩放控件和手势进行缩放，默认支持；
  Future enableZoom(bool enabled);
  ///用于设置HTTP User-Agent: 请求标头的值
  Future setUserAgent(String? userAgent);
  ///返回此 WebView 的历史记录。
  /// 如果没有返回历史记录项，则这是一个无操作。
  Future goBack();
  /// 返回 WebView 正在显示的当前 URL。
  /// 如果没有加载过 URL，则返回 `null`。
  Future currentUrl();
  ///运行JS代码，javaScript，要运行的JS代码
  Future runJavaScript(String javaScript);
  /// 运行JS代码并接收运行结果
  /// javaScriptString：要运行的JS代码
  /// 返回：JS运行的结果
  Future runJavaScriptReturningResult(String javaScript);
  /// 重新加载当前URL
  Future reload();
  /// 判断是否可以返回历史记录的上一页
  Future canGoBack();
  /// 返回历史记录的上一页
  Future goBack();
  /// 判断是否可以去往历史记录的下一页
  Future canGoForward();
  ///跳转到历史记录的下一页
  Future goForward();
  

  
  （图片来源网络，侵删）