前端低代码工具amis使用文档
amis使用文档
本文档旨在帮助开发人员快速入门amis低代码开发平台。
简介
amis 是一个百度出品的低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。
安装
1. node.js安装
下载地址： /
-
根据系统类型进行选择下载，下载后进行安装。
-
安装完成后进行环境变量的配置，我的电脑 -> 属性 -> 高级系统设置 -> 环境变量，为nodejs添加系统环境变量。
-
打开cmd输入
node --version输出版本号则说明安装成功
2. nginx安装
下载地址：.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字符串拷贝到本地项目文件中
在线编辑器地址： /
页面布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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）查看效果
发布者：admin，转转请注明出处：http://www.yc00.com/web/1690545527a367608.html
评论列表（0条）