Flutter功能未明确定义插件flutter_jockey的使用

Flutter功能未明确定义插件flutter_jockey的使用

flutter_jockey 是一个基于 webview_flutter 实现的 webView 通信框架。它允许在 Flutter 和 WebView 中进行双向通信。

开始使用

本项目是一个 Dart 包，可以跨多个 Flutter 或 Dart 项目轻松共享。

对于 Flutter 开发者来说，查看我们的 官方文档，其中提供了教程、示例、移动开发指南和完整的 API 参考。

flutter_jockey 基于 jcokeyJs 协议和 webview_flutter 实现。

示例代码

以下是一个简单的示例，展示了如何使用 flutter_jockey 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter_jockey 示例'),
        ),
        body: JockeyWebView(
          initialUrl: 'file:///android_asset/index.html',  // 设置初始 URL
          jockeyHelper: JockeyHelper(
            jockeyManagerCreated: (manager) => {},  // jockeyManager 创建成功时的回调
            jockeyMap: (jockey) => {  // 注册 jockey 协议
              jockey.on("jockey", (payload, jockeyManager) {  // jockey 回调
                // 处理接收到的数据
                print('从 JavaScript 接收到的数据: $payload');
                // 通过 jockeyManager 调用回调到 js
                jockeyManager.sendData2Js("callJs", {"message": "Hello from Flutter"});
              }),
            },
          ),
          // javascriptMode: JavascriptMode.unrestricted,  // 如果需要，可以取消注释此行以启用 JavaScript
        ),
      ),
    );
  }
}

jockey.js 文件下载

jockey.js 文件可以从 这里 下载，并将其放置在项目的 assets 文件夹中。

assets/index.html 文件示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flutter-Jockey 示例</title>
  <script src="jockey.js"></script>
</head>
<body>
  <h1>Flutter-Jockey 示例页面</h1>
  <button onclick="callFlutter()">调用 Flutter 方法</button>
  <script>
    function callFlutter() {
      jockey.send("jockey", {"message": "Hello from JS"});
    }
  </script>
</body>
</html>

更多关于Flutter功能未明确定义插件flutter_jockey的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter功能未明确定义插件flutter_jockey的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_jockey 是一个用于在 Flutter 应用中实现与原生平台（iOS 和 Android）之间进行双向通信的插件。它允许你在 Flutter 和原生代码之间传递消息和数据，从而实现更复杂的功能，或者使用一些 Flutter 本身不直接支持的原生功能。

主要功能

  1. 双向通信：Flutter 和原生平台之间可以双向发送和接收消息。
  2. 数据类型支持：支持字符串、数字、布尔值、列表、字典等多种数据类型。
  3. 异步操作：通信是异步的，不会阻塞主线程。
  4. 平台特定功能：可以通过原生代码实现一些 Flutter 不直接支持的功能，比如使用特定的硬件功能或系统 API。

使用步骤

  1. 添加依赖： 在你的 pubspec.yaml 文件中添加 flutter_jockey 插件的依赖：

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

  2. 导入插件： 在需要使用 flutter_jockey 的 Dart 文件中导入插件：

    import 'package:flutter_jockey/flutter_jockey.dart';

  3. 发送消息到原生平台： 你可以使用 Jockey.send 方法从 Flutter 发送消息到原生平台：

    Jockey.send(
  "message_name",  // 消息名称
  payload: {"key": "value"},  // 消息负载
).then((response) {
  print("Response from native: $response");
});

  4. 在原生平台接收消息： 在原生平台（iOS 或 Android）中，你需要设置监听器来接收来自 Flutter 的消息，并可以发送响应。

    Android (Kotlin):

    JockeyImpl.getDefault().on("message_name") { payload, completionHandler ->
    // 处理消息
    val value = payload["key"]
    // 发送响应
    completionHandler("response_value")
}

    iOS (Swift):

    Jockey.on("message_name") { payload, completionHandler in
    // 处理消息
    let value = payload["key"] as? String
    // 发送响应
    completionHandler("response_value")
}

  5. 从原生平台发送消息到 Flutter： 在原生平台中，你也可以主动发送消息到 Flutter，并在 Flutter 中接收。

    Android (Kotlin):

    JockeyImpl.getDefault().send("message_name", activity, mapOf("key" to "value"))

    iOS (Swift):

    Jockey.send("message_name", withPayload: ["key": "value"], to: self)

  6. 在 Flutter 中接收消息： 在 Flutter 中，你可以设置监听器来接收来自原生平台的消息：

    Jockey.on("message_name").listen((event) {
  print("Received from native: ${event.payload}");
});
回到顶部