Flutter?web?bridge?通信總結分析詳解
緣起
公司醫(yī)療業(yè)務人手比較少【小而美】的團隊~ 較少采用的前端技術架構是:
toC:小程序 toB2C: Flutter + H5(SPA - React)【build ???? Android + IOS】 Flutter web + H5 【企業(yè)微信服務商應用】
toB: 后臺端、 數(shù)據(jù)大屏 Vue
邊緣業(yè)務:社區(qū) 平臺 等 使用的 原生
- 雖然團隊不大但是技術挺雜的,至于為什么要在flutter 中加入 混合開發(fā)是因為想通過微架構模式拆分業(yè)務,達到資源最大程度的復用;通過 Flutter 解決平臺間的復用;微架構的 單頁面應用程序解決 業(yè)務間的復用。這個暫且不談,本期整理一下 flutter 中的 bridge 通信;
架構圖大致如下 ????

bridge 部分解決各端的
- 兼容性和平臺差異
- 不同操作系統(tǒng)之間的處理
- 各端之間跨端通信
- 第三方 SDK 調(diào)用整合
- 各端業(yè)務復用
- 解決各端之間 Auth 的授權整合
- ...
通信方式
老生常談了 其實就是 JS 和 dart 之間的相互調(diào)用和注入方法
APP 中 JS & dart call
- APP 中
app中主要是通過 webview 來通信和混合開發(fā)的方式大同小異;都是 H5 & App 各自注冊通過 postmessage | urlchange 來觸發(fā)調(diào)用
主要代碼:
通過 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環(huán)境,或者沒有Bridge 運行時哦 ~ !');
window.history.back();
return;
}
window.xxBridge.postMessage(
JSON.stringify({
type: 'appPagePop',
value: value,
}),
);
};
}
- Flutter 中調(diào)用 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 觸發(fā) dart 方法- web 端中
window.flutterMessage注冊方法給 Flutter 在 app 中調(diào)用
至此 Flutter APP 和 H5 通信 基本是以上方式拓展,當然還有 Url 的方式 和 Storage 的方式這里不表;
Flutter web 中 JS & dart call
dart 調(diào)用 js
有2種方式
1. Promise js文件的方式被調(diào)用
定義方法
function print(msg) {
return new Promise((resolve, reject) => {
resolve('code : xxxxx')
alert(msg)
});
}
調(diào)用
import 'dart:js' as js;
@JS()
external print(String msg);
var wxScanPromise = print('123');
String code = await jsUtil.promiseToFuture(wxScanPromise)
2. 通過 js.context 獲取上下文來調(diào)用
- 首先在 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 中注入方法調(diào)用類
js.context來給 js 注入window下的全局方法
js 調(diào)用 dart
- 通過
js.context["myalert"] = myalert注冊了方法 - 直接在js文件中調(diào)用
summary
之后我們可以在 xxBridge 中不斷的繼承 WeChat SDK、dingdingSDK、等等 和一些業(yè)務方法 通過 rollup 等一些工具 打包發(fā)布NPM包
以上就是Flutter web bridge 通信總結分析詳解的詳細內(nèi)容,更多關于Flutter web bridge 通信總結的資料請關注腳本之家其它相關文章!
相關文章
Android基于OpenCV實現(xiàn)Harris角點檢測
角點就是極值點,即在某方面屬性特別突出的點。當然,你可以自己定義角點的屬性(設置特定熵值進行角點檢測)。角點可以是兩條線的交叉處,也可以是位于相鄰的兩個主要方向不同的事物上的點。本文介紹如何基于OpenCV實現(xiàn)Harris角點檢測2021-06-06
Android便攜式熱點的開啟狀態(tài)檢測和SSID的獲取方法
WIFI熱點的開啟狀態(tài)和開啟后的SSID如何獲取呢?接下來通過本文給大家分享Android便攜式熱點的開啟狀態(tài)檢測和SSID的獲取方法,需要的朋友參考下吧2017-01-01
Android kotlin使用注解實現(xiàn)防按鈕連點功能的示例
這篇文章主要介紹了Android kotlin使用注解實現(xiàn)防按鈕連點功能的示例,幫助大家更好的理解和學習使用Android,感興趣的朋友可以了解下2021-03-03
android 使用 IJKPlayer 播放視頻流的實現(xiàn)代碼
這篇文章主要介紹了android 使用 IJKPlayer 播放視頻流,這需要借助 IAndroidIO 這個接口,也可以用于播放本地文件,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-11-11

