NativeBridge：我在Pub上发布的第一个插件

最新推荐文章于 2024-03-11 17:14:57 发布

bugyinyin

最新推荐文章于 2024-03-11 17:14:57 发布

阅读量131

点赞数

分类专栏： Android开发 Android 文章标签： flutter android webview

本文链接：https://blog.csdn.net/bugyinyin/article/details/129260472

版权

Android 同时被 2 个专栏收录

210 篇文章 14 订阅

订阅专栏

Android开发

110 篇文章 13 订阅

订阅专栏

系列(一)：NativeBridge：基于webivew_flutter的JSBridge插件
系列(二)：NativeBridge：实现原理解析
系列(三)：App实现JSBridge的最佳方案
系列(四)：NativeBridge：我在Pub上发布的第一个插件

前沿

坦白地说，在发布 native_bridge 之前，自己从没有想过会在 pub 上发布一款自己开发的 Flutter 插件。一方面是觉得自己水平有限，很难产出比较有实用价值的内容。虽然之前有写过 Plugin 开发相关的文章，但那也只是用来自我学习的 Demo，对大家来说没有太多的应用价值。另一方面也是因为对 pub 的发布流程非常陌生，尤其对大陆开发者来说还会遇到一些额外的问题。

而这次能够促使我去发布 NativeBridge 插件，主要还是之前的 NativeBridge 系列文章在掘金的受欢迎度较高，让我感受到了它存在的价值。另一个原因是之前对掘友的承诺，之前掘友希望 NativeBridge 能够适配 webview_flutter ^4.0.1 以上的版本。

虽然距离上次的回复已经过去了一个多月，但我最终还是完成了许下的承诺^ ^。

NativeBridge 插件

NativeBridge 是基于 webview_flutter 插件来实现 App端 和 H5端 JS 互调能力的插件。其详细功能说明请跳转 Readme 查看，这里不做过多的介绍。

NativeBridge 目前已成功发布到 pub，需要使用时直接引入即可。

版本更新

这里简述下插件的版本更新内容：

v0.0.2 版本

1. 优化了消息回复后还会导致接收端再次发一条确认消息的问题

原来当 App 收到了 H5 回复的消息后，还会再发送一条消息确认消息。这是没有必要的，这里进行了优化。

通过在消息实体 Message 中新增 isResponseFlag 字段来进行区分，对于 isResponseFlag 为 true 的消息，将不再发送确认消息。

if (isResponseFlag) {
      // 是返回的请求消息，则处理H5回调的值
      NativeBridgeHelper.receiveMessage(messageJson);
    } else {
      ...
    }

2. 对于未识别的 Api 新增容错机制处理

随着 App版本 的迭代，可能出现某个新的 Api 老的版本无法支持的情况，对于之前的版本来说，当 Api 不匹配时会直接丢弃消息，等待超时机制处理。这会导致发起端出现 await 情况，直到超时触发回调。这是不适宜的，这次增加了兼容处理。

// 不是返回的请求消息，处理H5端的请求
var callMethod = callMethodMap[messageItem.api];
if (callMethod != null) {
   // 有相应的JS方法，则处理
   ...
} else {
   // 若没有对应方法，则返回null，避免低版本未支持Api阻塞H5
   messageItem.data = null;
}

v1.0.0版本

1. 适配webview_flutter ^4.0.5版本

目前插件引入的 webview_flutter 版本为： ^4.0.5，后续也会随着 webview_flutter 插件的迭代而升级，直到其能力被官方取代为止。

2. 对实现方式进行重构

由于新版本的 webview_flutter 将大部分的 WebView 操作功能移入 WebViewController 处理，因此我们的 NativeBridge 插件也同步进行调整。

现在使用只需要新增 AppBridgeController 继承 NativeBridgeController 实现其对应方法即可正常使用。

class AppBridgeController extends NativeBridgeController {
  AppBridgeController(WebViewController controller) : super(controller);

  /// 指定JSChannel名称
  @override
  get name => "nativeBridge";

  @override
  Map<String, Function?> get callMethodMap => <String, Function?>{
        // 版本号
        "getVersionCode": (data) async {
          return await AppUtil.getVersion();
        },
        ...
      };
}

// 初始化AppBridgeController
_appBridgeController = AppBridgeController(_controller);