Flutter原生交互插件ds_bridge的使用

Flutter原生交互插件ds_bridge的使用

此包是 flutter_webview_plugin webview与网页交互的工具包。由于 flutter_webview_plugin 已不再维护，推荐使用 webview_flutter 和对应的 ds_bridge_webview。

配置依赖包

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

dependencies:
  ds_bridge: ^0.0.3

示例

在webview页面添加JavaScript通道

首先，在你的 Dart 文件中创建一个 WebviewPage 类，并在其中添加 JavaScript 通道。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:yundk_app/routes/application.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.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 = '';
  final flutterWebViewPlugin = FlutterWebviewPlugin();
  final Set<JavascriptChannel> jsChannels = [
    JavascriptChannel(
        name: 'DsBridgeApp',
        onMessageReceived: (JavascriptMessage msg) {
          String jsonStr = msg.message;
          JsBridgeUtil.executeMethod(FlutterWebviewPlugin(), jsonStr);
        }),
  ].toSet();

  StreamSubscription<String> _onUrlChanged;

  @override
  void initState() {
    super.initState();
    flutterWebViewPlugin.close();

    // 监听 URL 改变
    _onUrlChanged =
        flutterWebViewPlugin.onUrlChanged.listen((String url) async {});

    // 监听页面加载完成
    flutterWebViewPlugin.onStateChanged.listen((viewState) async {
      if (viewState.type == WebViewState.finishLoad) {
        flutterWebViewPlugin.evalJavascript('document.title').then((result) => {
          setState(() {
            _title = result;
          })
        });
      }
    });

    super.initState();
  }

  @override
  void dispose() {
    _onUrlChanged.cancel();
    flutterWebViewPlugin.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebviewScaffold(
        appBar: AppBar(
          leading: IconButton(
            hoverColor: Colors.transparent,
            highlightColor: Colors.transparent,
            icon: Icon(const IconData(0xe61b, fontFamily: 'IconFont'), color: Color(0xff333333), size: 18),
            onPressed: () {
              flutterWebViewPlugin.close();
              Application.router.pop(context);
            },
          ),
          title: Text(
            _title,
            style: TextStyle(color: Color(0xff333333), fontSize: 17),
          ),
          actions: [
            IconButton(
              icon: Icon(
                Icons.refresh_outlined,
                color: Color(0xff333333),
                size: 20
              ),
              onPressed: () {
                flutterWebViewPlugin.reload();
              }
            ),
          ],
          centerTitle: true,
          elevation: 0,
        ),
        url: widget.url,
        javascriptChannels: jsChannels,
        mediaPlaybackRequiresUserGesture: false,
        withZoom: true,
        withLocalStorage: true,
        hidden: true,
      )
    );
  }
}

在JsBridgeUtil类中实现方法调用

在 JsBridgeUtil.dart 文件中实现与 JavaScript 的通信。

import 'package:ds_bridge/ds_bridge.dart';

class JsBridgeUtil {
  // 向H5调用接口
  static executeMethod(FlutterWebviewPlugin 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原生交互插件ds_bridge的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


ds_bridge 是一个用于 Flutter 和原生平台（如 Android 和 iOS）之间进行交互的插件。它允许 Flutter 应用调用原生代码，并且原生代码也可以调用 Flutter 代码，从而实现双向通信。

安装 ds_bridge

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

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

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

基本用法

1. Flutter 调用原生代码

在 Flutter 中，你可以使用 DsBridge 来调用原生方法。

import 'package:ds_bridge/ds_bridge.dart';

void callNativeMethod() async {
  var result = await DsBridge.callNative('nativeMethodName', {'param1': 'value1', 'param2': 'value2'});
  print('Native method result: $result');
}

2. 原生代码调用 Flutter 方法

在原生代码中，你可以通过 DsBridge 调用 Flutter 方法。

Android:

import com.dsbridge.DsBridge;

public class MainActivity extends FlutterActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        DsBridge.registerHandler("flutterMethodName", new DsBridge.DsBridgeHandler() {
            @Override
            public void handler(Object data, DsBridge.CompletionHandler completionHandler) {
                // 处理逻辑
                completionHandler.complete("Response from Flutter");
            }
        });
    }
}

iOS:

#import <ds_bridge/ds_bridge-Swift.h>

- (void)viewDidLoad {
    [super viewDidLoad];
    [DsBridge registerHandler:@"flutterMethodName" handler:^(id data, DsBridgeCompletionHandler completionHandler) {
        // 处理逻辑
        completionHandler(@"Response from Flutter");
    }];
}

3. Flutter 注册方法供原生调用

在 Flutter 中，你可以注册方法供原生代码调用。

import 'package:ds_bridge/ds_bridge.dart';

void registerFlutterMethod() {
  DsBridge.registerHandler('flutterMethodName', (data) {
    print('Flutter method called with data: $data');
    return 'Response from Flutter';
  });
}
回到顶部