【免费下载】百度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快速入门指南：从零开始构建前端页面

什么是百度Amis？

两种使用方式

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

基本使用步骤

核心功能详解

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

基本集成步骤

核心配置说明

最佳实践建议

常见问题解决方案

热门内容推荐

最新内容推荐

项目优选

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

什么是百度Amis？

两种使用方式

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

基本使用步骤

核心功能详解

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

基本集成步骤

核心配置说明

最佳实践建议

常见问题解决方案

相关内容推荐

热门内容推荐

最新内容推荐

项目优选

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