Flutter网页内容加载插件yano_web_bundle的使用

Flutter 网页内容加载插件 yano_web_bundle 的使用

开箱即用，App 内嵌 Webview 子应用的管理和加载工具。Web 子应用可以从内存、Zip 归档、互联网 Tar 归档、框架 Assets，甚至是任意的数据源获取。

内存 Flutter Assets 互联网 Assets
从内存加载 从框架 Assets 加载 从互联网归档加载

特性

  • 开箱即用：内置常用的 Web Bundle 应用拉取、解码工具。
  • 快速上手：提供易用的 Facade，和易于扩展的组合自定义接口。
  • 高度自订：实现简单下载、解码功能即可构建属于自己的加载器。
  • 缓存读写：支持缓存加载。

安装

在 pubspec.yaml 文件中添加依赖：

# pubspec.yaml
dependencies:
  # ...
  yano_web_bundle: <latest version>

引入

在 Dart 文件中引入包：

import 'package:yano_web_bundle/yano_web_bundle.dart';

配置明文传输 (Clear Text HTTP)

YANO Web Bundle 开启一个 Web 服务器为 WebView 提供静态文件服务，所以需要在主 App 允许 HTTP 明文传输。

Android

在 AndroidManifest.xml 中添加以下配置：

<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

iOS

在 Info.plist 中添加以下配置：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

示例：内存中的 App

新建内存中的文件系统，并作为 WebView App 加载。

// 定义内存中的 Facade
final facade = BundleFacade.memory({
  "index.html": utf8.encode('<html><body>Hello World!</body></html>'), // 替换为实际的 HTML 内容
  "index.js": utf8.encode("console.log('Hello from JS');"), // 替换为实际的 JS 内容
});

// 获取 Bundle
late Bundle bundle;
await facade.fetch(Uri.base).then((bun) => bundle = bun);

// 服务 Bundle
await facade.serve(bundle, InternetAddress.loopbackIPv4);

// 获取服务端口并构造 WebView URL
final port = facade.getServingPort(bundle);
final indexHtmlUrl = "http://localhost:${port}/index.html";
final indexJsUrl = "http://localhost:${port}/index.js";

// 在 WebView 中加载 URL
WebView(
  initialUrl: indexHtmlUrl,
  javascriptMode: JavascriptMode.unrestricted,
);

示例：互联网上以 zip 分发的 App

从互联网上以 zip 形式分发的 App 加载。

final facade = BundleFacade(HttpFetcher(), ZipBundleDecoder());

// 获取 Bundle
late Bundle bundle;
await facade.fetch(
  "https://example.org/my-app.zip", // 替换为实际的 ZIP 文件 URL
  onProgress: (status) {
    print("Download progress: $status");
  },
).then((bun) => bundle = bun);

// 取消下载 Bundle
facade.cancelFetch("https://example.org/my-app.zip");

// 在 WebView 中加载 Bundle
WebView(
  initialUrl: bundle.urls.first, // 假设第一个 URL 是 index.html
  javascriptMode: JavascriptMode.unrestricted,
);

更多关于Flutter网页内容加载插件yano_web_bundle的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网页内容加载插件yano_web_bundle的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


yano_web_bundle 是一个 Flutter 插件，用于在 Flutter 应用中加载和展示网页内容。它允许你将网页内容打包成一个文件，并在应用中加载和显示，而不需要依赖外部网络连接。这对于需要在应用中嵌入离线网页内容或提高加载速度的场景非常有用。

以下是如何使用 yano_web_bundle 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 yano_web_bundle 依赖：

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

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 yano_web_bundle 插件：

import 'package:yano_web_bundle/yano_web_bundle.dart';

3. 加载网页内容

使用 WebBundle 类来加载和展示网页内容。你可以通过 load 方法加载打包好的网页内容，然后使用 WebView 或类似的小部件来展示。

class WebBundleExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<WebBundle>(
      future: WebBundle.load('assets/web_bundle_file.wbn'), // 加载打包好的网页文件
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasData) {
            return WebView(
              initialUrl: snapshot.data!.indexUrl, // 加载网页的初始 URL
            );
          } else {
            return Center(child: Text('Failed to load web bundle.'));
          }
        } else {
          return Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}

4. 打包网页内容

你需要将网页内容打包成一个 .wbn 文件，并将其放入 assets 目录中。可以使用工具如 webpack 或其他打包工具来生成 .wbn 文件。

在 pubspec.yaml 文件中添加资源文件：

flutter:
  assets:
    - assets/web_bundle_file.wbn
回到顶部