【Flutter 混合開發】與原生通訊-BasicMessageChannel

時間 2020-10-25

標籤 android ios git swift 微信網絡 app async ide 欄目 Android 简体版

原文原文鏈接

Flutter 混合開發系列包含以下：android

嵌入原生View-Android

嵌入原生View-iOS

與原生通訊-MethodChannel

與原生通訊-BasicMessageChannel

與原生通訊-EventChannel

添加 Flutter 到 Android Activity

添加 Flutter 到 Android Fragment

添加 Flutter 到 iOS

每一個工做日分享一篇，歡迎關注、點贊及轉發。ios

平臺通訊的3中方式

Flutter 與 Native 端通訊有以下3個方法：git

MethodChannel：Flutter 與 Native 端相互調用，調用後能夠返回結果，能夠 Native 端主動調用，也能夠Flutter主動調用，屬於雙向通訊。此方式爲最經常使用的方式， Native 端調用須要在主線程中執行。
BasicMessageChannel：用於使用指定的編解碼器對消息進行編碼和解碼，屬於雙向通訊，能夠 Native 端主動調用，也能夠Flutter主動調用。
EventChannel：用於數據流（event streams）的通訊， Native 端主動發送數據給 Flutter，一般用於狀態的監聽，好比網絡變化、傳感器數據等。

Flutter 端

Flutter 端建立 MethodChannel 通道，用於與原生端通訊：swift

var channel = BasicMessageChannel('com.flutter.guide.BasicMessageChannel',StandardMessageCodec());

com.flutter.guide.BasicMessageChannel 是 BasicMessageChannel 的名稱，原生端要與之對應。微信

發送消息：網絡

var result = await channel.send({'name': 'laomeng', 'age': 18});

參數類型任意，多個參數一般使用Map。
返回 Future，原生端返回的數據。

完整代碼：app

class BasicMessageChannelDemo extends StatefulWidget {
  @override
  _BasicMessageChannelDemoState createState() => _BasicMessageChannelDemoState();
}

class _BasicMessageChannelDemoState extends State<BasicMessageChannelDemo> {
  var channel = BasicMessageChannel('com.flutter.guide.BasicMessageChannel',StandardMessageCodec());

  var _data;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          SizedBox(
            height: 50,
          ),
          RaisedButton(
            child: Text('發送數據到原生'),
            onPressed: () async {
              var result = await channel.send({'name': 'laomeng', 'age': 18});
              var name = result['name'];
              var age = result['age'];
              setState(() {
                _data = '$name,$age';
              });
            },
          ),
          Text('原生返回數據：$_data'),
        ],
      ),
    );
  }
}

Android 端

android 下建立 BasicMessageChannelDemo：async

class BasicMessageChannelDemo(messenger: BinaryMessenger) : BasicMessageChannel.MessageHandler<Any> {

    private var channel: BasicMessageChannel<Any>

    init {
        channel = BasicMessageChannel(messenger, "com.flutter.guide.BasicMessageChannel", StandardMessageCodec())
        channel.setMessageHandler(this)
    }

    override fun onMessage(message: Any?, reply: BasicMessageChannel.Reply<Any>) {
        val name = (message as Map<String, Any>)["name"]
        val age = (message as Map<String, Any>)["age"]

        var map = mapOf("name" to "hello,$name",
                "age" to "$age"
        )

        reply.reply(map)
    }
}

onMessage 方法在 Flutter 端調用 send 方法後調用，解析方法以下：ide

override fun onMessage(message: Any?, reply: BasicMessageChannel.Reply<Any>) {
        val name = (message as Map<String, Any>)["name"]
        val age = (message as Map<String, Any>)["age"]

        var map = mapOf("name" to "hello,$name",
                "age" to "$age"
        )

        reply.reply(map)
    }

message 是傳入的參數，因爲 Flutter 端傳入的是 Map，因此上面的解析按照 Map 解析。
reply.reply() 是返回給 Flutter 的結果。

Flutter 端解析：ui

var result = await channel.send({'name': 'laomeng', 'age': 18});
var name = result['name'];
var age = result['age'];

