Flutter web bridge 通信总结分析详解
作者:薛定喵的谔 时间:2022-05-23 05:15:42
缘起
公司医疗业务人手比较少【小而美】的团队~ 较少采用的前端技术架构是:
toC:小程序 toB2C: Flutter + H5(SPA - React)【build 👉🏻 Android + IOS】 Flutter web + H5 【企业微信服务商应用】
toB: 后台端、 数据大屏 Vue
边缘业务:社区 平台 等 使用的 原生
虽然团队不大但是技术挺杂的,至于为什么要在flutter 中加入 混合开发是因为想通过微架构模式拆分业务,达到资源最大程度的复用;通过 Flutter 解决平台间的复用;微架构的 单页面应用程序解决 业务间的复用。这个暂且不谈,本期整理一下 flutter 中的 bridge 通信;
架构图大致如下 👇🏻
bridge 部分解决各端的
兼容性和平台差异
不同操作系统之间的处理
各端之间跨端通信
第三方 SDK 调用整合
各端业务复用
解决各端之间 Auth 的授权整合
...
通信方式
老生常谈了 其实就是 JS 和 dart 之间的相互调用和注入方法
APP 中 JS & dart call
APP 中
app中主要是通过 webview 来通信和混合开发的方式大同小异;都是 H5 & App 各自注册通过 postmessage | urlchange 来触发调用
主要代码:
通过 Flutter webview中注入 flutter 的方法
Flutter端
javascriptChannels: <JavascriptChannel>[
JavascriptChannel(
name: 'xxBridge',
onMessageReceived: (JavascriptMessage jsMessage) {
Map messageMap = json.decode(jsMessage.message);
print(messageMap);
if (messageMap['type'] == 'appPagePop') {
Navigator.pop(context, messageMap['value']);
return;
}
if (messageMap['type'] == 'navigateTo') {
Map params = messageMap['params'];
String patientCode = params['code'];
Routes.navigateTo(context, messageMap['url'],
params: {'id': UserUtil.transferCodeToId(patientCode)});
return;
}
},
),
].toSet()
H5端
export default class xxBridge {
isApp: boolean;
constructor() {
/**
* receipt app message callback func
* @param message
* @returns boolean
*/
window.flutterMessage = (message: string) => {
console.log(message, ' receipt app message');
return true;
};
}
appPagePop = (value = false) => {
if (!this.isApp) {
console.log('当前不是app环境,或者没有Bridge 运行时哦 ~ !');
window.history.back();
return;
}
window.xxBridge.postMessage(
JSON.stringify({
type: 'appPagePop',
value: value,
}),
);
};
}
Flutter 中调用 H5 在window 注册的方法
onPageFinished: (url) {
print(url + '加载完成');
Map data = {
'doctorCode': UserUtil.doctorCode(),
'doctorName': SpUtil.getString(DOCTOR_NAME_KEY),
};
var dataJson = json.encode(data);
print(dataJson);
_webviewController?.evaluateJavascript("getAppLoginInfo('$dataJson')").then((res) {
print("evaluateJavascript-res: ${res}"); // evaluateJavascript-res: true
});
// print('加载结束');
},
xxBridge
是Flutter JavascriptChannel
注入通信对象onMessageReceived
接收 web端 postmessage 触发 dart 方法web 端中
window.flutterMessage
注册方法给 Flutter 在 app 中调用
至此 Flutter APP 和 H5 通信 基本是以上方式拓展,当然还有 Url 的方式 和 Storage 的方式这里不表;
Flutter web 中 JS & dart call
dart 调用 js
有2种方式
1. Promise js文件的方式被调用
定义方法
function print(msg) {
return new Promise((resolve, reject) => {
resolve('code : xxxxx')
alert(msg)
});
}
调用
import 'dart:js' as js;
@JS()
external print(String msg);
var wxScanPromise = print('123');
String code = await jsUtil.promiseToFuture(wxScanPromise)
2. 通过 js.context 获取上下文来调用
首先在 init 中注入方法
webapp main.dart
class Application {
static Future init(ui.VoidCallback callback) async {
DarttoJS().into();
}
...
}
// This's a test dart to js func
class DarttoJS {
// js call dart
static void myalert(String text) {
Fluttertoast.showToast(
msg: "This's JS pass on test !:$text",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0);
}
void into() {
js.context["myalert"] = myalert;
js.context.callMethod('onLogin');
}
}
webaapp index 文件中添加 onLogin
const onLogin = () => {
...
}
export { onLogin }
在 init 中注入方法调用类
js.context
来给 js 注入window下的全局方法
js 调用 dart
通过
js.context["myalert"] = myalert
注册了方法直接在js文件中调用
summary
之后我们可以在 xxBridge 中不断的继承 WeChat SDK、dingdingSDK、等等 和一些业务方法 通过 rollup
等一些工具 打包发布NPM包
来源:https://juejin.cn/post/7191835597546209341
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
java~springboot~ibatis数组in查询的实现方法
java8 Stream大数据量List分批处理切割方式
android实现点击图片全屏展示效果
![](https://img.aspxhome.com/file/2023/7/137807_0s.jpg)
详解Spring Boot 部署jar和war的区别
C# 使用 Castle 实现 AOP及如何用 Autofac 集成 Castle
c# 在windows中操作IIS设置FTP服务器的示例
![](https://img.aspxhome.com/file/2023/6/66116_0s.jpg)
Android下拉刷新上拉加载控件(适用于所有View)
![](https://img.aspxhome.com/file/2023/3/117093_0s.gif)
android中DatePicker和TimePicker的使用方法详解
![](https://img.aspxhome.com/file/2023/3/106043_0s.png)
Java二维码登录流程实现代码(包含短地址生成,含部分代码)
java8 利用reduce实现将列表中的多个元素的属性求和并返回操作
mybatis-plus生成mapper扩展文件的方法
![](https://img.aspxhome.com/file/2023/4/58044_0s.png)
java数据结构与算法之noDups去除重复项算法示例
springboot 无法自动装配的问题
![](https://img.aspxhome.com/file/2023/8/81888_0s.png)
详解Flutter桌面应用如何进行多分辨率适配
Android实现3D层叠式卡片图片展示
![](https://img.aspxhome.com/file/2023/4/110744_0s.gif)
Spring使用注解存储和读取对象详解
![](https://img.aspxhome.com/file/2023/5/89485_0s.png)
Android+Flutter实现文字跑马灯特效
![](https://img.aspxhome.com/file/2023/3/120053_0s.png)
C#实现Datatable排序的方法
C#使用FtpWebRequest与FtpWebResponse完成FTP操作
mybatis中<choose>标签的用法说明
![](https://img.aspxhome.com/file/2023/5/132185_0s.png)