Flutter与Native（安卓、iOS）通信说明文档

0x00 Flutter与Native传递消息架构预览

alt 属性文本

0x01 Flutter类说明

Flutter 与 Native 端通信有如下3个方法：

• MethodChannel：Flutter 与 Native 端相互调用，调用后可以返回结果，可以 Native 端主动调用，也可以Flutter主动调用，属于双向通信。此方式为最常用的方式， Native 端调用需要在主线程中执行。
• BasicMessageChannel：用于使用指定的编解码器对消息进行编码和解码，属于双向通信，可以 Native 端主动调用，也可以Flutter主动调用。
• EventChannel：用于数据流（event streams）的通信， Native 端主动发送数据给 Flutter，通常用于状态的监听，比如网络变化、传感器数据等。

0x02 MethodChannel

flutter创建与native的传输通道:

static const _widgetChannel = MethodChannel('com.jiuwei.jianzhimao');  

flutter给native发消息:

_widgetChannel.invokeMethod('backToNative');  

是MethodChannel通道名称，Flutter与MethodChannel一致才能收到消息。

注意点：

• com.jiuwei.jianzhimao 是MethodChannel通道名称，Flutter与MethodChannel一致才能收到消息。
• 一般使用MethodChannel来进行高维度的flutter页面切换，不可用使用MethodChannel进行页面内部的值传递。详见flutter的HomePage

0x03 BasicMessageChannel

主要用于用于传递字符串和半结构化的消息，这是本工程使用最多的通道。

flutter创建与native的传输通道:

static const _messageChannel = const BasicMessageChannel( 'flutter_date_transmission', StandardMessageCodec());  

flutter接收native发消息:

    _messageChannel.setMessageHandler((result) async {
      print("收到 BasicMessageChannel 消息：" + result.toString());
      return 'Flutter 已收到消息 ：${result}';
    });

• 个人中心模块使用flutter_date_transmission_personal
• 简历模块使用flutter_date_transmission_resume

0x04 如个人中心模块点击事件说明

所有经由个人中心模块向原生发出去的请求前缀为flutter_personal

• 头像点击 flutter_personal_center_click_head_image -> 跳转编辑简历（需要登录）
• 昵称/手机号点击 flutter_personal_center_click_username -> 跳转编辑简历（需要登录）
• 立即完善点击 flutter_personal_center_click_resume -> 跳转编辑简历（需要登录）
• 实名验证 flutter_personal_center_click_certification -> 打开实名验证小程序（需要登录）
• 右上角设置按钮 flutter_personal_center_click_seting -> 打开更多控制器
• 绑定微信 flutter_personal_center_click_wechat_binding -> 打开绑定微信控制器（需要登录）
• 报名记录 flutter_personal_cell_click_applyRecord -> 打开绑定报名控制器（需要登录）
• 我的收藏 flutter_personal_cell_click_collection -> 打开收藏控制器（需要登录）
• 我的钱包 flutter_personal_cell_click_wallet（需要登录）
• 兼职卡券 flutter_personal_cell_click_cardBag（需要登录）
• 积分换好礼 flutter_personal_cell_click_integral（需要登录）
• 我要找人 flutter_personal_cell_click_recruitment
• 社区合作 flutter_personal_cell_click_cooperation
• 求助反馈 flutter_personal_cell_click_help
• 【特别】个人中心轮播图点击 flutter_common_click_webview?url=http://api.jianzhimao.com，识别前缀lutter_common_click_webview再截图url后来的链接

0x05 个人中心模块native传给flutter参数接受说明

flutter的个人中心模块需要一些值来显示正确的登录状态、昵称、手机号、头像、小红点等，约定native用map的形式传给native，目前需要传5个参数：

NSDictionary *arguments = @{@"userName":username,
                             @"phone":phone,
                             @"headImage":headImage,
                             @"showBadge":showBadge, // 是否显示报名记录小红点
                             @"signInState":signInState // 是否登录
 };

iOS传递给flutter示例如下:

- (void)sendUserDataMessageToFlutter {
    // 向flutter发送消息
    NSString *username = @"";
    if ([GlobalSettings settings].resumeName != nil) {
        username = [GlobalSettings settings].resumeName;
    }
    NSString *phone = @"";
    if ([GlobalSettings settings].tel != nil) {
        phone = [GlobalSettings settings].tel;
    }
    NSString *headImage = @"";
    if ([GlobalSettings settings].imgUrlStr != nil) {
        headImage = [GlobalSettings settings].imgUrlStr;
    }
    NSNumber *showBadge = [NSNumber numberWithBool:NO];
    
    NSNumber *signInState = [NSNumber numberWithBool:NO];
    if ([GlobalSettings settings].hasLogin) {
        signInState = [NSNumber numberWithBool:YES];
    }
    
    NSDictionary *arguments = @{@"userName":username,
                                @"phone":phone,
                                @"headImage":headImage,
                                @"showBadge":showBadge, // 是否显示报名记录小红点
                                @"signInState":signInState // 是否登录
    };
    
    [_flutterMessageChannel sendMessage:arguments];
}