*本篇文章已授權(quán)微信公眾號 guolin_blog （郭霖）獨(dú)家發(fā)布

全方位了解Flutter Platforms

前言

如果你對移動端有所關(guān)注元旬，那么你一定會聽說過Flutter。得益于Google预茄，Flutter一經(jīng)推出便得受到了廣泛關(guān)注铃将。很多開發(fā)者躍躍欲試项鬼，國內(nèi)部分大廠，諸如美團(tuán)劲阎、閑魚等團(tuán)隊(duì)已經(jīng)開始了Flutter實(shí)踐之旅了绘盟。筆者也是蹭了一波熱度，學(xué)習(xí)了一下Flutter悯仙。Flutter雖然真香龄毡，但目前社區(qū)顯然還是很不健全，像微信SDK锡垄、支付寶等第三方SDK都無法在Flutter項(xiàng)目上直接使用沦零。想要使用這些SDK就曲線救國了。
本文并不探討如何發(fā)布一個Flutter Plugin货岭，只談如何實(shí)現(xiàn)Plugin路操。下面我將以我的開源項(xiàng)目fluwx為例疾渴，手把手教你如何寫Flutter Plugin。

在2018年GDD上屯仗，Flutter分會場演示代碼就用到了Fluwx.詳情可以戳這里搞坝。

什么是Flutter Plugin

Flutter Plugin是一種特殊的包，一個插件包含一個用Dart編寫的API定義祭钉，結(jié)合Android和iOS的平臺特定實(shí)現(xiàn)瞄沙，從而達(dá)到二者兼容。
平常我們使用插件可以到這個網(wǎng)站去搜索慌核。

如何與原生進(jìn)行通信？

消息通過platform channels在客戶端（UI）和主機(jī)（platform）之間傳遞申尼，如下圖所示：

通信機(jī)制.png

在客戶端垮卓，MethodChannel(API)允許發(fā)送與方法調(diào)用相對應(yīng)的消息。 在平臺方 面师幕，Android(API)上的MethodChannel和iOS(API)上的FlutterMethodChannel啟用接收方法調(diào)用并發(fā)回結(jié)果粟按。 這些類允許您使用非常少的“樣板”代碼開發(fā)平臺插件。

所謂的客戶端是指Flutter層霹粥，而平臺層面則是對應(yīng)Android或者iOS灭将。至于究竟怎么使用MethodChannel，我先賣個關(guān)子后控，后面會具體提到庙曙。
既然涉及到了Flutter與Android和iOS的通信問題，那么我們一定會有以下幾個疑問：

• MethodChannel傳遞的數(shù)據(jù)支持什么類型浩淘？
• Dart數(shù)據(jù)類型與Android捌朴，iOS類型的對應(yīng)關(guān)系是怎樣的？

這兩個問題的答案同樣來自官方文檔：

至此张抄，我們對Flutter插件有了一個簡單了解砂蔽，下面我們將親自動手寫一個插件。

創(chuàng)建一個Flutter Plugin項(xiàng)目

以Android Studio為例（vscode請用命令行）：

image.png

image.png

一路next就行了署惯。
一個Flutter Plugin就創(chuàng)建成功了左驾，項(xiàng)目結(jié)構(gòu)是這樣的：

image.png

我們著重看一下以下三個文件：

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

下面我會繼續(xù)以Fluwx為例逐一講解每個參數(shù)的意義。

MethodChannel的定義

首先极谊，打開lib/src/fluwx_class.dart诡右，我們會發(fā)現(xiàn)如下代碼：

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

重點(diǎn)來了，我們要實(shí)現(xiàn)Flutter與iOS和Android的交互就是通過這個MethodChannel怀酷。MethodChannel就是我們的信使稻爬，負(fù)責(zé)dart和原生代碼通信。com.jarvanmo/fluwx是MethodChannel的名字蜕依，flutter通過一個具體的名字能才夠在對應(yīng)平臺上找到對應(yīng)的MethodChannel桅锄，從而實(shí)現(xiàn)flutter與平臺的交互琉雳。同樣地，我們在對應(yīng)的平臺上也要注冊名為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

