Flutter实战:手把手教你写Flutter Plugin

前言

如果你对移动端有所关注,那么你一定会听说过Flutter。得益于GoogleFlutter一经推出便得受到了广泛关注。很多开发者跃跃欲试,国内部分大厂,诸如美团、闲鱼等团队已经开始了Flutter实践之旅了。笔者也是蹭了一波热度,学习了一下FlutterFlutter虽然真香,但目前社区显然还是很不健全,像微信SDK、支付宝等第三方SDK都无法在Flutter项目上直接使用。想要使用这些SDK就曲线救国了。 本文并不探讨如何发布一个Flutter Plugin,只谈如何实现Plugin。下面我将以我的开源项目fluwx为例,手把手教你如何写Flutter Plugin

在2018年GDD上,Flutter分会场演示代码就用到了Fluwx.详情可以戳这里

什么是Flutter Plugin

Flutter Plugin是一种特殊的包,一个插件包含一个用Dart编写的API定义,结合Android和iOS的平台特定实现,从而达到二者兼容。 平常我们使用插件可以到这个网站去搜索。

如何与原生进行通信?

消息通过platform channels在客户端(UI)和主机(platform)之间传递,如下图所示:

通信机制.png

摘一段官方文档:

在客户端,MethodChannel(API)允许发送与方法调用相对应的消息。 在平台方 面,Android(API)上的MethodChannel和iOS(API)上的FlutterMethodChannel启用接收方法调用并发回结果。 这些类允许您使用非常少的“样板”代码开发平台插件。

所谓的客户端是指Flutter层,而平台层面则是对应Android或者iOS。至于究竟怎么使用MethodChannel,我先卖个关子,后面会具体提到。 既然涉及到了Flutter与Android和iOS的通信问题,那么我们一定会有以下几个疑问:

  • MethodChannel传递的数据支持什么类型?
  • Dart数据类型与Android,iOS类型的对应关系是怎样的?

这两个问题的答案同样来自官方文档:

Dart

Android

iOS

null

null

nil (NSNull when nested)

bool

java.lang.Boolean

NSNumber numberWithBool:

int

java.lang.Integer

NSNumber numberWithInt:

int if 32 bits not enough

java.lang.Long

NSNumber numberWithLong:

double

java.lang.Double

NSNumber numberWithDouble:

String

java.lang.String

NSString

Uint8List

byte[]

FlutterStandardTypedData typedDataWithBytes:

Int32List

int[]

FlutterStandardTypedData typedDataWithInt32:

Int64List

long[]

FlutterStandardTypedData typedDataWithInt64:

Float64List

double[]

FlutterStandardTypedData typedDataWithFloat64:

List

java.util.ArrayList

NSArray

Map

java.util.HashMap

NSDictionary

至此,我们对Flutter插件有了一个简单了解,下面我们将亲自动手写一个插件。

创建一个Flutter Plugin项目

Android Studio为例(vscode请用命令行):

image.png

image.png

一路next就行了。 一个Flutter Plugin就创建成功了,项目结构是这样的:

image.png

我们着重看一下以下三个文件:

  • lib/src/fluwx_class.dart
  • android/src/main/kotlin/com/jarvan/fluwx/FluwxPlugin.kt
  • ios/Classes/FluwxPlugin.m

下面我会继续以Fluwx为例逐一讲解每个参数的意义。

MethodChannel的定义

首先,打开lib/src/fluwx_class.dart,我们会发现如下代码:

final MethodChannel _channel = const MethodChannel('com.jarvanmo/fluwx');

重点来了,我们要实现FlutteriOSAndroid的交互就是通过这个MethodChannelMethodChannel就是我们的信使,负责dart和原生代码通信。com.jarvanmo/fluwxMethodChannel的名字,flutter通过一个具体的名字能才够在对应平台上找到对应的MethodChannel,从而实现flutter与平台的交互。同样地,我们在对应的平台上也要注册名为com.jarvanmo/fluwxMethodChannel。 在Android上是这样的:

