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

bridge 部分解決各端的
- 兼容性和平臺(tái)差異
- 不同操作系統(tǒng)之間的處理
- 各端之間跨端通信
- 第三方 SDK 調(diào)用整合
- 各端業(yè)務(wù)復(fù)用
- 解決各端之間 Auth 的授權(quán)整合
- ...
通信方式
老生常談了 其實(shí)就是 JS 和 dart 之間的相互調(diào)用和注入方法
APP 中 JS & dart call
- APP 中
app中主要是通過(guò) webview 來(lái)通信和混合開(kāi)發(fā)的方式大同小異;都是 H5 & App 各自注冊(cè)通過(guò) postmessage | urlchange 來(lái)觸發(fā)調(diào)用
主要代碼:
通過(guò) 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('當(dāng)前不是app環(huán)境,或者沒(méi)有Bridge 運(yùn)行時(shí)哦 ~ !');
window.history.back();
return;
}
window.xxBridge.postMessage(
JSON.stringify({
type: 'appPagePop',
value: value,
}),
);
};
}
- Flutter 中調(diào)用 H5 在window 注冊(cè)的方法
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('加載結(jié)束');
},
xxBridge是Flutter JavascriptChannel注入通信對(duì)象onMessageReceived接收 web端 postmessage 觸發(fā) dart 方法- web 端中
window.flutterMessage注冊(cè)方法給 Flutter 在 app 中調(diào)用
至此 Flutter APP 和 H5 通信 基本是以上方式拓展,當(dāng)然還有 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. 通過(guò) js.context 獲取上下文來(lái)調(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來(lái)給 js 注入window下的全局方法
js 調(diào)用 dart
- 通過(guò)
js.context["myalert"] = myalert注冊(cè)了方法 - 直接在js文件中調(diào)用
summary
之后我們可以在 xxBridge 中不斷的繼承 WeChat SDK、dingdingSDK、等等 和一些業(yè)務(wù)方法 通過(guò) rollup 等一些工具 打包發(fā)布NPM包
以上就是Flutter web bridge 通信總結(jié)分析詳解的詳細(xì)內(nèi)容,更多關(guān)于Flutter web bridge 通信總結(jié)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
在Visual Studio上構(gòu)建C++的GUI框架wxWidgets的開(kāi)發(fā)環(huán)境
這篇文章主要介紹了Visual Studio上構(gòu)件C++的GUI框架wxWidgets開(kāi)發(fā)環(huán)境的方法,wxWidgets是一個(gè)跨多個(gè)系統(tǒng)平臺(tái)的圖形化界面開(kāi)發(fā)框架,并且可用語(yǔ)言不限于C++,需要的朋友可以參考下2016-04-04
Android Studio 1.2版安裝設(shè)置圖文教程
這篇文章主要介紹了Android Studio 1.2版安裝設(shè)置圖文教程,本文詳細(xì)講解了下載、安裝Android Studio 1.2教程,以及常用設(shè)置詳細(xì)圖文教程,需要的朋友可以參考下2015-05-05
Android開(kāi)發(fā)Compose remember原理解析
這篇文章主要為大家介紹了Android開(kāi)發(fā)Compose remember原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
如何使用Flutter開(kāi)發(fā)一款電影APP詳解
這篇文章主要給大家介紹了關(guān)于如何使用Flutter開(kāi)發(fā)一款電影APP的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Android?Framework原理Binder驅(qū)動(dòng)源碼解析
這篇文章主要為大家介紹了Android?Framework原理Binder驅(qū)動(dòng)源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
Android開(kāi)發(fā)之Wifi基礎(chǔ)教程
這篇文章主要介紹了Android開(kāi)發(fā)Wifi基礎(chǔ)教程,實(shí)例分析了Wifi的各種常見(jiàn)基本技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
使用Android實(shí)現(xiàn)一個(gè)懸浮在軟鍵盤上的輸入欄
app開(kāi)發(fā)中經(jīng)常會(huì)遇到一些輸入框要懸浮到軟鍵盤上方的需求,下面這篇文章主要給大家介紹了關(guān)于如何使用Android實(shí)現(xiàn)一個(gè)懸浮在軟鍵盤上的輸入欄的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
詳談android 6.0 fuse文件系統(tǒng)的掛載和卸載問(wèn)題
今天小編就為大家分享一篇詳談android 6.0 fuse文件系統(tǒng)的掛載和卸載問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
android實(shí)現(xiàn)Uri獲取真實(shí)路徑轉(zhuǎn)換成File的方法
這篇文章主要介紹了android實(shí)現(xiàn)Uri獲取真實(shí)路徑轉(zhuǎn)換成File的方法,涉及Android操作路徑的相關(guān)技巧,需要的朋友可以參考下2015-05-05
Android中Java instanceof關(guān)鍵字全面解析
instanceof關(guān)鍵字用于判斷一個(gè)引用類型變量所指向的對(duì)象是否是一個(gè)類(或接口、抽象類、父類)的實(shí)例.這篇文章主要介紹了Android中Java instanceof關(guān)鍵字全面解析的相關(guān)資料,需要的朋友可以參考下2016-07-07

