---
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/getting-started'
  md: 'https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/app-bridge/getting-started.md'
---
# 入门

本文介绍如何安装和使用 App Bridge。

## 安装

通过以下命令安装 App Bridge：

```bash
# npm
npm install @shoplineos/app-bridge
# yarn
yarn add @shoplineos/app-bridge
# pnpm
pnpm add @shoplineos/app-bridge
```

## 使用

### 初始化

使用 App Bridge 时，需要先进行客户端初始化，以建立与 SHOPLINE 商家后台的通信机制。

```javascript
import Client, { shared } from '@shoplineos/app-bridge';
const app = Client.createApp({
  appKey: 'your-app-key', // 替换为实际的应用 appKey
  host: shared.getHost(),
});
```

> **注意**
>
> 使用 SHOPLINE App Bridge SDK 的应用必须为内嵌应用（内嵌在 SHOPLINE 商家后台的应用都为内嵌应用）。

### 参数说明

`createApp` 方法：用于初始化 App Bridge。

| 参数   | 类型   | 说明                                        | 必填 |
| ------ | ------ | ------------------------------------------- | ---- |
| appKey | string | 应用唯一标识。                              | 是   |
| host   | string | 商店域名，格式：`{handle}.myshopline.com`。 | 是   |

> **提示**
>
> - `appKey` 需要与当前应用的 `appKey` 保持一致，否则会导致 API 调用失败。
> - `host` 参数建议使用 `shared.getHost()` 自动获取。

### 示例

初始化完成后，就可以调用 App Bridge 提供的各种功能了。下面是一个调用 [Modal 组件](https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/app-bridge/actions/modal.md) 的示例：

```javascript
import Client, { Modal, shared, ModalProps } from '@shoplineos/app-bridge';

// 初始化
const app = Client.createApp({
  appKey: 'your-app-key',
  host: shared.getHost(),
});

// 调用 Modal 组件
const modalProps: ModalProps = {
  type: 'confirm',
  title: 'Hello SHOPLINE',
  content: 'Welcome to SHOPLINE',
};
Modal.create(app).open(modalProps);
```