appbridgenewplus 1.0.0-beta.1

A versatile Flutter plugin for integrating various platform-specific functionalities and bridging communication with web views. It provides modules for UI, navigation, live activities, events, downloa [...]

appbridgenewplus

SDK 初始化流程

本节详细介绍了 AppBridge SDK 的初始化方式以及 H5 页面与 Flutter 应用程序之间如何建立通信。

1. Flutter AppBridgeWebView Widget 初始化

当在 Flutter 应用程序中创建并显示 AppBridgeWebView widget 时：

• AppBridgeWebView 的 initState 方法被调用。
• assets/app_bridge.js JavaScript 文件被加载到内存中。该脚本包含用于 H5 页面的 window.AppBridge 接口。
• 配置一个 WebViewController，启用 WebView 中的 JavaScript 执行。
• 注册一个名为 AppBridgeChannel 的关键 JavaScriptChannel。该通道充当 H5 (JavaScript) 向 Flutter (Dart) 端发送消息（方法调用）的桥梁。在此处接收到的消息由 _handleAppBridgeMessage 函数处理。
• AppBridgeH5接口.md 文档中定义的所有 module.method 处理程序（例如 core.getVersion、app.getStatus）都与其各自的 Dart 实现注册。

2. JavaScript 接口 (window.AppBridge) 注入

WebView 成功加载网页后：

• 已加载的 assets/app_bridge.js 内容被注入到 WebView 的 JavaScript 上下文。
• 此注入脚本定义了全局 window.AppBridge 对象，使所有指定的 AppBridge 方法可用于 H5 页面（例如 window.AppBridge.core.getVersion()）。
• 每个 window.AppBridge 方法内部都会调用一个 _callNative() 辅助函数，用于准备发送给 Flutter 端的消息。

3. H5 到 Flutter 通信（方法调用）

当 H5 页面调用 AppBridge 方法（例如 window.AppBridge.core.getVersion()）时：

• 注入的 JavaScript 中的 _callNative() 函数会生成一个唯一的 callId 并创建一个 JavaScript Promise。它存储与该 callId 关联的 Promise 的 resolve 和 reject 函数。
• 方法详细信息（模块、方法名、参数和 callId）被序列化为 JSON 字符串。
• 然后，此 JSON 字符串通过 window.AppBridgeChannel.postMessage() 发送到 Flutter 应用程序。

4. Flutter 处理和响应

收到来自 H5 端的消​​息后：

• Flutter 应用程序的 _handleAppBridgeMessage 函数处理传入的 JSON 字符串。
• 它反序列化 JSON 以提取 callId、模块、方法和参数。
• 执行相应的 Dart 处理函数（例如，core.getVersion 的 _handleGetVersion）。
• Dart 函数的结果（包含 code、data 和 msg 的 AppBridgeResponse）随后与原始 callId 一起序列化。
• 此响应 JSON 通过在 WebView 的 JavaScript 上下文中执行 window.AppBridge._handleResponse(responseJson) 发送回 H5 页面。

5. H5 Promise 解析

回到 H5 页面：

• window.AppBridge._handleResponse 函数接收来自 Flutter 的响应 JSON。
• 它解析 JSON，检索 callId，并使用它来查找原始 JavaScript Promise 的已存储的 resolve 或 reject 函数。
• 根据 AppBridgeResponse 中的 code 值（0 表示成功，非零表示错误），Promise 将被解析（带有 data）或拒绝（带有 code 和 msg），从而完成 H5 端的异步操作。