[{"value":"安装","id":"安装","hLevel":2,"level":1},{"value":"使用","id":"使用","hLevel":2,"level":1,"children":[{"value":"初始化","id":"初始化","hLevel":3,"level":2},{"value":"参数说明","id":"参数说明","hLevel":3,"level":2},{"value":"示例","id":"示例","hLevel":3,"level":2}]}]

入门

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

安装

通过以下命令安装 App Bridge：

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

使用

初始化

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

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 组件的示例：

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);