通過上面幾個步驟翠肘，我們已經(jīng)完成了Flutter與原生的橋接工作了，我們繼續(xù)辫秧。

Flutter調(diào)用原生并傳遞數(shù)據(jù)

只建立橋接顯然是不能夠滿足我們的需求束倍，我們要通過Flutter將數(shù)據(jù)傳遞到android和iOS上，進(jìn)而完成微信的注冊盟戏。上面我們提供到了MethodChannel支持的數(shù)據(jù)類型及其對應(yīng)關(guān)系绪妹，下面我們要在Flutter傳遞一組數(shù)據(jù)(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函數(shù)的作用是注冊微信，其參數(shù)的具體意義不作解釋柿究。由示例代碼可以看到邮旷，我們將傳進(jìn)來的參數(shù)重新組裝成了Map并傳遞給了invokeMethod。其中invokeMethod函數(shù)第一個參數(shù)為函數(shù)名稱蝇摸，即registerApp婶肩，我們將在原生平臺用到這個名字。第二個參數(shù)為要傳遞給原生的數(shù)據(jù)貌夕。我們看一下invokeMethod的源碼：

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

很有趣的是律歼，第二個參數(shù)是dynamic的，那么我們是否可以傳遞任何數(shù)據(jù)類型呢啡专？至少語法上是沒有錯誤的险毁，但實(shí)際上這是不允許的，只有對應(yīng)平臺的codec支持的類型才能進(jìn)行傳遞植旧，也就是上文提到的數(shù)據(jù)類型對應(yīng)表辱揭，這條規(guī)則同樣適用于返回值，也就是原生給Flutter傳值病附。請記住這條規(guī)定问窃，不再做贅述。

如何在原生接收Flutter傳遞過來的數(shù)據(jù)完沪？

上面我們將數(shù)據(jù)通過Flutter傳遞給了原生域庇，我們要原生代碼里進(jìn)行接收與處理，先看Android的代碼：

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

call.method是方法名稱覆积，我們要通過方法名稱比對完成調(diào)用匹配听皿。當(dāng)call.method == "registerApp"成立時，說明我們要調(diào)用registerApp宽档，從而進(jìn)行更多的操作尉姨。此時可能會有同學(xué)問，如發(fā)現(xiàn)call.method不存在怎么辦吗冤？很簡單又厉，我們可以通過result向Flutter報告一下該方法沒實(shí)現(xiàn)：

result.notImplemented()

當(dāng)調(diào)用這個方法之后九府，我們會在Flutter層收到一個沒實(shí)現(xiàn)該方法的異常。
iOS端也是大同小異的：

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

如果方法不存在：

result(FlutterMethodNotImplemented);

通過以上步驟我們已經(jīng)能夠接收到Flutter的調(diào)用了覆致，但是我們的任務(wù)還沒完成侄旬，因?yàn)檫€沒取到我們想要的數(shù)據(jù)。參數(shù)call攜帶了由Flutter傳遞過來的數(shù)據(jù)煌妈，在Android中其數(shù)據(jù)放在call.arguments儡羔，其類型為java.lang.Object，與Flutter傳遞過來數(shù)據(jù)類型一一對應(yīng)璧诵。如果數(shù)據(jù)類型是Map汰蜘，我們可以通過以下方式取出對應(yīng)值：

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

iOS同理：

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

當(dāng)我們?nèi)〉搅?em>appId以后，我們就可以進(jìn)行微信注冊了腮猖，這里不做敘述鉴扫。
到這里，我們已經(jīng)可以完成Flutter調(diào)用原生并接收數(shù)據(jù)澈缺，從而完成微信注冊。但這樣做并不能讓我們滿意炕婶，原因有2個：

• 如何告訴Flutter我們的處理結(jié)果姐赡？
• 用戶總是調(diào)皮的，如appId是一個空字符串柠掂，如何讓Flutterr拋出一個異常项滑？
  對于這2個問題，我們早就發(fā)現(xiàn)在接收Flutter調(diào)用的時候會傳遞一個名字result的參數(shù)涯贞，通過result我們可以向Flutter打小報告枪狂，小報告的有三種形式：