class FluwxPlugin() : MethodCallHandler {
    companion object {
        @JvmStatic
        fun registerWith(registrar: Registrar): Unit {
            val channel = MethodChannel(registrar.messenger(), "com.jarvanmo/fluwx")
            channel.setMethodCallHandler(FluwxPlugin())
        }
    }
}

再看iOS端:

@implementation FluwxPlugin
+ (void)registerWithRegistrar:(NSObject <FlutterPluginRegistrar> *)registrar {
    FlutterMethodChannel *channel = [FlutterMethodChannel
            methodChannelWithName:@"com.jarvanmo/fluwx"
                  binaryMessenger:[registrar messenger]];
    [registrar addMethodCallDelegate:instance channel:channel];
}
@end

通过上面几个步骤,我们已经完成了Flutter与原生的桥接工作了,我们继续。

Flutter调用原生并传递数据

只建立桥接显然是不能够满足我们的需求,我们要通过Flutter将数据传递到android和iOS上,进而完成微信的注册。上面我们提供到了MethodChannel支持的数据类型及其对应关系,下面我们要在Flutter传递一组数据(Map):

  static Future register(
      {String appId,
      bool doOnIOS: true,
      doOnAndroid: true,
      enableMTA: false}) async {
    return await _channel.invokeMethod("registerApp", {
      "appId": appId,
      "iOS": doOnIOS,
      "android": doOnAndroid,
      "enableMTA": enableMTA
    });
  }

register函数的作用是注册微信,其参数的具体意义不作解释。由示例代码可以看到,我们将传进来的参数重新组装成了Map并传递给了invokeMethod。其中invokeMethod函数第一个参数为函数名称,即registerApp,我们将在原生平台用到这个名字。第二个参数为要传递给原生的数据。我们看一下invokeMethod的源码:

Future<dynamic> invokeMethod(String method, [dynamic arguments]) async {
//some code
}

很有趣的是,第二个参数是dynamic的,那么我们是否可以传递任何数据类型呢?至少语法上是没有错误的,但实际上这是不允许的,只有对应平台的codec支持的类型才能进行传递,也就是上文提到的数据类型对应表,这条规则同样适用于返回值,也就是原生给Flutter传值。请记住这条规定,不再做赘述。

如何在原生接收Flutter传递过来的数据?

上面我们将数据通过Flutter传递给了原生,我们要原生代码里进行接收与处理,先看Android的代码:

   override fun onMethodCall(call: MethodCall, result: Result): Unit {
        if (call.method == "registerApp") {
            WXAPiHandler.registerApp(call, result)
            return
        }
}

call.method是方法名称,我们要通过方法名称比对完成调用匹配。当call.method == "registerApp"成立时,说明我们要调用registerApp,从而进行更多的操作。此时可能会有同学问,如发现call.method不存在怎么办?很简单,我们可以通过result向Flutter报告一下该方法没实现:

result.notImplemented()

当调用这个方法之后,我们会在Flutter层收到一个没实现该方法的异常。 iOS端也是大同小异的:

- (void)handleMethodCall:(FlutterMethodCall *)call result:(FlutterResult)result {
    if ([@"registerApp" isEqualToString:call.method]) {
        [_fluwxWXApiHandler registerApp:call result:result];
        return;
    }
}

如果方法不存在:

result(FlutterMethodNotImplemented);

通过以上步骤我们已经能够接收到Flutter的调用了,但是我们的任务还没完成,因为还没取到我们想要的数据。参数call携带了由Flutter传递过来的数据,在Android中其数据放在call.arguments,其类型为java.lang.Object,与Flutter传递过来数据类型一一对应。如果数据类型是Map,我们可以通过以下方式取出对应值:

val appId: String? = call.argument("appId")

iOS同理:

 NSString *appId = call.arguments[@"appId"];

