深入理解baidu/amis：如何将其作为UI库灵活使用

吴铎根

于 2025-06-02 09:02:34 发布

阅读量219

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_01136/article/details/148375086

深入理解baidu/amis：如何将其作为UI库灵活使用

amis 前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/gh_mirrors/am/amis

baidu/amis是一个强大的前端低代码框架，它不仅支持纯JSON配置的开发方式，还提供了丰富的API和组件，可以像传统UI库一样在代码中直接调用。本文将详细介绍如何将amis作为UI库使用，实现低代码与代码开发的完美结合。

为什么要将amis作为UI库使用

虽然amis的纯配置方式能够满足大部分场景需求，但在某些复杂交互场景下，我们可能需要：

实现amis内置交互无法满足的特殊功能
在特定事件发生时执行自定义逻辑
复用amis提供的精美UI组件
在已有React项目中逐步引入amis

事件监听机制

amis提供了完善的事件监听机制，允许开发者在关键节点插入自定义逻辑。

表单事件监听

{
  type: 'form',
  onFinished: values => {
    console.log('表单提交数据:', values);
    return false; // 阻止amis默认提交行为
  },
  body: [
    {
      label: '用户名',
      type: 'input-text',
      name: 'username',
      onChange: value => {
        console.log('用户名变化:', value);
      }
    }
  ]
}

在这个例子中，我们监听了表单提交和输入框变化事件，可以在这些回调中实现数据验证、自动填充等复杂逻辑。

按钮点击事件

{
  type: 'button',
  label: '自定义操作',
  onClick: (event, props) => {
    // 使用表单store修改其他字段值
    props.formStore.setValues({status: 'active'});
    // 显示通知
    amisRequire('amis').toast.success('操作成功');
  }
}

按钮点击事件接收两个参数：原生事件对象和组件属性对象，通过后者可以访问amis内部状态和方法。

广播事件系统

amis 3.0.0及以上版本引入了更强大的事件系统，支持组件间通信。

配置广播事件

{
  type: 'form',
  onEvent: {
    submitSucc: {
      actions: [
        {
          actionType: 'broadcast',
          args: {
            eventName: 'formSubmitted'
          }
        }
      ]
    }
  }
}

监听广播事件

在React组件中渲染amis时，可以通过onBroadcast属性监听内部广播：

function App() {
  const handleBroadcast = (eventName, eventData, context) => {
    if (eventName === 'formSubmitted') {
      console.log('表单提交成功', eventData);
    }
  };

  return (
    <div>
      {renderAmis(schema, {}, {onBroadcast: handleBroadcast})}
    </div>
  );
}

这种机制非常适合在复杂应用中实现组件间的松耦合通信。

使用amis公共方法

amis提供了丰富的工具方法，可以通过amisRequire获取：

const amisLib = amisRequire('amis');

// 显示提示消息
amisLib.toast.info('操作提示');

// 显示确认对话框
amisLib.confirm('确定要删除吗？').then(confirmed => {
  if (confirmed) {
    // 执行删除操作
  }
});

常用方法包括：

toast: 消息提示
alert/confirm: 弹窗提示
copyContents: 复制内容到剪贴板
formatDate: 日期格式化

直接使用amis React组件

对于React项目，可以直接引入amis的UI组件：

import {Button, Alert} from 'amis-ui';

function CustomComponent() {
  return (
    <div>
      <Button type="submit" level="primary">提交</Button>
      <Alert type="warning">注意：操作不可逆</Alert>
    </div>
  );
}

这种方式可以：