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. 数据查询
- 单击组件栏,选择功能中的增删改查并拖动到内容区中
- 点击格式校验并自动生成列配置,接口返回数据正确的话会自动生成列配置
接口返回数据需要统一格式,示例格式如下:
{
"status": 0,
"msg": "",
"data": {
"items": [
{
"id": "sample",
"engine": "sample"
}
],
"total": 0
}
}
- 选择需要启用的功能,对列配置也可以进行相应的更改
- 点击确认后内容区会生成crud组件并自动请求接口,可以通过查询条件对数据进行筛选
2. 新增数据
- 点击内容区新增按钮,右侧选择动作,按钮行为选择抽出式弹框(Drawer)
- 点击配置抽出式弹框内容,修改文字组件显示内容,组件中查找文本框拖入内容区
- 右下角按钮组中新增按钮,选择新增按钮中的动作选项,按钮行为选择发送请求,同时配置目标API
- 如果需要携带参数,修改url格式为url+?param=${容器组件字段名},amis会将容器组件中的内容拼接到url后面
- 在预览模式下测试新增功能
3. 修改数据
- 点击内容列表的编辑选项,右侧选择动作,点击配置弹窗内容
- 新增按钮组件,选择动作,按钮行为为发送请求。配置目标API
- 在预览模式下测试修改功能
4. 删除数据
- 点击内容列表的删除选项,右侧选择动作,按钮行为为发送请求
- 配置目标API,url最后应当携带当前记录唯一标识作为请求参数
- 在预览模式下测试删除功能
本地开发
- 大纲中点击增删改查(API)节点,选择代码
- 将json代码拷贝到本地index.html文件中的amisJSON中
- 删除items中内容(这部分内容通过接口获取)
- 同时可根据项目要求对json代码进行针对性的修改
项目部署
- 将项目目录拷贝到nginx文件根目录下的html文件夹中
- 修改conf文件夹下nginx.conf文件配置(可根据实际需求更改,这里将80端口改为81)
- 在nginx根目录下打开命令行工具输入命令
nginx -s reload
重新加载配置文件 - 打开浏览器输入网址(http://localhost:81/demo)查看效果