--- title: "概述" doc_type: static doc_category: static doc_version: v20270301 source_url: html: 'https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/app-bridge/overview' md: 'https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/app-bridge/overview.md' --- # 概述 App Bridge 是 SHOPLINE 提供的一个 JavaScript SDK，它让嵌入在 SHOPLINE 商家后台中的第三方应用能够与平台进行交互。通过 App Bridge，应用可以调用 SHOPLINE 的原生功能（如获取商店信息、打开弹窗）和集成统一的 UI 组件，为商家提供流畅一致的使用体验。 ## 功能介绍 App Bridge 主要有以下功能： - **与后台通信**：App Bridge 内置了消息机制，能够与 SHOPLINE 商家后台进行通信。 - **页面组件集成**：App Bridge 提供了一系列的页面组件，例如 [Modal（弹窗）](https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/app-bridge/actions/modal.md)、[Message（消息）](https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/app-bridge/actions/message.md)、[Loading（加载）](https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/app-bridge/actions/loading.md)等，帮助你在应用中实现与 SHOPLINE 界面一致的交互体验。 - **路由跳转**：App Bridge 提供了 [路由](https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/app-bridge/actions/routing.md) 功能，用于管理和控制 SHOPLINE 商家后台的导航，以确保商家能够流畅地浏览应用和商店。 - **安全认证**：App Bridge 提供了安全的认证机制，确保只有 [授权](https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/app-bridge/actions/authorization.md) 的应用能够访问商店数据，保障商家和客户的隐私和安全性。 总体而言，App Bridge 旨在简化应用的开发过程，提高应用的质量，从而让应用提供更好的使用体验。这也使你能够更专注于为商家提供有价值的功能，而无需担心底层集成的复杂性。 ## 交互逻辑 ![](https://s2cdn.myshopline.com/slfs/op-new/177330442956780/747baf709be919047ddd4f2aae94623d.svg) **图示说明**：上图展示了 App Bridge 的通信机制。SHOPLINE 商家后台和内嵌应用分别位于不同的运行环境中，App Bridge 通过消息传递的方式实现双向通信，使得应用可以调用 SHOPLINE 的功能，SHOPLINE 也可以向应用发送事件通知。 **工作原理**：SHOPLINE 通过 iframe 加载你提供的应用。iframe 的安全机制会将应用与 SHOPLINE 商家后台主页面隔离开来，导致双方无法直接进行数据交换和功能调用。为了让两者能够互相通信，App Bridge 在其中搭建了一座桥梁。它通过标准化的消息格式和通信规则，使得 SHOPLINE 商家后台与应用之间能够相互调用和感知，从而确保交互的一致性。 ## 应用场景示意图 ![](https://s2cdn.myshopline.com/slfs/op-new/177330442963633/1772693252462-7b323f72-fd23-4b29-a624-463e34cae2ca.jpeg) 上图展示了 App Bridge 在实际应用场景中的架构关系： - **左侧导航区域（黄框标注）**：SHOPLINE 商家后台主界面，包含标准的导航菜单和各种功能模块（**首页**、**订单**、**商品**、**客户** 等）。 - **中间主体区域（红框标注）**：你的应用通过 iframe 嵌入到 SHOPLINE 商家后台中，拥有独立的界面和业务逻辑。这里展示的是一个名为 **自定义代码** 的应用的示例页面。 - **顶部操作栏（蓝框标注）**：通过 App Bridge 渲染的 SHOPLINE 统一组件（SaveBar 组件）。 这种架构使得你的应用虽然运行在隔离的 iframe 环境中，但能够通过 App Bridge 调用 SHOPLINE 商家后台的原生组件和功能，最终为商家呈现出统一、流畅的操作体验。