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

android studio 下载 | 2018-10-11 00:29

10月9日,据美国媒体报道,谷歌将遇到与Facebook一样的情况,Google+存在的安全漏洞允许第三方开发者访问用户资料,这种情况从2015年就出现,但谷歌直到今年三月才发现并修复,而且没有向外界公布。当Google+的用户允许应用访问他们的公开资料时,这个漏洞也会允许应用开发者获取用户及用户朋友的非公开资料。

本篇来自 JarvanMo 的投稿,手把手地教大家实战 flutter。一起来看看!希望大家喜欢。

JarvanMo 的博客地址:

如果你对移动端有所关注,那么你一定会听说过 Flutter。得益于 Google,Flutter 一经推出便得受到了广泛关注。很多开发者跃跃欲试,国内部分大厂,诸如美团、闲鱼等团队已经开始了 Flutter 实践之旅了。笔者也是蹭了一波热度,学习了一下 Flutter。Flutter 虽然真香,但目前社区显然还是很不健全,像微信 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)之间传递,如下图所示:

摘一段官方文档:

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

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

MethodChannel 传递的数据支持什么类型?

Dart 数据类型与 Android,iOS 类型的对应关系是怎样的?

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

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

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

一路 next 就行了。

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

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

lib/src/fluwx_class.dart

android/src/main/kotlin/com/jarvan/fluwx/FluwxPlugin.kt

ios/Classes/FluwxPlugin.m

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

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

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

在 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与原生的桥接工作了,我们继续。

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 传递给了原生,我们要原生代码里进行接收与处理,先看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.error("invalid app id", "are you sure your app id is correct ?", appId)第一个参数是 errorCode(错误代码,虽然叫 Code 但却是一个 String),第二个参数是errorMessage(错误信息),第三个details(详情),这个详情就是错误的具体信息了,当然也可以选择不传。

iOS 对应代码如下:

注意:分享一个小坑,在 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];

原理也一样,在原生代码中,我们也有一个 MethodChannel:

val channel = MethodChannel(registrar.messenger(), "com.jarvanmo/fluwx")FlutterMethodChannel *channel = [FlutterMethodChannel        methodChannelWithName:@"com.jarvanmo/fluwx"               binaryMessenger:[registrar messenger]];当我们拿到了 MethodChannel,我们就可以搞事情了:

_fluwx.response.listen((data) {    //do something    });至此,我们已经完成了微信的注册以及微信回调的回传,剩下的工作是不是可以自己完成啦?

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

创建一个 Flutter Plugin 项目

Flutter 调用原生

原生调用 Flutter

Flutter 调用原生的结果处理,如成功,错误等

github源码下载地址: