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);

总结

对于还在使用 webview_flutter 3.0+ 版本的项目，引用 ^0.0.2版本：

native_bridge: ^0.0.2

对于使用 webview_flutter 4.0+ 版本的项目，引用 ^1.0.0版本：

native_bridge: ^1.0.0

感悟

NativeBridge插件的成功发布，这个过程中也让我受益良多。

开始学会从 SDK 开发者的角度去思考问题，尝试思考如何简化插件的使用、丰富插件的能力，更关注插件的内在结构和对外的协议。也了解到在开源项目中包括开源协议、pub 的 scores 标准、README、CHANGELOG的定义等。

这也是自我的一次成长，愿你我一起共勉！