• success，成功
• error,遇到錯誤
• notImplemented,沒實(shí)現(xiàn)對應(yīng)方法
  其中notImplemented宋渔，已經(jīng)說過了州疾。而success故名思義，就是處理成功皇拣，可以回調(diào)一些數(shù)據(jù)严蓖，也可以不回傳，調(diào)用非常簡單：

 result.success(mapOf(
                WechatPluginKeys.PLATFORM to WechatPluginKeys.ANDROID,
                WechatPluginKeys.RESULT to registered
        ))

 result(@{fluwxKeyPlatform: fluwxKeyIOS, fluwxKeyResult: @(isWeChatRegistered)});

error見名思義氧急，報告錯誤颗胡，當(dāng)我們遇到了一些異常需要回調(diào)給Flutter時，這個方法就很有用了吩坝。調(diào)用這個方法會使Futter拋出一個異常毒姨。先看一下在Android上是怎么調(diào)用的：

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

第一個參數(shù)是errorCode（錯誤代碼，雖然叫Code但卻是一個String）钉寝，第二個參數(shù)是errorMessage（錯誤信息）弧呐，第三個details（詳情）闸迷，這個詳情就是錯誤的具體信息了，當(dāng)然也可以選擇不傳泉懦。
iOS對應(yīng)代碼如下：

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

到目前為止稿黍，我們已經(jīng)完成了一半工作，已經(jīng)完成了通過Flutter實(shí)現(xiàn)微信注冊崩哩，但我們的工作永不止如此巡球，我們還要完成通過原生調(diào)用Flutter，從而實(shí)現(xiàn)分享邓嘹，支付等的回調(diào)酣栈。

注意：分享一個小坑，在iOS上汹押，空指針有可能是nil或者NSNull矿筝，坑就在這。如果Flutter傳來的String是null棚贾，那么在oc中對應(yīng)的是NSNull窖维，但微信SDK的參數(shù)可以為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];

原生如何調(diào)用Flutter

當(dāng)我們完成分享時铸史，我們可能需要將分享結(jié)果傳回Flutter。有同學(xué)可能會說怯伊，上面我們已經(jīng)學(xué)習(xí)了Result（FlutterResult）琳轿，可以通過result實(shí)現(xiàn)啊。但微信的這些回調(diào)是異步的耿芹，我們也不能夠長期持有Result對象崭篡，所以這個時候我們要在原生中調(diào)用Flutter。
原理也一樣吧秕，在原生代碼中琉闪，我們也有一個MethodChannel：

 val channel = MethodChannel(registrar.messenger(), "com.jarvanmo/fluwx")

    FlutterMethodChannel *channel = [FlutterMethodChannel
            methodChannelWithName:@"com.jarvanmo/fluwx"
                  binaryMessenger:[registrar messenger]];

當(dāng)我們拿到了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];

原生調(diào)用Flutter和Flutter調(diào)用原生的方式其實(shí)是一樣的寇甸，都是通過MethodChannel調(diào)用指定名稱的方法塘偎，并傳遞數(shù)據(jù)。那么拿霉，F(xiàn)lutter的接受原生調(diào)用的方式和原生接收Flutter調(diào)用的方式應(yīng)該也是樣的：

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;

當(dāng)然了不使用Stream也可以绽淘。通過Stream涵防，我們可以更輕松地監(jiān)聽回調(diào)數(shù)據(jù)變化：

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

至此，我們已經(jīng)完成了微信的注冊以及微信回調(diào)的回傳，剩下的工作是不是可以自己完成啦壮池？

總結(jié)

通過本文的學(xué)習(xí)偏瓤，我們已經(jīng)了解了如何親手編寫一個Flutter插件，并且至少掌握以下幾點(diǎn)：

• 創(chuàng)建一個Flutter Plugin項(xiàng)目
• Flutter調(diào)用原生
• 原生調(diào)用Flutter
• Flutter調(diào)用原生的結(jié)果處理椰憋，如成功厅克，錯誤等

最后

附上Fluwx。同時橙依，OpenFlutter歡迎各位開源愛好者分享自己的作品证舟，郵箱：jarvan.mo@gmail.com。QQ群：892398530窗骑。
版本所有女责，轉(zhuǎn)載請注明出處。