安装Amis

Amis

amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。amis 可以高效的实现数据的增删改查CRUD，对于大部分简单的数据表，我们能够不用写代码自然是最好的。它最大的优势是，不需要代码就可以实现许多我们需要实现的功能。
做这个项目的初衷就是要用Amis实现简单的操作，用Ant design 组件实现更加自由的操作。前面我们已经用Ant design pro 实现了基础框架。现在是时候把Amis集成进来了。

Amis 安装

因为amis现在更新还非常频繁，为了能够确保我们安装的版本更加稳定一下，我选择了指定版本安装。

npm install amis@2.3.1 --save

安装成功之后，可以开始测试是不是能够把amis集成进来。为此我们需要增加一个测试页面。

新增页面

1、在 src / pages 下创建一个新的文件夹mytest,并且在改文件夹里面添加index.tsx 文件。

config
src
  models
  pages
+   mytest
    + index.tsx
  ...
...
package.json

2、页面代码如下

const testPage: React.FC = () => {
  return <div>my test page</div>;
};
export default testPage;

3、添加新路由
在config/config.ts里面的routes，添加新的路由。

{
      path: '/mytest',
      name: 'mytest',
      icon: 'smile',
      component: './mytest',
},

4、热更新之后，我们可以看到如下画面

5、参考amis官网，在新页面里面提交amis代码，实现用json代码展现功能页面，只是为了测试，我们随意加载amis官方一段代码，修改后的index.tsx代码如下：

import axios from 'axios';
import copy from 'copy-to-clipboard';
import 'amis/lib/themes/cxd.css';

import { render as renderAmis } from 'amis';
import { ToastComponent, AlertComponent, toast } from 'amis-ui';
const AmisComponent: React.FC = () => {
  const theme = 'cxd';
  const locale = 'zh-CN';
  // 请勿使用 React.StrictMode，目前还不支持
  return (
    <div>
      <p>通过 amis 渲染页面</p>
      <ToastComponent theme={theme} key="toast" position={'top-right'} locale={locale} />
      <AlertComponent theme={theme} key="alert" locale={locale} />
      {renderAmis(
        {
          type: 'page',
          body: {
            type: 'form',
            debug: true,
            api: '/amis/api/mock2/form/saveForm',
            body: [
              {
                name: 'city',
                type: 'input-city',
                label: '城市',
                searchable: true,
              },
            ],
          },
        },
        {
          // props...
          // locale: 'en-US' // 请参考「多语言」的文档
          // scopeRef: (ref: any) => (amisScoped = ref)  // 功能和前面 SDK 的 amisScoped 一样
        },
        {
          // 下面三个接口必须实现
          fetcher: ({
            url, // 接口地址
            method, // 请求方法 get、post、put、delete
            data, // 请求数据
            responseType,
            config, // 其他配置
            headers, // 请求头
          }: any) => {
            config = config || {};
            config.withCredentials = true;
            responseType && (config.responseType = responseType);

            if (config.cancelExecutor) {
              config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor);
            }

            config.headers = headers || {};

            if (method !== 'post' && method !== 'put' && method !== 'patch') {
              if (data) {
                config.params = data;
              }

              return (axios as any)[method](url, config);
            } else if (data && data instanceof FormData) {
              config.headers = config.headers || {};
              config.headers['Content-Type'] = 'multipart/form-data';
            } else if (
              data &&
              typeof data !== 'string' &&
              !(data instanceof Blob) &&
              !(data instanceof ArrayBuffer)
            ) {
              data = JSON.stringify(data);
              config.headers = config.headers || {};
              config.headers['Content-Type'] = 'application/json';
            }

            return (axios as any)[method](url, data, config);
          },
          isCancel: (value: any) => (axios as any).isCancel(value),
          copy: (content) => {
            copy(content);
            toast.success('内容已复制到粘贴板');
          },
          theme,

          // 后面这些接口可以不用实现

          // 默认是地址跳转
          // jumpTo: (
          //   location: string /*目标地址*/,
          //   action: any /* action对象*/
          // ) => {
          //   // 用来实现页面跳转, actionType:link、url 都会进来。
          // },

          // updateLocation: (
          //   location: string /*目标地址*/,
          //   replace: boolean /*是replace，还是push？*/
          // ) => {
          //   // 地址替换，跟 jumpTo 类似
          // },

          // isCurrentUrl: (
          //   url: string /*url地址*/,
          // ) => {
          //   // 用来判断是否目标地址当前地址
          // },

          // notify: (
          //   type: 'error' | 'success' /**/,
          //   msg: string /*提示内容*/
          // ) => {
          //   toast[type]
          //     ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
          //     : console.warn('[Notify]', type, msg);
          // },
          // alert,
          // confirm,
          // tracker: (eventTracke) => {}
        },
      )}
    </div>
  );
};
export default AmisComponent;

其中，特别提醒，要导入css样式，否则的话呈现出来的界面会很混乱。代码如下：

import 'amis/lib/themes/cxd.css';

这行代码在amis的官网里面是没有的，这个坑我踩过。考虑到后面有可能会直接修改amis的样式，建议把依赖库里面的css文件copy到代码文件夹里面，这样可以不受amis升级影响，避免直接修改amis样式的时候，会被amis升级信息覆盖掉。

config
src
  models
  pages
+   mytest
    + index.tsx
    + cdx.css
  ...
...
package.json

index.ts的页面代码，修改如下：

import './cxd.css';

以上，仅供参考，也可以考虑采用amis官网上面关于在amis中自定义样式的其它方式。

关于amis样式

amis官网上面关于amis自定义样式有四种方式
1、使用 CSS 变量动态修改，通过这种方式修改大部分 amis 组件的样式，所有组件都会生效，注意这种方法不支持 IE11。
2、使用辅助 class，可以对单个组件做定制修改。
3、自己生成主题 CSS，可以修改所有配置，目前只能通过源码方式，请参考 scss\themes\cxd.scss 文件，修改变量后重新编译一个 css，需要注意这种方式在更新 amis 版本的时候最好重新编译，否则就会出现使用旧版 css 的情况，可能导致出错，因此不推荐使用。
4、wrapper 组件可以直接写内嵌 style。

另外amis官网提供的主题编辑器，点击链接可以直接进入。通过主题编辑器，可以比较直观操作。

最终呈现界面