App Bridge 开发指南

App Bridge 是 Genstore SDK 的客户端组件，提供了一组 React 组件和工具，使应用能够与 Genstore 店铺后台无缝集成。

TIP

App Bridge 仅支持嵌入式应用，且其提供的 React 组件本质是与上层店铺后台的通信工具或功能插槽，多数功能实现由店铺后台提供。

安装

CLI 项目（推荐）

通过 CLI 创建的项目已自动预置 App Bridge，无需单独安装。

自定义项目

npm install @genstore/app-bridge-react

React 组件

AppProvider

主要功能：自动引入 bridge.js，并完成 bridge 的初始化。

NavMenu

用于向 Genstore 后台上报导航菜单，实现菜单集成。

属性	必须	值类型
Children	否	Link

示例代码

import { json } from '@remix-run/node';
import { Link, Outlet } from '@remix-run/react';

import { AppProvider, NavMenu } from '@genstore/app-bridge-react';

const Navs = () => {
  return (
    <NavMenu>
      <Link to="/app/home" rel="home">
        Home
      </Link>
      <Link to="/app/guide" rel="plans">
        Guide
      </Link>
      <Link to="/app/plans" rel="plans">
        Plans
      </Link>
    </NavMenu>
  );
};
export default function App() {
  return (
    <AppProvider>
      <Navs />
      <Outlet />
    </AppProvider>
  );
}

useAppBridge

获取到 bridge 实例，以便访问其提供的 API。

import { useAppBridge } from '@genstore/app-bridge-react';

export default function Page() {
  const bridge = useAppBridge();
  return <div>Bridge</div>
}

API

config 对象

属性	描述
shopId	当前店铺 ID
locale	当前店铺设定的 locale 值

info 对象

属性	描述
id_token	当前访问 token（非开放 API 访问 token）
darkMode	当前店铺后台的 darkMode 值，跟随上层变化

组件库

建设中