amis使用文档

本文档旨在帮助开发人员快速入门amis低代码开发平台。

简介

amis 是一个百度出品的低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

安装

1. node.js安装

下载地址： https://nodejs.org/en/download/

  • 根据系统类型进行选择下载，下载后进行安装。

  • 安装完成后进行环境变量的配置，我的电脑 -> 属性 -> 高级系统设置 -> 环境变量，为nodejs添加系统环境变量。

  • 打开cmd输入node --version 输出版本号则说明安装成功

2. nginx安装

下载地址：http://nginx.org/en/download.html

选择Windows最新稳定版下载，浏览器下载很慢，建议复制下载链接迅雷下载

3. amis SDK下载

  • 在空白目录打开命令行工具，输入npm init 初始化项目，完成后目录会生成package.json

  • 输入npm i amis 下载amis依赖，此过程大概花费2~3分钟，下载好项目目录生成node_modules文件夹

  • 新建index.html文件

  • 在index.html文件中输入代码模板

    <!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <title>amis demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="./node_modules/amis/sdk/sdk.css" />
    <link rel="stylesheet" href="./node_modules/amis/sdk/helper.css" />
    <link rel="stylesheet" href="./node_modules/amis/sdk/iconfont.css" />
    <!-- 这是默认主题所需的，如果是其他主题则不需要 -->
    <!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
    <!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
    <!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
    <style>
        html,
        body,
        .app-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="root" class="app-wrapper"></div>
    <script src="./node_modules/amis/sdk/sdk.js"></script>
    <script type="text/javascript">
        (function () {
        let amis = amisRequire('amis/embed');
        // 通过替换下面这个配置来生成不同页面
        let amisJSON = {
          
        };
        let amisScoped = amis.embed('#root', amisJSON);
      })();
    </script>
</body>

</html>

amis在线编辑器

为了提高网页开发速度，一般先使用在线编辑器拖拽配置开发，然后将相应的json字符串拷贝到本地项目文件中

在线编辑器地址： https://aisuda.github.io/amis-editor-demo/

页面布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NQlKbrXO-1653875803363)(C:\Users\redstar\AppData\Roaming\Typora\typora-user-images\image-20220518140923401.png)]

  • 左侧为菜单栏，分为四个大类包括页面大纲、组件、名字和代码
  • 中间为页面布局，即构建后的页面展示效果
  • 右侧为组件设置，可针对组件进行个性化参数配置

大纲

  • 网页布局，以树形结构展示，通常包括内容区、边栏和工具栏
  • 页面设计过程中合理使用大纲能够提高组件元素的查找速度
  • 使用大纲可以快速添加组件
  • 选中大纲中的节点后，点击代码即为该节点对应的json配置

组件

页面可用组件在组件栏中展示，使用时需要先点击组件添加的所在位置，然后选择组件后会弹出详细介绍，点击插入，在页面右侧可进行组件细节配置

代码

单击组件后选择代码栏可以获取该组件对应的json配置

开发流程

拖拽&配置开发

1. 数据查询

  1. 单击组件栏，选择功能中的增删改查并拖动到内容区中

  2. 点击格式校验并自动生成列配置，接口返回数据正确的话会自动生成列配置

    接口返回数据需要统一格式，示例格式如下：

    {
"status": 0,
"msg": "",
"data": {
 "items": [
   {
     "id": "sample",
     "engine": "sample"
   }
 ],
 "total": 0
}
}

  3. 选择需要启用的功能，对列配置也可以进行相应的更改

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i4RgZ58h-1653875803363)(README.assets/image-20220519154144072.png)]

  1. 点击确认后内容区会生成crud组件并自动请求接口，可以通过查询条件对数据进行筛选

在这里插入图片描述

2. 新增数据

  1. 点击内容区新增按钮，右侧选择动作，按钮行为选择抽出式弹框（Drawer）

  2. 点击配置抽出式弹框内容，修改文字组件显示内容，组件中查找文本框拖入内容区

  3. 右下角按钮组中新增按钮，选择新增按钮中的动作选项，按钮行为选择发送请求，同时配置目标API

  4. 如果需要携带参数，修改url格式为url+?param=${容器组件字段名}，amis会将容器组件中的内容拼接到url后面

  5. 在预览模式下测试新增功能

在这里插入图片描述

3. 修改数据

  1. 点击内容列表的编辑选项，右侧选择动作，点击配置弹窗内容

  2. 新增按钮组件，选择动作，按钮行为为发送请求。配置目标API

  3. 在预览模式下测试修改功能

在这里插入图片描述

4. 删除数据

  1. 点击内容列表的删除选项，右侧选择动作，按钮行为为发送请求

  2. 配置目标API，url最后应当携带当前记录唯一标识作为请求参数

  3. 在预览模式下测试删除功能

在这里插入图片描述

本地开发

  1. 大纲中点击增删改查（API）节点，选择代码
  2. 将json代码拷贝到本地index.html文件中的amisJSON中
  3. 删除items中内容（这部分内容通过接口获取）
  4. 同时可根据项目要求对json代码进行针对性的修改

项目部署

  1. 将项目目录拷贝到nginx文件根目录下的html文件夹中

  2. 修改conf文件夹下nginx.conf文件配置（可根据实际需求更改，这里将80端口改为81）

  3. 在nginx根目录下打开命令行工具输入命令nginx -s reload重新加载配置文件

  4. 打开浏览器输入网址（http://localhost:81/demo）查看效果

在这里插入图片描述

# 前端 # json # npm
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

Redis开源社区持续壮大，华为云为Valkey项目注入新的活力

avatar 华为云开发者联盟
cover

CCE云原生混部场景下的测试案例

avatar 华为云开发者联盟
cover

详解数仓的3A安全能力

avatar 华为云开发者联盟