Flutter跨平台通信插件vk_bridge的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter跨平台通信插件vk_bridge的使用

VK Bridge

VK Bridge 是一个用于将Flutter VK Mini Apps与iOS、Android和Web的官方VK客户端集成的包。该包是官方VK-Bridge JS包的包装器。

使用方法

初始化

在应用程序启动时,在runApp之前调用VKBridge.instance.init()方法,以确保正确初始化VK Bridge。

import 'package:vk_bridge/vk_bridge.dart';

Future<void> main() async {
  await VKBridge.instance.init();

  runApp(MyApp());
}

修改index.html文件

index.html中添加以下代码片段到Flutter部分之前。

<script src="https://unpkg.com/@vkontakte/vk-bridge@2.5.1/dist/browser.min.js"></script>

<script>
    vkBridge.subscribe((event) => {
        if (window.vkBridgeDartListener != null) {
            window.vkBridgeDartListener(event.detail);
        }
    });
</script>

<script src="main.dart.js" type="application/javascript"></script>

添加日志记录功能

可以使用VKBridge.instance.setLogger()来添加日志记录功能。

class SimpleLogger implements Logger {
  @override
  void d(Object message) {
    print('vk_bridge.d: $message');
  }

  @override
  void e(Object message) {
    print('vk_bridge.e: $message');
  }
}

Future<void> main() async {
  VKBridge.instance.setLogger(SimpleLogger());

  final result = await VKBridge.instance.init();

  print('VKBridge.init: $result');

  runApp(MyApp());
}

示例代码

下面是一个完整的示例demo,展示了如何使用vk_bridge插件。

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

/// Simple logger implementations
class SimpleLogger implements Logger {
  @override
  void d(Object message) {
    print('vk_bridge.d: $message');
  }

  @override
  void e(Object message) {
    print('vk_bridge.e: $message');
  }
}

Future<void> main() async {
  // 设置日志记录器
  VKBridge.instance.setLogger(SimpleLogger());

  // 初始化VK Bridge
  final result = await VKBridge.instance.init();
  print('VKBridge.init: $result');

  // 运行应用
  runApp(MyApp());
}

/// 样例应用
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExamplesPage(),
    );
  }
}

/// 示例页面
class ExamplesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('VK Bridge Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Welcome to VK Bridge Example!'),
            ElevatedButton(
              onPressed: () async {
                // 示例:发送事件给VK客户端
                final response = await VKBridge.instance.send('VKWebAppShow wallPostBox', {
                  "message": "Hello, VK!",
                  "attachment": "",
                });
                print('Response from VK: $response');
              },
              child: Text('Send Message to VK'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,并展示了如何初始化VK Bridge以及如何通过按钮点击事件向VK客户端发送消息。希望这个示例能帮助你更好地理解和使用vk_bridge插件。


更多关于Flutter跨平台通信插件vk_bridge的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter跨平台通信插件vk_bridge的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter中使用vk_bridge插件进行跨平台通信的代码示例。vk_bridge是一个用于Flutter和原生平台(iOS和Android)之间通信的插件。下面将展示如何在Flutter和原生平台之间发送和接收消息。

1. 安装 vk_bridge 插件

首先,你需要在你的Flutter项目中添加vk_bridge依赖。打开你的pubspec.yaml文件,并在dependencies部分添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  vk_bridge: ^最新版本号  # 替换为实际最新版本号

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

2. 在Flutter中初始化vk_bridge

在你的Flutter项目的入口文件(通常是main.dart)中,初始化vk_bridge

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

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

  // 初始化 vk_bridge
  VkBridge.init();
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('vk_bridge Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  // 发送消息到原生平台
                  VkBridge.invokeHandler("sendMessageToNative", {
                    "message": "Hello from Flutter!",
                  });
                },
                child: Text('Send Message to Native'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 在原生平台(iOS 和 Android)中处理消息

iOS

在你的iOS项目中,打开AppDelegate.swift文件,并添加以下代码来处理从Flutter发送的消息:

import UIKit
import Flutter
import vk_bridge

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    
    // 注册消息处理
    VkBridgeHandler.shared.register(handlerName: "sendMessageToNative") { (call) in
      guard let message = call.arguments?["message"] as? String else {
        return
      }
      print("Received message from Flutter: \(message)")
      
      // 可以在这里添加处理逻辑,比如显示一个Alert
      let alert = UIAlertController(title: "Message from Flutter", message: message, preferredStyle: .alert)
      alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
      self.window?.rootViewController?.present(alert, animated: true, completion: nil)
    }
    
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Android

在你的Android项目中,打开MainActivity.kt文件(如果你使用的是Kotlin),并添加以下代码来处理从Flutter发送的消息:

package com.your.package.name

import android.os.Bundle
import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel
import io.flutter.plugins.GeneratedPluginRegistrant

class MainActivity: FlutterActivity() {
    private val CHANNEL = "sendMessageToNative"

    override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        GeneratedPluginRegistrant.registerWith(flutterEngine)

        MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->
            if (call.method == "sendMessageToNative") {
                val message = call.argument<String>("message")
                message?.let {
                    println("Received message from Flutter: $it")
                    
                    // 可以在这里添加处理逻辑,比如显示一个Toast
                    val toast = Toast.makeText(this, "Message from Flutter: $it", Toast.LENGTH_SHORT)
                    toast.show()
                }
            } else {
                result.notImplemented()
            }
        }
    }
}

总结

以上代码展示了如何在Flutter中使用vk_bridge插件与原生平台(iOS和Android)进行通信。在Flutter中发送消息到原生平台,并在原生平台中处理这些消息。根据实际需求,你可以在原生平台中添加更多的处理逻辑。

回到顶部