初识amis

  amis 是一种低代码前端框架，不需要编写前端就可以提供完整的页面解决方案，并且不需要JavaScript只需要JSON配置就可以实现完整的功能开发。

  不需要学习前端框架与工具就能完成前端配置，何乐而不为呢。

那amis有哪些亮点让你使用它呢？

首先肯定是简单，略懂甚至不懂前端都可以使用。然后是不收前端技术更新的限制，并且amis本身也会不断升级。其自身内含大量组件支持扩展嵌套以及可视化编辑。

  上手amis 首先就是看amis的文档，看amis的介绍以及概念，了解amis 最基本的内容

  一个最简单的amis配置看起来是这样的：

{
  "type": "page",
  "body": "Hello World!"
}

   使用amis 可以极大减少代码量。

amsi的渲染过程是将json转换为对应的react组件，先通过 json 的 type 找到对应的 Component，然后把其他属性作为 props 传递过去完成渲染。

例如react组件开发的表单页面长这样

<Page title="页面标题" subTitle="副标题">
  <Form
    title="用户登录"
    body={[
      {
        type: 'input-text',
        name: 'username',
        label: '用户名'
      }
    ]}
  />
</Page>

 那么换成amis JSON则是这样

{
  "type": "page",
  "title": "页面标题",
  "subTitle": "副标题",
  "body": {
    "type": "form",
    "title": "用户登录",
    "body": [
      {
        "type": "input-text",
        "name": "username",
        "label": "用户名"
      }
    ]
  }
}

amis 不仅有纯配置的方法，还能当成UI库来使用，实现 90% 低代码，10% 代码开发的混合模式，amis提供了消息监听，消息弹出通知等公共方法

这是实现按钮交互的例子代码

{

  "type": "page",

  "body": {

    "label": "弹框",

    "type": "button",

    "actionType": "dialog",

    "dialog": {

      "title": "弹框",

      "body": "这是个简单的弹框。"

    }

  }

}

amis可以实现的组件还有很多，希望之后的学习能够使用到。

这些仅仅是amis的最简单基本的内容，之后的内容还有待学习。

在本次学习中，我主要研究amis的功能组件，学习各种按钮组件容器的使用方法，并能使用amis做出简单的实践。

文章仅供本人学习使用，不具有任何参考查阅价值，读者须知。

标签：body,前端,初识,使用,组件,type,amis
来源： https://blog.csdn.net/qq_44753927/article/details/120564967