---
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/actions/message'
  md: 'https://developer.shopline.com/zh-hans-cn/docs/apps/development-tool/app-bridge/actions/message.md'
---
# 消息

Message（消息）是一个用于显示轻量级通知消息的组件，通常显示在页面顶部，用于传达操作结果、错误提示或其他重要信息。与 Modal 不同，Message 不会中断当前操作，而是会在短暂停留后自动消失，以此提供一种轻量、即时的反馈体验。

## 快速开始{#SrgaI}

以下示例展示了消息组件的基本实现方式：

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

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

// 2. 创建 Message 实例
const message = Message.create(app);

// 3. 显示成功消息
message.open({
  type: 'success',
  messageInfo: '商品创建成功',
});

// 显示错误消息
message.open({
  type: 'error',
  messageInfo: '保存失败，请稍后重试',
});

// 显示警告消息
message.open({
  type: 'warn',
  messageInfo: '商品库存不足',
});

// 显示信息提示
message.open({
  type: 'info',
  messageInfo: '正在处理中，请稍候',
});
```

当调用 `open()` 方法后，会在页面顶部显示消息通知，效果如下：

![](https://s2cdn.myshopline.com/slfs/op-new/177329781923653/1768811001164-b2b0adfc-d7c2-4007-be43-3920aed0613e.png)

## API 方法{#dIWYt}

### open(){#laIT9}

```typescript
(config: MessageOption): void
```

显示消息通知。

#### 参数{#WkYck}

| 参数   | 类型            | 说明                                                 | 必填 |
| ------ | --------------- | ---------------------------------------------------- | ---- |
| config | `MessageOption` | 消息配置，详见下方 [类型定义](#xFCaE) 中的参数说明。 | 是   |

#### 使用示例{#pq8MF}

```javascript
// 成功消息
message.open({
  type: 'success',
  messageInfo: '操作成功',
});
```

---

## 类型定义{#cAsbc}

### MessageOption{#xFCaE}

`open()` 方法的配置参数。

| 参数        | 类型                                             | 说明                             | 必填 |
| ----------- | ------------------------------------------------ | -------------------------------- | ---- |
| type        | `'success'` \| `'error'` \| `'warn'` \| `'info'` | 消息类型，决定消息的样式和图标。 | 是   |
| messageInfo | string                                           | 消息内容文本。                   | 是   |

**消息类型说明：**

| 类型      | 说明     | 使用场景             |
| --------- | -------- | -------------------- |
| `success` | 成功消息 | 操作成功的反馈       |
| `error`   | 错误消息 | 操作失败或错误提示   |
| `warn`    | 警告消息 | 警告信息或注意事项   |
| `info`    | 信息提示 | 一般性信息或进度提示 |

## 使用示例{#CAOIs}

### 示例 1：保存操作反馈{#PwMF1}

```javascript
const handleSave = async (data) => {
  try {
    await saveData(data);

    // 显示成功消息
    message.open({
      type: 'success',
      messageInfo: '数据保存成功',
    });
  } catch (error) {
    // 显示错误消息
    message.open({
      type: 'error',
      messageInfo: '保存失败：' + error.message,
    });
  }
};
```

### 示例 2：表单验证提示{#GCIDm}

```javascript
const validateForm = (formData) => {
  if (!formData.title) {
    message.open({
      type: 'warn',
      messageInfo: '请输入商品标题',
    });
    return false;
  }

  if (!formData.price || formData.price <= 0) {
    message.open({
      type: 'warn',
      messageInfo: '请输入有效的商品价格',
    });
    return false;
  }

  return true;
};
```

### 示例 3：异步操作进度提示{#YPUls}

```javascript
const syncProducts = async () => {
  // 显示开始同步的信息
  message.open({
    type: 'info',
    messageInfo: '正在同步商品数据...',
  });

  try {
    const result = await syncProductsFromServer();

    // 显示成功消息
    message.open({
      type: 'success',
      messageInfo: `成功同步 ${result.count} 个商品`,
    });
  } catch (error) {
    // 显示错误消息
    message.open({
      type: 'error',
      messageInfo: '同步失败，请稍后重试',
    });
  }
};
```