基于低代码框架的开发：AMIS+React

上一期讲了如何在AMIS的编辑器中搭建页面，今天来讲讲如何在react项目中使用amis SDK对编辑器生成的json包解译。

初始化项目

请参照官方提供Demo: GitHub - aisuda/amis-react-starter: amis react 初始项目示例。

安装

npm i amis

修改配置文件 

这是我目前的配置文件信息：

{
  "name": "amis-react-starter",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.1.1",
    "@types/jest": "^27.0.3",
    "@types/node": "^16.11.11",
    "@types/react-dom": "^17.0.14",
    "amis": "^6.9.0",
    "amis-ui": "^6.9.0",
    "axios": "^0.26.1",
    "copy-to-clipboard": "^3.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.28.0",
    "typescript": "^4.4.3"
  },
  "scripts": {
    "start": "node server.js",
    "build": "webpack",
    "server": "node server.js",
    "vite": "vite",
    "vite-build": "vite build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^1.1.0",
    "@vue/compiler-sfc": "^3.0.4",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.5.1",
    "express": "^4.17.1",
    "file-loader": "^6.2.0",
    "fork-ts-checker-webpack-plugin": "^7.2.1",
    "html-webpack-plugin": "^5.5.0",
    "monaco-editor-webpack-plugin": "^6.0.0",
    "prettier": "^2.2.1",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.2.6",
    "url-loader": "^4.1.1",
    "vite": "^2.6.14",
    "webpack": "^5.46.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-middleware": "^5.2.2",
    "webpack-dev-server": "^4.6.0"
  }
}

AMIS环境变量

在初始化的react项目包中已配置好了基本的env，大家可以看看有什么用途：

// amis 环境配置
const env = {
  // 下面三个接口必须实现
  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: string) => {
    copy(content);
    toast.success('内容已复制到粘贴板');
  },

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

  // 默认是地址跳转
  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,
};

这是一个基于 amis 框架的环境配置文件,主要定义了一些核心功能接口:

• fetcher - 核心的网络请求处理器:

• 处理 HTTP 请求(GET、POST、PUT、DELETE 等)

• 配置请求头、请求参数

• 处理不同类型的请求数据(JSON、FormData 等)

• 使用 axios 作为底层请求库

• isCancel - 用于判断请求是否被取消

• copy - 复制内容到剪贴板的功能,会显示成功提示

4. 其他可选接口:

• jumpTo - 页面跳转

• updateLocation - 更新地址

• isCurrentUrl - 判断当前 URL

• notify - 系统通知提示

• alert/confirm - 系统弹窗

这些配置主要用于:

1. 统一管理所有的网络请求

• 提供统一的用户交互方式(提示、跳转等)

• 确保整个应用有一致的行为表现

这是 amis 低代码平台的基础配置,为整个应用提供了标准化的接口和行为。

需要注意的是:

• 前三个接口(fetcher、isCancel、copy)是必须实现的

• 后面的接口是可选的,根据实际需求实现

• 整个配置都是为了让 amis 能够正常工作的必要环境支持

使用指南

举个栗子

const schema = {
  type: 'page',
  title: '示例页面',
  body: [
    {
      type: 'form',
      api: '/api/form/save',
      body: [
        {
          type: 'input-text',
          name: 'name',
          label: '姓名'
        },
        {
          type: 'input-email',
          name: 'email',
          label: '邮箱'
        },
        {
          type: 'submit',
          label: '提交'
        }
      ]
    }
  ]
};

class AMISComponent extends React.Component {
  render() {
    return renderAmis(schema, {
      // 可以传入数据
      data: {
        name: '张三'
      }
    }, env);
  }
}

主要就是使用render()解包json进行渲染。

render(schema, props, env) => JSX.Element;

 案例

案例是一个展示md格式文件内容的页面，长这样

右下角三个按钮实现了刷新、返回主页、退出功能。

注：这只是一个项目的一部分～如果感兴趣，可以见gitee：https://gitee.com/xiang0430/amis-react-test.git