Flutter?web?bridge通信方式是什么

這篇文章主要介紹“Flutter web bridge通信方式是什么”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Flutter web bridge通信方式是什么”文章能幫助大家解決問(wèn)題。

架構(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)通信和混合開發(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)境，或者沒有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包。

關(guān)于“Flutter web bridge通信方式是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。