Flutter WebView桥接插件ds_bridge_webview的使用

Flutter WebView桥接插件ds_bridge_webview的使用

说明

此包是webview_flutter插件的扩展，用于实现WebView与网页之间的交互。

配置依赖包

在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  ds_bridge_webview: ^0.0.1

示例

在webview页面添加JavaScript通道

首先创建一个名为webview.dart的文件，并添加以下代码：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import '../../routes/application.dart';
import '../../utils/JsBridgeUtil.dart';

class WebviewPage extends StatefulWidget {
  final String url;
  final VoidCallback backCallback;

  WebviewPage({
    Key key,
    @required this.url,
    this.backCallback,
  }) : super(key: key);

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

class _WebviewPageState extends State<WebviewPage> {
  String _title = 'ds_bridge';
  WebViewController _webViewController;

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

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          hoverColor: Colors.transparent,
          highlightColor: Colors.transparent,
          icon: Icon(const IconData(0xe61b, fontFamily: 'IconFont'), color: Color(0xff333333), size: 18),
          onPressed: () => Application.router.pop(context),
        ),
        title: new Text(
          '$_title',
          style: TextStyle(color: Color(0xff333333), fontSize: 17),
        ),
        backgroundColor: Color(0xffffffff),
        shadowColor: Colors.transparent,
        centerTitle: true,
        actions: [
          FutureBuilder<WebViewController>(
            builder: (BuildContext context, AsyncSnapshot<WebViewController> controller) {
              return IconButton(
                onPressed: () {
                  reloadWebView();
                },
                icon: new Icon(
                  Icons.refresh_outlined,
                  color: Color(0xff333333),
                  size: 20
                )
              );
            }
          ),
        ],
      ),
      body: WebView(
        onWebViewCreated: (controller) {
          _webViewController = controller;
        },
        initialUrl: widget.url,
        javascriptMode: JavascriptMode.unrestricted,
        javascriptChannels: <JavascriptChannel>{
          _javascriptChannel(context),
          _javascriptChannel2(context),
        },
        onPageStarted: (String url) {
          if (url.startsWith("mailto") || url.startsWith("tel") || url.startsWith("http") || url.startsWith("https")) {
          } else {
            _webViewController.goBack();
          }
        },
        onPageFinished: (controller) {
          // 获取页面标题
          setState(() {
            _title = _webViewController.getTitle() as String;
          });
        },
      )
    );
  }

  // js桥通道
  JavascriptChannel _javascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'DsBridgeApp',
        onMessageReceived: (JavascriptMessage message) {
          String jsonStr = message.message;
          JsBridgeUtil.executeMethod(_webViewController, jsonStr);
        });
  }

  // js alert通道
  JavascriptChannel _javascriptChannel2(BuildContext context) {
    return JavascriptChannel(
        name: 'Alert',
        onMessageReceived: (JavascriptMessage message) {
          String jsonStr = message.message;
          _showMyDialog(context, jsonStr);
        });
  }

  void reloadWebView() {
    _webViewController?.reload();
  }
}

在JsBridgeUtil类中

创建一个名为JsBridgeUtil.dart的文件，并添加以下代码：

import 'package:ds_bridge_webview/ds_bridge_webview.dart';

class JsBridgeUtil {
  // 向H5调用接口
  static executeMethod(flutterWebViewPlugin, String jsonStr) async{
    DsBridge dsBridge = DsBridge(flutterWebViewPlugin);
    Result result = dsBridge.dispatch(jsonStr);
    if(result.method == 'share'){
      result.callBack('收到网页端share事件，内容为${result.data}并返回此文本给网页');
    }
    if(result.method == 'share1'){
      result.callBack('收到网页端share1事件');
    }
  }
}

更多关于Flutter WebView桥接插件ds_bridge_webview的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


ds_bridge_webview 是一个用于在 Flutter 中实现 WebView 与原生代码桥接的插件。它允许你在 WebView 中运行的 JavaScript 代码与 Flutter 原生代码进行双向通信。以下是如何使用 ds_bridge_webview 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 ds_bridge_webview 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  ds_bridge_webview: ^版本号

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

2. 导入包

在你的 Dart 文件中导入 ds_bridge_webview 包。

import 'package:ds_bridge_webview/ds_bridge_webview.dart';

3. 创建 WebView

使用 DSBridgeWebView 组件来创建一个 WebView，并指定要加载的 URL 或 HTML 内容。

class MyWebView extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Example'),
      ),
      body: DSBridgeWebView(
        initialUrl: 'https://example.com',
        onWebViewCreated: (controller) {
          // WebView 创建完成后的回调
        },
      ),
    );
  }
}

4. 注册 JavaScript 方法

你可以在 Flutter 中注册 JavaScript 方法，供 WebView 中的 JavaScript 调用。

DSBridgeWebViewController? _webViewController;

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('WebView Example'),
    ),
    body: DSBridgeWebView(
      initialUrl: 'https://example.com',
      onWebViewCreated: (controller) {
        _webViewController = controller;
        // 注册名为 'nativeMethod' 的方法
        _webViewController?.registerHandler('nativeMethod', (data) {
          print('Received data from JavaScript: $data');
          return 'Response from Flutter';
        });
      },
    ),
  );
}

5. 在 JavaScript 中调用 Flutter 方法

在 WebView 中运行的 JavaScript 可以通过 dsBridge.call('nativeMethod', data) 来调用 Flutter 中注册的方法。

dsBridge.call('nativeMethod', { key: 'value' }, function(response) {
    console.log('Response from Flutter:', response);
});

6. 在 Flutter 中调用 JavaScript 方法

你也可以在 Flutter 中调用 WebView 中的 JavaScript 方法。

_webViewController?.callHandler('jsMethod', {'key': 'value'}).then((response) {
  print('Response from JavaScript: $response');
});

7. 处理 WebView 的生命周期

你可以通过 DSBridgeWebViewController 来处理 WebView 的生命周期事件，例如页面加载完成、页面开始加载等。

_webViewController?.onPageFinished = (url) {
  print('Page finished loading: $url');
};

8. 处理 JavaScript 返回值

当你在 Flutter 中调用 JavaScript 方法时，可以通过 then 方法来处理返回的值。

_webViewController?.callHandler('jsMethod', {'key': 'value'}).then((response) {
  print('Response from JavaScript: $response');
});

9. 销毁 WebView

当不再需要 WebView 时，确保销毁它以释放资源。

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