概述​

App Bridge 是 SHOPLINE 提供的一个 JavaScript SDK，它让嵌入在 SHOPLINE 商家后台中的第三方应用能够与平台进行交互。通过 App Bridge，应用可以调用 SHOPLINE 的原生功能（如获取商店信息、打开弹窗）和集成统一的 UI 组件，为商家提供流畅一致的使用体验。

功能介绍​

App Bridge 主要有以下功能：

• 与后台通信：App Bridge 内置了消息机制，能够与 SHOPLINE 商家后台进行通信。
• 页面组件集成：App Bridge 提供了一系列的页面组件，例如 Modal（弹窗）、Message（消息）、Loading（加载）等，帮助你在应用中实现与 SHOPLINE 界面一致的交互体验。
• 路由跳转：App Bridge 提供了 路由 功能，用于管理和控制 SHOPLINE 商家后台的导航，以确保商家能够流畅地浏览应用和商店。
• 安全认证：App Bridge 提供了安全的认证机制，确保只有 授权 的应用能够访问商店数据，保障商家和客户的隐私和安全性。

总体而言，App Bridge 旨在简化应用的开发过程，提高应用的质量，从而让应用提供更好的使用体验。这也使你能够更专注于为商家提供有价值的功能，而无需担心底层集成的复杂性。

交互逻辑​

图示说明：上图展示了 App Bridge 的通信机制。SHOPLINE 商家后台和内嵌应用分别位于不同的运行环境中，App Bridge 通过消息传递的方式实现双向通信，使得应用可以调用 SHOPLINE 的功能，SHOPLINE 也可以向应用发送事件通知。

工作原理：SHOPLINE 通过 iframe 加载你提供的应用。iframe 的安全机制会将应用与 SHOPLINE 商家后台主页面隔离开来，导致双方无法直接进行数据交换和功能调用。为了让两者能够互相通信，App Bridge 在其中搭建了一座桥梁。它通过标准化的消息格式和通信规则，使得 SHOPLINE 商家后台与应用之间能够相互调用和感知，从而确保交互的一致性。

应用场景示意图​

上图展示了 App Bridge 在实际应用场景中的架构关系：

• 左侧导航区域（黄框标注）：SHOPLINE 商家后台主界面，包含标准的导航菜单和各种功能模块（首页、订单、商品、客户 等）。
• 中间主体区域（红框标注）：你的应用通过 iframe 嵌入到 SHOPLINE 商家后台中，拥有独立的界面和业务逻辑。这里展示的是一个名为 自定义代码 的应用的示例页面。
• 顶部操作栏（蓝框标注）：通过 App Bridge 渲染的 SHOPLINE 统一组件（SaveBar 组件）。

这种架构使得你的应用虽然运行在隔离的 iframe 环境中，但能够通过 App Bridge 调用 SHOPLINE 商家后台的原生组件和功能，最终为商家呈现出统一、流畅的操作体验。