当我们取到了appId以后,我们就可以进行微信注册了,这里不做叙述。 到这里,我们已经可以完成Flutter调用原生并接收数据,从而完成微信注册。但这样做并不能让我们满意,原因有2个:

  • 如何告诉Flutter我们的处理结果?
  • 用户总是调皮的,如appId是一个空字符串,如何让Flutterr抛出一个异常? 对于这2个问题,我们早就发现在接收Flutter调用的时候会传递一个名字result的参数,通过result我们可以向Flutter打小报告,小报告的有三种形式:
  • success,成功
  • error,遇到错误
  • notImplemented,没实现对应方法 其中notImplemented,已经说过了。而success故名思义,就是处理成功,可以回调一些数据,也可以不回传,调用非常简单:
 result.success(mapOf(
                WechatPluginKeys.PLATFORM to WechatPluginKeys.ANDROID,
                WechatPluginKeys.RESULT to registered
        ))
 result(@{fluwxKeyPlatform: fluwxKeyIOS, fluwxKeyResult: @(isWeChatRegistered)});

error见名思义,报告错误,当我们遇到了一些异常需要回调给Flutter时,这个方法就很有用了。调用这个方法会使Futter抛出一个异常。先看一下在Android上是怎么调用的:

result.error("invalid app id", "are you sure your app id is correct ?", appId)

第一个参数是errorCode(错误代码,虽然叫Code但却是一个String),第二个参数是errorMessage(错误信息),第三个details(详情),这个详情就是错误的具体信息了,当然也可以选择不传。 iOS对应代码如下:

result([FlutterError errorWithCode:@"invalid app id" message:@"are you sure your app id is correct ? " details:appId]);

到目前为止,我们已经完成了一半工作,已经完成了通过Flutter实现微信注册,但我们的工作永不止如此,我们还要完成通过原生调用Flutter,从而实现分享,支付等的回调。

注意:分享一个小坑,在iOS上,空指针有可能是nil或者NSNull,坑就在这。如果Flutter传来的String是null,那么在oc中对应的是NSNull,但微信SDK的参数可以为nil,却不能为NSNull。

    WXMediaMessage *message = [WXMediaMessage messageWithTitle:(title == (id) [NSNull null]) ? nil : title
                                                   Description:(description == (id) [NSNull null]) ? nil : description
                                                        Object:ext
                                                    MessageExt:(messageExt == (id) [NSNull null]) ? nil : messageExt
                                                 MessageAction:(messageAction == (id) [NSNull null]) ? nil : messageAction
                                                    ThumbImage:thumbImage
                                                      MediaTag:(tagName == (id) [NSNull null]) ? nil : tagName];

原生如何调用Flutter

当我们完成分享时,我们可能需要将分享结果传回Flutter。有同学可能会说,上面我们已经学习了ResultFlutterResult),可以通过result实现啊。但微信的这些回调是异步的,我们也不能够长期持有Result对象,所以这个时候我们要在原生中调用Flutter。 原理也一样,在原生代码中,我们也有一个MethodChannel

 val channel = MethodChannel(registrar.messenger(), "com.jarvanmo/fluwx")
    FlutterMethodChannel *channel = [FlutterMethodChannel
            methodChannelWithName:@"com.jarvanmo/fluwx"
                  binaryMessenger:[registrar messenger]];

当我们拿到了MethodChannel,我们就可以搞事情了:

      val result = mapOf(
                errStr to response.errStr,
                WechatPluginKeys.TRANSACTION to response.transaction,
                type to response.type,
                errCode to response.errCode,
                openId to response.openId,
                WechatPluginKeys.PLATFORM to WechatPluginKeys.ANDROID
        )

    channel?.invokeMethod("onShareResponse", result)
        NSDictionary *result = @{
                description: messageResp.description == nil ?@"":messageResp.description,
                errStr: messageResp.errStr == nil ? @"":messageResp.errStr,
                errCode: @(messageResp.errCode),
                type: messageResp.type == nil ? @2 :@(messageResp.type),
                country: messageResp.country== nil ? @"":messageResp.country,
                lang: messageResp.lang  == nil ? @"":messageResp.lang,
                fluwxKeyPlatform: fluwxKeyIOS
        };
        [methodChannel invokeMethod:@"onShareResponse" arguments:result];

