经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » Flutter » 查看文章
Flutter web bridge 通信总结分析详解
来源:jb51  时间:2023/1/28 8:42:55  对本文有异议

缘起

公司医疗业务人手比较少【小而美】的团队~ 较少采用的前端技术架构是:

toC:小程序 toB2C: Flutter + H5(SPA - React)【build ???? Android + IOS】 Flutter web + H5 【企业微信服务商应用】

toB: 后台端、 数据大屏 Vue

边缘业务:社区 平台 等 使用的 原生

  • 虽然团队不大但是技术挺杂的,至于为什么要在flutter 中加入 混合开发是因为想通过微架构模式拆分业务,达到资源最大程度的复用;通过 Flutter 解决平台间的复用;微架构的 单页面应用程序解决 业务间的复用。这个暂且不谈,本期整理一下 flutter 中的 bridge 通信;

架构图大致如下 ????

Flutter-web 2 H5.png

bridge 部分解决各端的

  • 兼容性和平台差异
  • 不同操作系统之间的处理
  • 各端之间跨端通信
  • 第三方 SDK 调用整合
  • 各端业务复用
  • 解决各端之间 Auth 的授权整合
  • ...

通信方式

老生常谈了 其实就是 JS 和 dart 之间的相互调用和注入方法

APP 中 JS & dart call

  • APP 中

app中主要是通过 webview 来通信和混合开发的方式大同小异;都是 H5 & App 各自注册通过 postmessage | urlchange 来触发调用

主要代码:

通过 Flutter webview中注入 flutter 的方法

Flutter端

  1. javascriptChannels: <JavascriptChannel>[
  2. JavascriptChannel(
  3. name: 'xxBridge',
  4. onMessageReceived: (JavascriptMessage jsMessage) {
  5. Map messageMap = json.decode(jsMessage.message);
  6. print(messageMap);
  7. if (messageMap['type'] == 'appPagePop') {
  8. Navigator.pop(context, messageMap['value']);
  9. return;
  10. }
  11. if (messageMap['type'] == 'navigateTo') {
  12. Map params = messageMap['params'];
  13. String patientCode = params['code'];
  14. Routes.navigateTo(context, messageMap['url'],
  15. params: {'id': UserUtil.transferCodeToId(patientCode)});
  16. return;
  17. }
  18. },
  19. ),
  20. ].toSet()
  21. 复制代码
  • H5端
  1. export default class xxBridge {
  2. isApp: boolean;
  3. constructor() {
  4. /**
  5. * receipt app message callback func
  6. * @param message
  7. * @returns boolean
  8. */
  9. window.flutterMessage = (message: string) => {
  10. console.log(message, ' receipt app message');
  11.  
  12. return true;
  13. };
  14. }
  15.  
  16. appPagePop = (value = false) => {
  17. if (!this.isApp) {
  18. console.log('当前不是app环境,或者没有Bridge 运行时哦 ~ !');
  19. window.history.back();
  20. return;
  21. }
  22.  
  23. window.xxBridge.postMessage(
  24. JSON.stringify({
  25. type: 'appPagePop',
  26. value: value,
  27. }),
  28. );
  29. };
  30. }
  31. 复制代码
  • Flutter 中调用 H5 在window 注册的方法
  1. onPageFinished: (url) {
  2. print(url + '加载完成');
  3.  
  4. Map data = {
  5. 'doctorCode': UserUtil.doctorCode(),
  6. 'doctorName': SpUtil.getString(DOCTOR_NAME_KEY),
  7. };
  8. var dataJson = json.encode(data);
  9. print(dataJson);
  10.  
  11. _webviewController?.evaluateJavascript("getAppLoginInfo('$dataJson')").then((res) {
  12. print("evaluateJavascript-res: ${res}"); // evaluateJavascript-res: true
  13. });
  14.  
  15. // print('加载结束');
  16. },
  17.  
  18. 复制代码
  • xxBridgeFlutter JavascriptChannel 注入通信对象
  • onMessageReceived 接收 web端 postmessage 触发 dart 方法
  • web 端中 window.flutterMessage 注册方法给 Flutter 在 app 中调用

至此 Flutter APP 和 H5 通信 基本是以上方式拓展,当然还有 Url 的方式 和 Storage 的方式这里不表;

Flutter web 中 JS & dart call

dart 调用 js

有2种方式

1. Promise js文件的方式被调用

定义方法

  1. function print(msg) {
  2. return new Promise((resolve, reject) => {
  3. resolve('code : xxxxx')
  4. alert(msg)
  5. });
  6. }
  7.  
  8. 复制代码

调用

  1. import 'dart:js' as js;
  2.  
  3. @JS()
  4. external print(String msg);
  5.  
  6. var wxScanPromise = print('123');
  7. String code = await jsUtil.promiseToFuture(wxScanPromise)
  8.  
  9. 复制代码

2. 通过 js.context 获取上下文来调用

  • 首先在 init 中注入方法

webapp main.dart

  1. class Application {
  2. static Future init(ui.VoidCallback callback) async {
  3. DarttoJS().into();
  4. }
  5.  
  6. ...
  7. }
  8. 复制代码
  1. // This's a test dart to js func
  2. class DarttoJS {
  3. // js call dart
  4. static void myalert(String text) {
  5. Fluttertoast.showToast(
  6. msg: "This's JS pass on test !:$text",
  7. toastLength: Toast.LENGTH_SHORT,
  8. gravity: ToastGravity.CENTER,
  9. timeInSecForIosWeb: 1,
  10. backgroundColor: Colors.red,
  11. textColor: Colors.white,
  12. fontSize: 16.0);
  13. }
  14.  
  15.  
  16. void into() {
  17. js.context["myalert"] = myalert;
  18. js.context.callMethod('onLogin');
  19. }
  20. }
  21.  
  22. 复制代码

webaapp index 文件中添加 onLogin

  1. const onLogin = () => {
  2. ...
  3. }
  4.  
  5. export { onLogin }
  6. 复制代码
  • 在 init 中注入方法调用类
  • js.context 来给 js 注入window下的全局方法

js 调用 dart

  • 通过 js.context["myalert"] = myalert 注册了方法
  • 直接在js文件中调用

summary

之后我们可以在 xxBridge 中不断的继承 WeChat SDK、dingdingSDK、等等 和一些业务方法 通过 rollup 等一些工具 打包发布NPM包

以上就是Flutter web bridge 通信总结分析详解的详细内容,更多关于Flutter web bridge 通信总结的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号