前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter鸿蒙终端一体化—鹊桥相会

Flutter鸿蒙终端一体化—鹊桥相会

作者头像
用户1907613
发布2024-03-18 13:25:55
1590
发布2024-03-18 13:25:55
举报
文章被收录于专栏:Android群英传Android群英传

在鸿蒙中开发Flutter项目,一个最大的问题,就是「不太会写鸿蒙代码」,这对于一个Flutter开发者来说,虽然不是一件很麻烦的事,但由于现在鸿蒙的版本和文档还略有一些混乱,所以要写好还是有一些麻烦的,所以,秉着能用工具解决的问题就不要自己写的原则,我们参考Native的Flutter Channel的实现,也就是pigeon的方式,不熟悉的同学可以参考我之前的文章。

Flutter混编工程之高速公路Pigeon

这套东西在鸿蒙中也有的适配,可以一键生成ets代码,方便我们进行多端复用,项目地址如下。

https://gitee.com/openharmony-sig/flutter_packages/tree/master/packages/pigeon

在鸿蒙中使用也非常简单,指定引用即可,代码如下所示。

代码语言:javascript
复制

yaml
pigeon:
    git:
      url: "https://gitee.com/openharmony-sig/flutter_packages.git"
      path: "packages/pigeon"

pub get之后,参考我们之前的实现,创建一个接口协议文件,这里就用之前的来示例。

代码语言:javascript
复制

dart
import 'package:pigeon/pigeon.dart';

@HostApi()
abstract class NativeNetApi {
  @async
  String getNativeNetBridge(String path, Map<String, Object> params);

  @async
  String postNativeNetBridge(String path, Map<String, Object> params);

  void doActionUrlCall(String actionUrl);
}

接下来执行命令:

代码语言:javascript
复制

shell
flutter pub run pigeon --input lib/native_api.dart --arkts_out lib/native_channel.ets --dart_out lib/native_channel.dart

执行完成后,就会在指定目录下生成我们需要的Channel文件,dart代码我就不贴了,和之前文章中的一样,我们来看下鸿蒙的代码。

代码语言:javascript
复制

arkts
import StandardMessageCodec from '@ohos/flutter_ohos/src/main/ets/plugin/common/StandardMessageCodec';
import BasicMessageChannel, { Reply } from '@ohos/flutter_ohos/src/main/ets/plugin/common/BasicMessageChannel';
import { BinaryMessenger,TaskQueue } from '@ohos/flutter_ohos/src/main/ets/plugin/common/BinaryMessenger';
import MessageCodec from '@ohos/flutter_ohos/src/main/ets/plugin/common/MessageCodec';
import { ByteBuffer } from '@ohos/flutter_ohos/src/main/ets/util/ByteBuffer';


/** Error class for passing custom error details to Flutter via a thrown PlatformException. */
export class FlutterError implements Error {

  /** The error code. */
  public code: string;

  /** The error name. */
  public name: string;

  /** The error message. */
  public message: string;
  /** The error stack. */
  public stack?: string;

  constructor(code: string, name: string,  message: string, stack: string) 
  {
    this.code = code;
    this.name = name;
    this.message = message;
    this.stack = stack;
  }
}

function wrapError(error: Error): Array<Object> {
  let errorList: Array<Object> = new Array<Object>(3);
  if (error instanceof FlutterError) {
    let err: FlutterError = error as FlutterError;
    errorList[0] = err.code;
    errorList[1] = err.name;
    errorList[2] = err.message;
  } else {
    errorList[0] = error.toString();
    errorList[1] = error.name;
    errorList[2] = "Cause: " + error.message + ", Stacktrace: " + error.stack;
  }
  return errorList;
}

export interface Result<T> {
  success( result: T ): void;

  error( error: Error): void;
}
/* Generated abstract class from Pigeon that represents a handler of messages from Flutter.*/
export abstract class NativeNetApi {

  abstract getNativeNetBridge(path: string , params: Map<string, Object> , result: Result<string>): void;

  abstract postNativeNetBridge(path: string , params: Map<string, Object> , result: Result<string>): void;

  abstract doActionUrlCall(actionUrl: string ): void;
  /** The codec used by NativeNetApi. */
  static getCodec(): MessageCodec<Object>{
    return new StandardMessageCodec();
  }
  /*Sets up an instance of `NativeNetApi` to handle messages through the `binaryMessenger`.*/
  static setup(binaryMessenger: BinaryMessenger, api: NativeNetApi | null): void {
    {
      let channel: BasicMessageChannel<Object> =
          new BasicMessageChannel(
              binaryMessenger, "dev.flutter.pigeon.test1.NativeNetApi.getNativeNetBridge", NativeNetApi.getCodec());
      if (api != null) {
        channel.setMessageHandler({
            onMessage(message: Object ,reply: Reply<Object> ) {
              let args: Array<Object> = message as Array<Object>;
              class ResultImp implements Result<string>{
                    success(result: string): void {
                      let res: Array<Object> = [];
                      res.push(result);
                      reply.reply(res);
                    }

                    error(error: Error): void {
                      let wrappedError: Array<Object> = wrapError(error);
                      reply.reply(wrappedError);
                    }
              }
              let resultCallback: Result<string> = new ResultImp();

              api!.getNativeNetBridge(args[0] as string, args[1] as Map<string, Object>, resultCallback);
            } });
      } else {
        channel.setMessageHandler(null);
      }
    }
    {
      let channel: BasicMessageChannel<Object> =
          new BasicMessageChannel(
              binaryMessenger, "dev.flutter.pigeon.test1.NativeNetApi.postNativeNetBridge", NativeNetApi.getCodec());
      if (api != null) {
        channel.setMessageHandler({
            onMessage(message: Object ,reply: Reply<Object> ) {
              let args: Array<Object> = message as Array<Object>;
              class ResultImp implements Result<string>{
                    success(result: string): void {
                      let res: Array<Object> = [];
                      res.push(result);
                      reply.reply(res);
                    }

                    error(error: Error): void {
                      let wrappedError: Array<Object> = wrapError(error);
                      reply.reply(wrappedError);
                    }
              }
              let resultCallback: Result<string> = new ResultImp();

              api!.postNativeNetBridge(args[0] as string, args[1] as Map<string, Object>, resultCallback);
            } });
      } else {
        channel.setMessageHandler(null);
      }
    }
    {
      let channel: BasicMessageChannel<Object> =
          new BasicMessageChannel(
              binaryMessenger, "dev.flutter.pigeon.test1.NativeNetApi.doActionUrlCall", NativeNetApi.getCodec());
      if (api != null) {
        channel.setMessageHandler({
            onMessage(message: Object ,reply: Reply<Object> ) {
              let args: Array<Object> = message as Array<Object>;
              let res: Array<Object> = [];
              try {
                api!.doActionUrlCall(args[0] as string);
                res.push(null);
              }
 catch (error) {
                let wrappedError: Array<Object> = wrapError(error);
                res = wrappedError;
              }
              reply.reply(res);
            } });
      } else {
        channel.setMessageHandler(null);
      }
    }
  }
}

整体代码和Java的代码很类似,阅读基本没什么障碍,使用方式也和Native保持一致,通过调用setup方法,传入接口的实现即可,这里就不赘述了。

这样一来,我们的通信协议就打通了,Flutter的代码基本可以无损迁移,在鸿蒙侧,只需要根据协议实现对应的Channel接口即可,这样就完成了Android、iOS、鸿蒙的UI多端统一,Flutter & 鸿蒙,真香。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2024-03-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 群英传 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档