[{"value":"快速开始","id":"SrgaI","hLevel":2,"level":1},{"value":"API 方法","id":"dIWYt","hLevel":2,"level":1,"children":[{"value":"open()","id":"laIT9","hLevel":3,"level":2}]},{"value":"类型定义","id":"cAsbc","hLevel":2,"level":1,"children":[{"value":"MessageOption","id":"xFCaE","hLevel":3,"level":2}]},{"value":"使用示例","id":"CAOIs","hLevel":2,"level":1,"children":[{"value":"示例 1：保存操作反馈","id":"PwMF1","hLevel":3,"level":2},{"value":"示例 2：表单验证提示","id":"GCIDm","hLevel":3,"level":2},{"value":"示例 3：异步操作进度提示","id":"YPUls","hLevel":3,"level":2}]}]

消息

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

快速开始

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

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() 方法后，会在页面顶部显示消息通知，效果如下：

API 方法

open()

(config: MessageOption): void

显示消息通知。

参数

参数	类型	说明	必填
config	`MessageOption`	消息配置，详见下方类型定义中的参数说明。	是

使用示例

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

类型定义

MessageOption

open() 方法的配置参数。

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

消息类型说明：

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

使用示例

示例 1：保存操作反馈

const handleSave = async (data) => {
  try {
    await saveData(data);
    // 显示成功消息
    message.open({
      type: 'success',
      messageInfo: '数据保存成功',
    });
  } catch (error) {
    // 显示错误消息
    message.open({
      type: 'error',
      messageInfo: '保存失败：' + error.message,
    });
  }
};

示例 2：表单验证提示

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：异步操作进度提示

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: '同步失败，请稍后重试',
    });
  }
};