Flutter网页视图展示插件webview_suit的使用

Flutter网页视图展示插件webview_suit的使用

简介

webview_suit 是一个用于快速开发混合应用的插件套件。它提供了强大的功能来展示网页内容，并支持与原生代码进行交互。

开始使用

项目背景

此项目是一个 Flutter 插件包的起点，专门包含 Android 和/或 iOS 平台特定的实现代码。对于希望开始 Flutter 开发的用户，可以参考 Flutter 官方文档，其中包含教程、示例、移动开发指南以及完整的 API 参考。

示例代码

以下是一个完整的示例代码，展示如何使用 webview_suit 插件在 Flutter 应用中嵌入网页视图并加载本地资源。

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:webview_suit/modules/suit_controller.dart';
import 'package:webview_suit/webview_suit.dart';
import 'package:webview_suit_example/Plugins/self_plugin.dart'; // 示例插件

void main() {
  runApp(const MyApp()); // 启动应用
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState(); // 初始化状态
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState(); // 初始化平台状态
  }

  // 异步初始化方法
  Future<void> initPlatformState() async {
    // 这里可以添加一些平台相关的初始化逻辑
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('webview_suit 示例'), // 设置标题
        ),
        body: SafeArea(
          child: WebViewSuitWidget( // 使用 WebViewSuitWidget 展示网页
            "__myJsBridge__", // 唯一标识符
            onSuitCreate: (SuitController suitController) async { // 创建 WebView 时触发
              // 自动加载本地客户端资源
              var mainApp = await ChildApp.autoCreate(
                  "main", "assets/client/client.zip");

              // 加载自定义插件
              suitController.loadPlugins([SelfPlugin(suitController)]);

              // 加载主应用
              suitController.loadApp(mainApp);
            },
          ),
        ),
      ),
    );
  }
}

更多关于Flutter网页视图展示插件webview_suit的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网页视图展示插件webview_suit的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


webview_suit 是一个用于在 Flutter 应用中嵌入网页视图的插件。它基于 webview_flutter 插件，并提供了更多的功能和定制选项。以下是如何在 Flutter 项目中使用 webview_suit 插件的详细步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 webview_suit 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_suit: ^1.0.0 # 请使用最新版本

然后，运行 flutter pub get 来安装依赖。

2. 导入包

在需要使用 webview_suit 的 Dart 文件中导入包：

import 'package:webview_suit/webview_suit.dart';

3. 创建 WebView 组件

使用 WebViewSuit 组件来创建一个网页视图。你可以通过设置不同的参数来定制 WebView 的行为和外观。

class MyWebView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Suit Example'),
      ),
      body: WebViewSuit(
        initialUrl: 'https://flutter.dev',
        javascriptMode: JavascriptMode.unrestricted,
        onPageStarted: (String url) {
          print('Page started loading: $url');
        },
        onPageFinished: (String url) {
          print('Page finished loading: $url');
        },
        onWebResourceError: (WebResourceError error) {
          print('Error: ${error.description}');
        },
      ),
    );
  }
}

4. 运行应用

在 main.dart 中设置应用的入口，并运行应用：

void main() {
  runApp(MaterialApp(
    home: MyWebView(),
  ));
}

5. 其他功能

webview_suit 提供了许多其他功能，例如：

  • 自定义 User-Agent：可以通过 userAgent 参数设置自定义的 User-Agent。
  • 拦截请求：可以通过 navigationDelegate 拦截并处理特定的请求。
  • 注入 JavaScript：可以使用 javascriptChannels 注入 JavaScript 代码并处理回调。
WebViewSuit(
  initialUrl: 'https://flutter.dev',
  javascriptMode: JavascriptMode.unrestricted,
  userAgent: 'MyCustomUserAgent',
  navigationDelegate: (NavigationRequest request) {
    if (request.url.contains('blocked')) {
      return NavigationDecision.prevent;
    }
    return NavigationDecision.navigate;
  },
  javascriptChannels: <JavascriptChannel>{
    _toasterJavascriptChannel(context),
  },
);

JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
  return JavascriptChannel(
      name: 'Toaster',
      onMessageReceived: (JavascriptMessage message) {
        // ignore: deprecated_member_use
        Scaffold.of(context).showSnackBar(
          SnackBar(content: Text(message.message)),
        );
      });
}

6. 注意事项

  • Android 配置：在使用 webview_suit 时，确保在 AndroidManifest.xml 中添加网络权限：
<uses-permission android:name="android.permission.INTERNET"/>
  • iOS 配置：在 Info.plist 中添加以下配置以允许加载非 HTTPS 的 URL：
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
回到顶部