原生调用Flutter和Flutter调用原生的方式其实是一样的,都是通过MethodChannel调用指定名称的方法,并传递数据。那么,Flutter的接受原生调用的方式和原生接收Flutter调用的方式应该也是样的:

final MethodChannel _channel = const MethodChannel('com.jarvanmo/fluwx')
  ..setMethodCallHandler(_handler);

Future<dynamic> _handler(MethodCall methodCall) {
  if ("onShareResponse" == methodCall.method) {
    _responseController
        .add(WeChatResponse(methodCall.arguments, WeChatResponseType.SHARE));
  } 
  return Future.value(true);
}

稍微不一样的地方就是,在Flutter中,我们使用到了Stream:

StreamController<WeChatResponse> _responseController =
    new StreamController.broadcast();
 Stream<WeChatResponse> get response => _responseController.stream;

当然了不使用Stream也可以。通过Stream,我们可以更轻松地监听回调数据变化:

 _fluwx.response.listen((data) {
    //do something
    });

至此,我们已经完成了微信的注册以及微信回调的回传,剩下的工作是不是可以自己完成啦?

总结

通过本文的学习,我们已经了解了如何亲手编写一个Flutter插件,并且至少掌握以下几点:

  • 创建一个Flutter Plugin项目
  • Flutter调用原生
  • 原生调用Flutter
  • Flutter调用原生的结果处理,如成功,错误等

最后

附上Fluwx。同时,OpenFlutter欢迎各位开源爱好者分享自己的作品,邮箱:jarvan.mo@gmail.com。 版本所有,转载请注明出处

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏calvin

centos7 lldb 调试netcore应用的内存泄漏和死循环示例(dump文件调试)

lldb工具的安装,linux下netcore如何生成dump文件,查看下文 centos7使用lldb调试netcore应用转储dump文件

2083
来自专栏SHERlocked93的前端小站

JS 状态模式

状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类。 其实就是用一个对象或者数组记录一组状态,每个状态对应一个实现...

2324
来自专栏腾讯Bugly的专栏

小萝莉说Crash(一):Unrecognized selector sent to instance xxxx

大家好,我是来自Bugly Crash实验室的小萝莉(害羞ing),很高兴能和大家一起讨论关于移动终端App的Crash问题及解决方法。 在上次的“精神哥讲Cr...

7694
来自专栏信安之路

【作者投稿】一道反序列化CTF引起的思考

刚开始看到这道题目,我是懵逼的。因为整篇代码没有数据输入口,然后怀疑有其它机关,抓包、扫目录无果之后,找到了一篇writeup如下:

930
来自专栏JackeyGao的博客

Python 和 Golang 一点愚见

Python 之所以有很好开发效率是因为语法简单,灵活。有大量的轮子可供选择, 文档支持非常棒。 我用Python编程的时候,基本成了一把梭“拿起键盘复制粘贴,...

1192
来自专栏偏前端工程师的驿站

JS读书心得:《JavaScript框架设计》——第12章 异步处理

一、何为异步                                 执行任务的过程可以被分为发起和执行两个部分。 同步执行模式:任务发起后必须等待直...

2097
来自专栏牛肉圆粉不加葱

Spark 内存管理的前世今生(下)

在《Spark 内存管理的前世今生(上)》中,我们介绍了 UnifiedMemoryManager 是如何管理内存的。然而,UnifiedMemoryManag...

1022
来自专栏超然的博客

JSON 和 JSONP 两兄弟

  但说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?

1173
来自专栏叁金大数据

自学Python五 爬虫基础练习之SmartQQ协议

  BAT站在中国互联网的顶端,引导着中国互联网的发展走向。。。既受到了多数程序员的关注,也在被我们所惦记着。。。

2223
来自专栏互扯程序

毕业季,跳槽季,不刷点面试题怎么能行?

现在是资源共享的时代,同样也是知识分享的时代,如果你觉得本文能学到知识,请把知识与别人分享。 前言 马上就是一年一度的毕业季 跳槽季,找工作三大要素,简...

3485

扫码关注云+社区