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

1,301 阅读3分钟

我正在参加「掘金·启航计划」

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

前沿

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

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

WX20230226-151759.png

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

NativeBridge 插件

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

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

WX20230226-152710.png

版本更新

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

v0.0.2 版本

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

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

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

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 插件的迭代而升级,直到其能力被官方取代为止。

WX20230226-155038.png

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的定义等。

这也是自我的一次成长,愿你我一起共勉!