Flutter JavaScript交互插件flutter_jsbridge_x的使用

Flutter JavaScript交互插件flutter_jsbridge_x的使用

添加JsBridge插件到WebView

一个为Flutter中的WebView小部件提供JsBridge的插件。
此插件必须引入 webview_flutter。

使用步骤

在 pubspec.yaml 文件中添加 flutter_jsbridge_plugin 作为依赖项：

dependencies:
  flutter_jsbridge_plugin: ^0.0.4

初始化JsBridge并注册处理器

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

import 'package:flutter/services.dart';
import 'package:flutter_jsbridge_x/flutterjsbridgeplugin.dart';
import 'package:flutter_jsbridge_x/js_bridge.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';

  final Completer<WebViewController> _controller =
      Completer<WebViewController>();
  final JsBridge _jsBridge = JsBridge();

  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息异步初始化
  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      platformVersion = await Flutterjsbridgeplugin.platformVersion;
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('JsBridge Example'),
        ),
        body: WebView(
          initialUrl: "https://www.baidu.com?timeStamp=${new DateTime.now().millisecondsSinceEpoch}",
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) async {
            // 加载JsBridge脚本
            _jsBridge.loadJs(webViewController);
            _controller.complete(webViewController);

            // 注册处理函数
            _jsBridge.registerHandler("getToken", onCallBack: (data, func) {
              // 返回token给JavaScript
              func({"token": "token"});
            });
            _jsBridge.registerHandler("IAPpayment", onCallBack: (data, func) {
              print("js call flutter iap");
            });
            _jsBridge.registerHandler("back", onCallBack: (data, func) {
              print("js call flutter back");
            });
          },
          navigationDelegate: (NavigationRequest request) {
            // 处理URL拦截
            if (_jsBridge.handlerUrl(request.url)) {
              return NavigationDecision.navigate;
            }
            return NavigationDecision.prevent;
          },
          onPageStarted: (url) {
            // 初始化JsBridge
            _jsBridge.init();
          },
          debuggingEnabled: true,
        ),
      ),
    );
  }
}

JS使用方法

JsBridge的JavaScript文件可以在以下链接找到：JSBridge.js

初始化JsBridge

在HTML页面中引入 JSBridge.js 文件，并通过以下代码初始化JsBridge：

window.jsBridge = new JSBridge(window.webkit.messageHandlers);

调用Flutter端的方法

调用 getToken

jsBridge.callHandler('getToken', { key: 'value' }, function(responseData) {
  console.log(responseData); // 输出 {"token": "token"}
});

调用 IAPpayment

jsBridge.callHandler('IAPpayment', { productID: '123456' }, function(responseData) {
  console.log(responseData); // 输出 null
});

调用 back

jsBridge.callHandler('back', {}, function(responseData) {
  console.log(responseData); // 输出 null
});

更多关于Flutter JavaScript交互插件flutter_jsbridge_x的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter JavaScript交互插件flutter_jsbridge_x的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_jsbridge_x 是一个用于在 Flutter 应用中实现与 JavaScript 交互的插件。它允许你在 Flutter 和 WebView 中的 JavaScript 代码之间进行通信。以下是如何使用 flutter_jsbridge_x 的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_jsbridge_x 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_jsbridge_x: ^latest_version

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

2. 导入包

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

import 'package:flutter_jsbridge_x/flutter_jsbridge_x.dart';

3. 初始化 JSBridge

在 Flutter 中初始化 JSBridge 并加载 WebView：

class MyWebView extends StatefulWidget {
  [@override](/user/override)
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  late JSBridge _jsBridge;

  [@override](/user/override)
  void initState() {
    super.initState();
    _jsBridge = JSBridge();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter JSBridge Example'),
      ),
      body: WebView(
        initialUrl: 'about:blank',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _jsBridge.init(webViewController);
        },
        onPageFinished: (String url) {
          _jsBridge.injectJavascript();
          _jsBridge.registerHandler('nativeHandler', (data) {
            print('Received data from JS: $data');
          });
        },
      ),
    );
  }
}

4. 注册 JavaScript 回调

在 onPageFinished 回调中，你可以注册 JavaScript 回调函数，以便在 JavaScript 调用时触发 Dart 代码。

_jsBridge.registerHandler('nativeHandler', (data) {
  print('Received data from JS: $data');
});

5. 调用 JavaScript 函数

你也可以从 Dart 中调用 JavaScript 函数：

_jsBridge.callHandler('jsFunction', {'key': 'value'}).then((response) {
  print('Response from JS: $response');
});

6. JavaScript 端代码

在 JavaScript 端，你可以使用 JSBridge 对象来与 Flutter 进行交互。

// 调用 Flutter 的 nativeHandler 并传递数据
JSBridge.callHandler('nativeHandler', {'message': 'Hello from JS'}, function(response) {
  console.log('Response from Flutter:', response);
});

// 注册一个 JavaScript 函数供 Flutter 调用
JSBridge.registerHandler('jsFunction', function(data, callback) {
  console.log('Received data from Flutter:', data);
  callback('Response from JS');
});

7. 处理 JavaScript 注入

确保在 WebView 加载完成后注入 JavaScript 代码：

_jsBridge.injectJavascript();

8. 处理生命周期

在 dispose 方法中释放资源：

[@override](/user/override)
void dispose() {
  _jsBridge.dispose();
  super.dispose();
}
回到顶部