Flutter桥接插件hylid_bridge的使用

欢迎使用hylid_bridge Flutter插件！此插件作为Hylid Bridge的封装，允许您直接从Flutter应用程序调用miniapp功能。它简化了集成Hylid功能的过程，并提升了您的开发体验。

功能

简单集成Hylid服务。
提供简单的API以调用miniapp功能。
高效且轻量级。

安装

要开始在Flutter项目中使用hylid_bridge，请按照以下步骤操作：

1. 添加依赖项

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

dependencies:
  flutter:
    sdk: flutter
  hylid_bridge: ^0.0.4

运行以下命令以获取新依赖项：

flutter pub get

2. 在Web/index.html中添加脚本

您需要在web/index.html文件中包含Hylid Bridge脚本。在<head>部分添加以下脚本标签：

<script src="https://cdn.marmot-cloud.com/npm/hylid-bridge/2.10.0/index.js"></script>

此脚本启用您Web应用中的Hylid功能。

使用示例

显示警告对话框

alert(
  title: '警告标题',          // 对话框标题
  content: '这是警告的内容。', // 对话框内容
  buttonText: '确认',         // 按钮文本
  success: () {              // 成功回调函数
    // 执行您的逻辑
  },
);

获取授权码

getAuthCode(
  scopes: ["任意范围"], // 范围列表（参阅支付宝文档）
  success: (res) {      // 成功回调函数
    // 执行您的逻辑
  }
);

ionicwang 1楼

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

hylid_bridge 是一个 Flutter 插件，用于在 Flutter 和原生平台（如 Android 和 iOS）之间进行桥接通信。通过这个插件，你可以在 Flutter 中调用原生代码，或者在原生代码中调用 Flutter 代码。以下是如何使用 hylid_bridge 插件的基本步骤：

1. 添加依赖

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

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

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

2. 创建 Flutter 端代码

在 Flutter 中，你可以通过 MethodChannel 来与原生平台进行通信。以下是一个简单的示例：

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

class MyApp extends StatelessWidget {
  // 创建一个 MethodChannel
  static const platform = MethodChannel('com.example.hylid_bridge/example');

  Future<void> _callNativeMethod() async {
    try {
      // 调用原生方法
      final String result = await platform.invokeMethod('nativeMethod', {'key': 'value'});
      print('Result from native: $result');
    } on PlatformException catch (e) {
      print('Failed to invoke native method: ${e.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hylid Bridge Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _callNativeMethod,
            child: Text('Call Native Method'),
          ),
        ),
      ),
    );
  }
}

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

3. 创建 Android 端代码

在 Android 项目中，你需要在 MainActivity 中处理 Flutter 的调用。以下是一个简单的示例：

package com.example.hylid_bridge_example;

import androidx.annotation.NonNull;
import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugin.common.MethodChannel;

public class MainActivity extends FlutterActivity {
    private static final String CHANNEL = "com.example.hylid_bridge/example";

    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);
        new MethodChannel(flutterEngine.getDartExecutor().getBinaryMessenger(), CHANNEL)
                .setMethodCallHandler(
                        (call, result) -> {
                            if (call.method.equals("nativeMethod")) {
                                // 处理 Flutter 的调用
                                String value = call.argument("key");
                                result.success("Hello from Android: " + value);
                            } else {
                                result.notImplemented();
                            }
                        }
                );
    }
}

4. 创建 iOS 端代码

在 iOS 项目中，你需要在 AppDelegate 中处理 Flutter 的调用。以下是一个简单的示例：

import UIKit
import Flutter

[@UIApplicationMain](/user/UIApplicationMain)
[@objc](/user/objc) class AppDelegate: FlutterAppDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
        let channel = FlutterMethodChannel(name: "com.example.hylid_bridge/example",
                                           binaryMessenger: controller.binaryMessenger)
        channel.setMethodCallHandler({
            (call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
            if call.method == "nativeMethod" {
                // 处理 Flutter 的调用
                let value = call.arguments as? [String: Any]
                let key = value?["key"] as? String ?? ""
                result("Hello from iOS: " + key)
            } else {
                result(FlutterMethodNotImplemented)
            }
        })
        
        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}