专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

百度开源 低代码前端框架 百度前端用什么框架

ins518 2024-10-04 23:39:53 技术文章 11 ℃ 0 评论

amis 是百度开源的低代码前端框架，提供了一种高效的页面开发方式，特别适合需要快速迭代开发的项目。通过 json 配置，amis 简化了开发流程，使得开发者可以专注于业务逻辑和用户体验。

amis 包含布局、分页、选项卡、导航、表单、表格、富文本编辑器、二维码、文件上传、日历、图表等 130+ 组件

amis 的工作原理是将编写好的 json 数据转化成对应的 react 组件，先通过 json 的 type 属性去找到 component，然后把其他属性作为组件的 props 传递过去，最终完成渲染。

通过简单的 json 配置就能实现一个常用组件

示例代码：

table crud

json 配置

{
  "type": "page",
  "body": {
    "type": "crud",
    "api": "/amis/api/mock2/sample",
    - [x] "syncLocation": false,
    "columns": [
      {
        "name": "id",
        "label": "ID"
      },
      {
        "name": "engine",
        "label": "Rendering engine"
      },
      {
        "name": "browser",
        "label": "Browser"
      },
      {
        "type": "operation",
        "label": "操作",
        "buttons": [
          {
            "label": "详情",
            "type": "button",
            "level": "link",
            "actionType": "dialog",
            "dialog": {
              "title": "查看详情",
              "body": {
                "type": "form",
                "body": [
                  {
                    "type": "input-text",
                    "name": "engine",
                    "label": "Engine"
                  },
                  {
                    "type": "input-text",
                    "name": "browser",
                    "label": "Browser"
                  }
                ]
              }
            }
          },
          {
            "label": "删除",
            "type": "button",
            "level": "link",
            "className": "text-danger",
            "disabledOn": "this.grade === 'A'"
          }
        ]
      }
    ]
  }
}

可视化编辑器：

amis 提供可视化编辑工具，通过点击拖拽的方式，生成自定义页面，复制对应的 json 数据到项目文件中，即可完成页面开发功能

使用方法：

原生 js 中使用

<body>
  <div id="root" class="app-wrapper"></div>
  <script src="amis.js"></script>
  <script type="text/javascript">
    (function () {
      let amis = amisRequire('amis/embed');
      // 通过替换下面这个配置来生成不同页面
      let amisJSON = {
        type: 'page',
        title: '表单页面',
        body: {
          type: 'form',
          mode: 'horizontal',
          api: '/saveForm',
          body: [
            {
              label: 'Name',
              type: 'input-text',
              name: 'name'
            },
            {
              label: 'Email',
              type: 'input-email',
              name: 'email'
            }
          ]
        }
      };
      let amisScoped = amis.embed('#root', amisJSON);
    })();
</script>
</body>

react 中使用

class AMISComponent extends React.Component<any, any> {
  render() {
    return renderAmis(
      // 这里是 amis 的 Json 配置。
      {
        type: 'page',
        body: {
          type: 'form',
          api: '/api/form',
          body: [
            {
              type: 'input-text',
              name: 'name',
              label: '姓名'
            },
            {
              name: 'email',
              type: 'input-email',
              label: '邮箱'
            }
          ]
        }
      }
    );
  }
}
class APP extends React.Component<any, any> {
  render() {
    return (
      <>
        <AMISComponent />
      </>
    );
  }
}

vue中使用

<template>
  <amis :amisjson="amisjson"></amis>
</template>
<script setup lang="ts">
  import amis from "../components/AmisReanderer.vue";
  const amisjson={
    type: 'page',
    title: '表单页面',
    body: {
      type: 'form',
      mode: 'horizontal',
      api: '/saveForm',
      body: [
        {
          label: 'Name',
          type: 'input-text',
          name: 'name'
        },
        {
          label: 'Email',
          type: 'input-email',
          name: 'email'
        }
      ]
    }
  }
</script>

amis 特性

低代码开发：通过 JSON 配置而非传统编码方式，降低技术门槛。

多端适配：一套配置适用于 Web、移动端等多种平台。

丰富组件库：提供超过 120 个内置组件，覆盖大多数业务需求。

扩展性：支持自定义组件，结合低代码和传统编码方式。

可视化编辑器：支持使用可视化编辑器制作页面，提高开发效率。

《前端资源推荐》收集各种前端组件UI、插件工具、中后台系统模板、动画库、低代码、可视化资源、开源项目等，如有其他优秀资源，欢迎发消息投稿，感谢点赞、转发、关注！！！

GitHub：https://github.com/baidu/amis

官方文档：https://aisuda.bce.baidu.com/amis

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表