兩端的解析要相互對應。

在 MainActivity 啓動：

class MainActivity : FlutterActivity() {

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        BasicMessageChannelDemo(flutterEngine.dartExecutor.binaryMessenger)
        flutterEngine.plugins.add(MyPlugin())
    }
}

iOS 端

ios 下建立 MethodChannelDemo，按以下方式：

import Flutter
import UIKit

public class BasicMessageChannelDemo {
    
    var channel:FlutterBasicMessageChannel
    
    init(messenger: FlutterBinaryMessenger) {
        channel = FlutterBasicMessageChannel(name: "com.flutter.guide.BasicMessageChannel", binaryMessenger: messenger)
        channel.setMessageHandler { (message, reply) in
            if let dict = message as? Dictionary<String, Any> {
                let name:String = dict["name"] as? String ?? ""
                let age:Int = dict["age"] as? Int ?? -1
                reply(["name":"hello,\(name)","age":age])
            }
        }  
    }  
}

在 AppDelegate 啓動：

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    
    let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
    MethodChannelDemo(messenger: controller.binaryMessenger)
    BasicMessageChannelDemo(messenger: controller.binaryMessenger)
    GeneratedPluginRegistrant.register(with: self)

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

原生端主動發送消息給Flutter

Flutter 端接收數據

@override
  void initState() {
    super.initState();
    channel.setMessageHandler((message) {
      setState(() {
        _nativeData = message['count'];
      });
    });
  }

Android 發送數據

原生端啓動定時器，每隔一秒向 Flutter 發送數據，Android 端代碼：

class BasicMessageChannelDemo(var activity: Activity, messenger: BinaryMessenger) : BasicMessageChannel.MessageHandler<Any> {

    private var channel: BasicMessageChannel<Any>
    private var count = 0

    init {
        channel = BasicMessageChannel(messenger, "com.flutter.guide.BasicMessageChannel", StandardMessageCodec())
        channel.setMessageHandler(this)
        startTimer()
    }


    fun startTimer() {
        var timer = Timer().schedule(timerTask {
            activity.runOnUiThread {
                var map = mapOf("count" to count++)
                channel.send(map,object :BasicMessageChannel.Reply<Any>{
                    override fun reply(reply: Any?) {

                    }
                })
            }
        }, 0, 1000)

    }

    override fun onMessage(message: Any?, reply: BasicMessageChannel.Reply<Any>) {
        val name = (message as Map<String, Any>)["name"]
        val age = (message as Map<String, Any>)["age"]

        var map = mapOf("name" to "hello,$name",
                "age" to "$age"
        )

        reply.reply(map)
    }
}

注意：Android 端發送數據要在主現場中調用，即：
activity.runOnUiThread {
          var map = mapOf("count" to count++)
          channel.invokeMethod("timer", map)
      }

啓動修改以下：

class MainActivity : FlutterActivity() {

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        BasicMessageChannelDemo(this,flutterEngine.dartExecutor.binaryMessenger)
        flutterEngine.plugins.add(MyPlugin())
    }
}

iOS 發送數據

iOS 端啓動定時器代碼以下：

import Flutter
import UIKit

public class BasicMessageChannelDemo {
    
    var channel:FlutterBasicMessageChannel
    var count =  0
    
    init(messenger: FlutterBinaryMessenger) {
        channel = FlutterBasicMessageChannel(name: "com.flutter.guide.BasicMessageChannel", binaryMessenger: messenger)
        channel.setMessageHandler { (message, reply) in
            if let dict = message as? Dictionary<String, Any> {
                let name:String = dict["name"] as? String ?? ""
                let age:Int = dict["age"] as? Int ?? -1
                reply(["name":"hello,\(name)","age":age])
            }
        }
        startTimer()
    }
    
    func startTimer() {
        var timer = Timer.scheduledTimer(timeInterval:1, target: self, selector:#selector(self.tickDown),userInfo:nil,repeats: true)
    }
    @objc func tickDown(){
        count += 1
        var args = ["count":count]
        channel.sendMessage(args) { (reply) in
            
        }
    }
}