Flutter WebView与JS交互插件webview_jsbridge_x的使用

webview_jsbridge_x

中文文档

webview_jsbridge_x 是一个兼容 webview_flutter 的 Flutter jsbridge 包，并且没有原生依赖。它完全兼容 Android 上的 JsBridge 和 iOS 上的 WebViewJavascriptBridge。

使用方法

以下是一个完整的使用示例：

import 'dart:async';
import 'dart:io';

import 'package:flutter/material.dart';
import 'package:local_assets_server/local_assets_server.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_jsbridge_x/webview_jsbridge_x.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeView('es5'), // 初始化时使用 es5 版本
    );
  }
}

class HomeView extends StatefulWidget {
  final String title;
  HomeView(this.title) : super();

  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  final jsBridge = WebViewJSBridgeX();

  bool isListening = false;
  String? address;
  int? port;

  @override
  initState() {
    _initServer(); // 启动本地服务器
    super.initState();
  }

  Future<void> _initServer() async {
    final server = LocalAssetsServer(
      address: InternetAddress.loopbackIPv4,
      assetsBasePath: 'assets/',
      logger: DebugLogger(),
    );

    final address = await server.serve();

    setState(() {
      this.address = address.address;
      port = server.boundPort!;
      isListening = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          if (widget.title == 'es5') // 如果当前使用 es5 版本，则提供切换到 es7 的按钮
            TextButton(
              child: Text(
                'es7',
                style: TextStyle(color: Colors.red),
              ),
              onPressed: () =>
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (ctx) => HomeView('es7')),
                  ),
            ),
        ],
      ),
      body: isListening
          ? Row(
              children: [
                Expanded(
                  child: _buildWebView(), // 构建 WebView
                ),
                Expanded(
                  child: Column(
                    children: [
                      Text('native'),
                      TextButton(
                        child: Text('sendHello'), // 调用 JS 方法
                        onPressed: () => _sendHello(),
                      ),
                      TextButton(
                        child: Text('callJSEcho'), // 调用带参数的 JS 方法
                        onPressed: () => _callJSEcho(),
                      ),
                      TextButton(
                        child: Text('_callNotExist'), // 调用不存在的方法
                        onPressed: () => _callNotExist(),
                      ),
                    ],
                  ),
                ),
              ],
            )
          : Center(child: CircularProgressIndicator()), // 加载中动画
    );
  }

  WebView _buildWebView() {
    final isEs5 = widget.title == 'es5'; // 判断是否使用 es5 版本
    final jsVersion =
        isEs5 ? WebViewXInjectJsVersion.es5 : WebViewXInjectJsVersion.es7; // 注入对应的 JS 版本
    final htmlVersion = isEs5 ? 'default' : 'async'; // 对应的 HTML 文件版本
    return WebView(
      javascriptChannels: jsBridge.jsChannels, // 注册 JavaScriptChannel
      javascriptMode: JavascriptMode.unrestricted, // 启用 JavaScript
      onWebViewCreated: (controller) {
        jsBridge.controller = controller; // 设置 WebView 控制器
        jsBridge.defaultHandler = _defaultHandler; // 设置默认处理函数
        jsBridge.registerHandler("NativeEcho", _nativeEchoHandler); // 注册 Native 回调
      },
      navigationDelegate: (NavigationRequest navigation) {
        print('navigationDelegate ${navigation.url}'); // 打印导航请求
        if (navigation.url.contains('__bridge_loaded__')) { // 检测 WebViewJavascriptBridge 加载完成
          jsBridge.injectJs(esVersion: jsVersion); // 注入 JS 代码
          return NavigationDecision.prevent; // 阻止默认导航
        }
        return NavigationDecision.navigate; // 允许导航
      },
      onPageFinished: (String url) {
        jsBridge.injectJs(esVersion: jsVersion); // 页面加载完成后注入 JS
      },
      initialUrl: 'http://$address:$port/$htmlVersion.html', // 加载本地 HTML 文件
    );
  }

  Future<void> _sendHello() async {
    final res = await jsBridge.send('hello from native'); // 调用 JS 方法
    print('_sendHello res: $res');
  }

  Future<void> _callJSEcho() async {
    final res = await jsBridge.callHandler('JSEcho', data: 'callJs from native'); // 调用带参数的 JS 方法
    print('_callJSEcho res: $res');
  }

  Future<void> _callNotExist() async {
    final res = await jsBridge.callHandler('NotExist', data: 'callJs from native'); // 调用不存在的方法
    print('_callNotExist res: $res');
  }

  Future<Object?> _defaultHandler(Object? data) async {
    await Future.delayed(Duration(seconds: 1)); // 模拟延迟
    return '_defaultHandler res from native'; // 返回结果
  }

  Future<Object?> _nativeEchoHandler(Object? data) async {
    await Future.delayed(Duration(seconds: 1)); // 模拟延迟
    return '_nativeEchoHandler res from native'; // 返回结果
  }
}

默认 JS 实现

默认的 JS 实现是 ES5 版本。使用此版本时，Web 客户端无需做任何更改。

异步 JS 实现

如果 Web 客户端使用 ES7，可以使用异步实现。只需选择 ES7 版本进行注入即可。例如：

Dart 客户端代码

jsBridge.injectJs(esVersion: WebViewInjectJsVersion.es7);

JS 客户端代码

setupWebViewJavascriptBridge(function (bridge) {
    console.log('setupWebViewJavascriptBridge done');

    async function defaultHandler(message) {
        console.log('defaultHandler JS got a message', message);
        return new Promise(resolve => {
            let data = {
                'Javascript Responds': 'defaultHandler Wee!'
            };
            console.log('defaultHandler JS responding with', data);
            setTimeout(() => resolve(data), 0);
        });
    }

    bridge.init(defaultHandler); // 初始化桥接

    async function JSEcho(data) {
        console.log("JS Echo called with:", data);
        return new Promise(resolve => setTimeout(() => resolve(data), 0));
    }

    bridge.registerHandler('JSEcho', JSEcho); // 注册回调函数

    async function sendHello() {
        let responseData = await window.WebViewJavascriptBridge.send('hello');
        console.log("repsonseData from java, data = ", responseData);
    }

    async function callHandler() {
        let responseData = await window.WebViewJavascriptBridge.callHandler('NativeEcho', { 'key': 'value' });
        console.log("JS received response:", responseData);
    }
});