![](https://i-blog.csdnimg.cn/blog_migrate/66ab3815af2ee4252f5bda530fd94e39.png)
本节目标
-
闲鱼手册中提到的混合开发 -
编写到使用一个 flutter 组件的完整过程
视频
https://www.bilibili.com/video/bv1iT4y1j72t
![](https://i-blog.csdnimg.cn/blog_migrate/f20106a9f258348e95f9dab35c97829d.png)
代码
https://github.com/ducafecat/flutter_baidu_plugin_ducafecat/releases/tag/1.0.1
正文
从古至今、移动开发不可回避的问题
-
flutter、weex、React Native、Cordova
![](https://i-blog.csdnimg.cn/blog_migrate/26cafb2f0cf9f5e5ea1997583b6b65dc.png)
-
开发模式
![](https://i-blog.csdnimg.cn/blog_migrate/f51a867b29fad8dd0ef196e7439bd193.png)
聊聊 Flutter in Action 闲鱼最佳实践
电子书下载
https://c.tb.cn/I3.ZZpRl
第二代混合技术方案 FlutterBoost
-
项目开源地址
https://github.com/alibaba/flutter_boost
-
架构图
![](https://i-blog.csdnimg.cn/blog_migrate/0af74f5342db1f87c3a369b7d252b7ad.png)
-
Native 层概念
● Container:Native 容器,平台 Controller,Activity,ViewController ● Container Manager:容器的管理者 ● Adaptor:Flutter 是适配层 ● Messaging:基于 Channel 的消息通信
-
Dart 层概念
● Container:Flutter 用来容纳 Widget 的容器,具体实现为 Navigator 的派生类 ● Container Manager:Flutter 容器的管理,提供 show,remove 等 Api ● Coordinator: 协调器,接受 Messaging 消息,负责调用 Container Manager 的状态管理。 ● Messaging:基于 Channel 的消息通信
Flutter & FaaS 云端一体化
![](https://i-blog.csdnimg.cn/blog_migrate/aa9772092c8304c844f52a0aacd6c2af.png)
Flutter 会为以下团队带来较大的收益
![](https://i-blog.csdnimg.cn/blog_migrate/4182bbdfc210056d67c647d7c9712857.png)
Flutter Redux
![](https://i-blog.csdnimg.cn/blog_migrate/1ce3a585d23d77b2276037a3f08778d4.png)
混合工程下的 Flutter 研发结构
![](https://i-blog.csdnimg.cn/blog_migrate/86a3b98259d72ea98526c6b3b865f40d.png)
动手写第一个 Flutter 组件
创建 flutter 组件工程
$ flutter create --org tech.ducafecat --template=plugin -a java -i objc flutter_baidu_plugin_ducafecat
加入 加法 函数
-
dart 代码
lib/flutter_baidu_plugin_ducafecat.dart
import 'dart:async';
import 'package:flutter/services.dart';
class FlutterBaiduPluginDucafecat {
static const MethodChannel _channel = const MethodChannel('flutter_baidu_plugin_ducafecat'); static Future<String> get platformVersion async { final String version = await _channel.invokeMethod('getPlatformVersion'); return version; } static Future<int> duAddOne(int num) async { final int val = await _channel.invokeMethod('duAddOne', {"num": num}); return val; } }
-
android 代码
android/src/main/java/tech/ducafecat/flutter_baidu_plugin_ducafecat/FlutterBaiduPluginDucafecatPlugin.java
@Override
public void onMethodCall(@NonNull MethodCall call, @NonNull Result result) {
if (call.method.equals("getPlatformVersion")) {
result.success("Android " + android.os.Build.VERSION.RELEASE);
}
else if (call.method.equals("duAddOne")) { int val = 100; val += Integer.valueOf(call.argument("num").toString()); result.success(val); } else { result.notImplemented(); } }
-
ios 代码
ios/Classes/FlutterBaiduPluginDucafecatPlugin.m
#import "FlutterBaiduPluginDucafecatPlugin.h"
@implementation FlutterBaiduPluginDucafecatPlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
FlutterMethodChannel* channel = [FlutterMethodChannel
methodChannelWithName:@"flutter_baidu_plugin_ducafecat" binaryMessenger:[registrar messenger]]; FlutterBaiduPluginDucafecatPlugin* instance = [[FlutterBaiduPluginDucafecatPlugin alloc] init]; [registrar addMethodCallDelegate:instance channel:channel]; } - (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result { if ([@"getPlatformVersion" isEqualToString:call.method]) { result([@"iOS " stringByAppendingString:[[UIDevice currentDevice] systemVersion]]); } else if ([@"duAddOne" isEqualToString:call.method]) { NSInteger val = 100; val += [[call.arguments objectForKey:@"num"] intValue]; result([NSNumber numberWithLong:val]); } else { result(FlutterMethodNotImplemented); } } @end
新建工程调用
-
pubspec.yaml
flutter_baidu_plugin_ducafecat:
git:
url: https://github.com/ducafecat/flutter_baidu_plugin_ducafecat
version: ^0.0.1
-
调用 加法
void _incrementCounter() async {
_counter = await FlutterBaiduPluginDucafecat.duAddOne(20);
setState(() {});
}
参考
-
https://cordova.apache.org/ -
https://reactnative.dev/ -
https://flutter.dev/ -
https://weex.apache.org/
![](https://i-blog.csdnimg.cn/blog_migrate/862362f6c403bbfd78e0f8de19103761.png)
本文使用 mdnice 排版