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 中加入 混合開發(fā)是因?yàn)橄胪ㄟ^微架構(gòu)模式拆分業(yè)務(wù),達(dá)到資源最大程度的復(fù)用;通過 Flutter 解決平臺(tái)間的復(fù)用;微架構(gòu)的 單頁面應(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中主要是通過 webview 來通信和混合開發(fā)的方式大同小異;都是 H5 & App 各自注冊(cè)通過 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('當(dāng)前不是app環(huán)境,或者沒有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. 通過 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
注冊(cè)了方法 - 直接在js文件中調(diào)用
summary
之后我們可以在 xxBridge 中不斷的繼承 WeChat SDK、dingdingSDK、等等 和一些業(yè)務(wù)方法 通過 rollup
等一些工具 打包發(fā)布NPM包
以上就是Flutter web bridge 通信總結(jié)分析詳解的詳細(xì)內(nèi)容,更多關(guān)于Flutter web bridge 通信總結(jié)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android無需權(quán)限調(diào)起系統(tǒng)相機(jī)
在進(jìn)行一些小型APP的開發(fā),或者是對(duì)拍照界面沒有自定義要求時(shí),我們可以用調(diào)起系統(tǒng)相機(jī)的方式快速完成拍照需求2023-03-03Android Uri和文件路徑互相轉(zhuǎn)換的實(shí)例代碼
在項(xiàng)目中需要用到將Uri轉(zhuǎn)換為絕對(duì)路徑,下面小編把Android Uri和文件路徑互相轉(zhuǎn)換的實(shí)例代碼分享到腳本之家平臺(tái),需要的的朋友參考下吧2017-07-07Android基于OpenCV實(shí)現(xiàn)Harris角點(diǎn)檢測
角點(diǎn)就是極值點(diǎn),即在某方面屬性特別突出的點(diǎn)。當(dāng)然,你可以自己定義角點(diǎn)的屬性(設(shè)置特定熵值進(jìn)行角點(diǎn)檢測)。角點(diǎn)可以是兩條線的交叉處,也可以是位于相鄰的兩個(gè)主要方向不同的事物上的點(diǎn)。本文介紹如何基于OpenCV實(shí)現(xiàn)Harris角點(diǎn)檢測2021-06-06Android便攜式熱點(diǎn)的開啟狀態(tài)檢測和SSID的獲取方法
WIFI熱點(diǎn)的開啟狀態(tài)和開啟后的SSID如何獲取呢?接下來通過本文給大家分享Android便攜式熱點(diǎn)的開啟狀態(tài)檢測和SSID的獲取方法,需要的朋友參考下吧2017-01-01Android kotlin使用注解實(shí)現(xiàn)防按鈕連點(diǎn)功能的示例
這篇文章主要介紹了Android kotlin使用注解實(shí)現(xiàn)防按鈕連點(diǎn)功能的示例,幫助大家更好的理解和學(xué)習(xí)使用Android,感興趣的朋友可以了解下2021-03-03Android編程實(shí)現(xiàn)的重力感應(yīng)示例代碼
這篇文章主要介紹了Android編程實(shí)現(xiàn)的重力感應(yīng)效果,以完整示例代碼形式分析了重力感應(yīng)的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10android 使用 IJKPlayer 播放視頻流的實(shí)現(xiàn)代碼
這篇文章主要介紹了android 使用 IJKPlayer 播放視頻流,這需要借助 IAndroidIO 這個(gè)接口,也可以用于播放本地文件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-11-11