欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flutter?web?bridge?通信總結(jié)分析詳解

 更新時(shí)間:2023年01月26日 13:33:05   作者:薛定喵的諤  
這篇文章主要為大家介紹了Flutter?web?bridge?通信總結(jié)分析詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

緣起

公司醫(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é)束');
                },
  • xxBridgeFlutter 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 Studio中debug功能詳解

    Android Studio中debug功能詳解

    這篇文章主要為大家詳細(xì)介紹了Android Studio中debug功能的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2018-05-05
  • Android無需權(quán)限調(diào)起系統(tǒng)相機(jī)

    Android無需權(quán)限調(diào)起系統(tǒng)相機(jī)

    在進(jìn)行一些小型APP的開發(fā),或者是對(duì)拍照界面沒有自定義要求時(shí),我們可以用調(diào)起系統(tǒng)相機(jī)的方式快速完成拍照需求
    2023-03-03
  • Android給通知channel靜音的方法實(shí)例

    Android給通知channel靜音的方法實(shí)例

    這篇文章主要給大家介紹了關(guān)于Android如何給通知channel靜音的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2022-02-02
  • Android Uri和文件路徑互相轉(zhuǎn)換的實(shí)例代碼

    Android Uri和文件路徑互相轉(zhuǎn)換的實(shí)例代碼

    在項(xiàng)目中需要用到將Uri轉(zhuǎn)換為絕對(duì)路徑,下面小編把Android Uri和文件路徑互相轉(zhuǎn)換的實(shí)例代碼分享到腳本之家平臺(tái),需要的的朋友參考下吧
    2017-07-07
  • Android基于OpenCV實(shí)現(xiàn)Harris角點(diǎn)檢測

    Android基于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-06
  • Android便攜式熱點(diǎn)的開啟狀態(tài)檢測和SSID的獲取方法

    Android便攜式熱點(diǎn)的開啟狀態(tài)檢測和SSID的獲取方法

    WIFI熱點(diǎn)的開啟狀態(tài)和開啟后的SSID如何獲取呢?接下來通過本文給大家分享Android便攜式熱點(diǎn)的開啟狀態(tài)檢測和SSID的獲取方法,需要的朋友參考下吧
    2017-01-01
  • Android kotlin使用注解實(shí)現(xiàn)防按鈕連點(diǎn)功能的示例

    Android kotlin使用注解實(shí)現(xiàn)防按鈕連點(diǎn)功能的示例

    這篇文章主要介紹了Android kotlin使用注解實(shí)現(xiàn)防按鈕連點(diǎn)功能的示例,幫助大家更好的理解和學(xué)習(xí)使用Android,感興趣的朋友可以了解下
    2021-03-03
  • Android解決所有雙擊優(yōu)化的問題

    Android解決所有雙擊優(yōu)化的問題

    這篇文章主要為大家介紹了Android解決所有雙擊優(yōu)化的問題,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-06-06
  • Android編程實(shí)現(xiàn)的重力感應(yīng)示例代碼

    Android編程實(shí)現(xiàn)的重力感應(yīng)示例代碼

    這篇文章主要介紹了Android編程實(shí)現(xiàn)的重力感應(yīng)效果,以完整示例代碼形式分析了重力感應(yīng)的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-10-10
  • android 使用 IJKPlayer 播放視頻流的實(shí)現(xiàn)代碼

    android 使用 IJKPlayer 播放視頻流的實(shí)現(xiàn)代碼

    這篇文章主要介紹了android 使用 IJKPlayer 播放視頻流,這需要借助 IAndroidIO 這個(gè)接口,也可以用于播放本地文件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-11-11

最新評(píng)論