系列(一)：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);
总结
对于还在使用 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的定义等。
这也是自我的一次成长，愿你我一起共勉！
作者：Fitem
链接：https://juejin.cn/post/7204349756620210236
