【免费下载】百度Amis快速入门指南：从零开始构建前端页面

2026-02-04 04:29:12作者：苗圣禹Peter

什么是百度Amis？

百度Amis是一款前端低代码框架，通过JSON配置即可快速生成各种页面，极大提升了前端开发效率。它提供了丰富的组件库和灵活的配置方式，适合快速开发各类后台管理系统、数据展示页面等。

两种使用方式

Amis提供了两种使用方式，满足不同开发场景的需求：

1. JS SDK方式（推荐新手使用）

SDK方式适合对前端或React不熟悉的开发者，无需构建工具，直接引入JS文件即可使用。

基本使用步骤

获取SDK文件：
- 通过官方发布的压缩包获取
- 通过npm安装后从node_modules中获取
创建HTML文件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Amis示例</title>
  <!-- 引入Amis样式文件 -->
  <link rel="stylesheet" href="sdk.css">
  <link rel="stylesheet" href="helper.css">
  <link rel="stylesheet" href="iconfont.css">
</head>
<body>
  <div id="root"></div>
  
  <!-- 引入Amis核心JS -->
  <script src="sdk.js"></script>
  
  <script>
    (function() {
      let amis = amisRequire('amis/embed');
      let amisJSON = {
        type: 'page',
        title: '我的第一个Amis页面',
        body: '欢迎使用Amis!'
      };
      amis.embed('#root', amisJSON);
    })();
  </script>
</body>
</html>

核心功能详解

主题切换： Amis支持多种主题，默认使用"云舍"主题(cxd)，如需使用Ant Design风格主题：
```
amis.embed('#root', schema, {}, {
  theme: 'antd'
});
```

数据传递：可以通过props传递初始数据：

amis.embed('#root', schema, {
  data: {
    username: '张三'
  }
});

组件交互：获取组件实例并操作：

let amisScoped = amis.embed('#root', schema);
// 获取表单值
let values = amisScoped.getComponentByName('form1').getValues();
// 设置表单值
amisScoped.getComponentByName('form1').setValues({name: '李四'});

2. React方式（适合React项目）

在React项目中使用Amis可以获得更好的开发体验和更强的定制能力。

基本集成步骤

安装依赖：

npm install amis axios copy-to-clipboard

在React组件中使用：

import React from 'react';
import { render as renderAmis } from 'amis';

class AmisDemo extends React.Component {
  render() {
    return (
      <div>
        {renderAmis({
          type: 'page',
          title: 'React集成示例',
          body: {
            type: 'form',
            body: [
              {
                type: 'text',
                name: 'name',
                label: '姓名'
              }
            ]
          }
        }, {}, {
          fetcher: ({ url, method, data }) => {
            // 实现ajax请求
          }
        })}
      </div>
    );
  }
}

核心配置说明

fetcher函数：必须实现的接口请求函数，Amis所有数据请求都通过此函数完成。

主题设置：

import 'amis/lib/themes/cxd.css';  // 引入主题样式
// 渲染时指定主题
renderAmis(schema, {}, { theme: 'cxd' });

环境配置：

{
  notify: (type, msg) => {},  // 消息提示
  alert: (msg) => {},        // 警告提示
  confirm: (msg) => {},      // 确认对话框
  jumpTo: (to) => {},        // 页面跳转
  copy: (text) => {}         // 复制功能
}

最佳实践建议

开发环境搭建：
- 新手建议从SDK方式开始，快速体验Amis能力
- 正式项目推荐使用React集成方式，便于维护和扩展
组件使用技巧：
- 善用name属性命名组件，便于后续获取实例
- 复杂页面可以拆分为多个JSON配置，通过type: 'service'动态加载
性能优化：
- 大数据量表格使用静态数据时，开启lazyRender属性
- 频繁更新的组件使用"static": true避免不必要的重渲染
调试技巧：
- 在浏览器控制台通过amisScoped变量访问组件实例
- 使用Amis调试工具分析JSON配置

常见问题解决方案

样式不生效：
- 检查是否正确引入了所有CSS文件
- 确认没有其他CSS覆盖了Amis样式
请求跨域问题：
- 实现fetcher函数时配置withCredentials
- 后端需要配置CORS头
组件渲染异常：
- 检查JSON配置是否符合规范
- 查看控制台错误信息

通过本指南，您应该已经掌握了Amis的基本使用方法。Amis的强大之处在于其丰富的组件和灵活的配置方式，建议在实践中逐步探索更多高级功能。

amis

前端低代码框架，通过 JSON 配置就能生成各种页面。

项目地址：https://gitcode.com/GitHub_Trending/am/amis

登录后查看全文

【免费下载】 百度Amis快速入门指南：从零开始构建前端页面