基础#
type
是 amis 节点中最重要的字段,它告诉 amis 当前节点需要渲染的是Page
组件。
Page
是 amis 页面配置中 必须也是唯一的顶级节点。
简单用法#
组件嵌套#
数据域#
data 作用域#
比如一个接口返回数据结构如下:
{
"status": 0,
"msg": "",
"data": {
"title": "Test Page Component",
"date": "2017-10-13"
}
}
返回数据将获取 data 注入到数据域中,由于 text 没有赋值,则最后页面展示为:
date is 2017-10-13,text is
{
"type": "page",
"initApi": "/amis/api/mock2/page/initData",
"body": "date is ${date},text is ${text}"
}
另外,form 表单 和 url query 参数也会合并到数据域中。
其他作用域#
除了 data 外,还存在其他作用域:
__prev
修改前的值__changeReason
修改原因__changeReason.type
修改原因类型input
用户输入api
api 接口返回触发formula
公式计算触发hide
隐藏属性变化触发init
表单项初始化触发action
事件动作触发
__super
数据链的上一级
table 数据#
"data": {
"items": {
"$table": {
"a": "${a}",
"c": "${c}"
}
}
}
js 作用域#
window
即全局变量ls
即 localStorage, 如果值是 json 对象,可以直接当对象用比如:${ls:xxxxxlocalStrorageKey.xxxx}
ss
即 sessionStorage,同上。cookie
即 cookies,同上。
数据链#
优先从当前节点的 data 属性获取值,如果没有则往父类获取 data 属性。
有个特殊情况是 CRUD 中 filter,实际上是个 form,所以 CRUD 中有两层数据域,第一层是 CRUD 本身,同时查询条件表单中也有一层数据域。
如下是具备数据域的组件:
- App
- Page
- Cards
- Chart
- CRUD
- CRUD2
- Dialog
- Drawer
- List
- Form
- PaginationWrapper
- Service
- Wizard
- Combo
- InputArray
- Table
- Table2
如果你在如:container 的节点中定义 data,模板是获取不到对应值的,需要额外添加一层 service。
另外,对于 data 也有一定要求,必须约定为 key-value 结构:
"data": "some string" // 错误,使用 key 包装
"data": ["a", "b"] // 错误,使用 key 包装
"data": { // 正确
"text": "World!"
}
数据更新#
通常顶层数据域数据更新,孩子中具备数据域的组件都会更新,如果不更新会拿不到最新的值。从功能来看这个更新代价其实是很大的,有性能损耗,比如如果我在顶层更新了个变量
name
,所有的孩子都会重新刷新一遍。 目前 amis 中,具备数据域的组件,默认会检测两层节点的数据是否发生变化(上层数据域和上上层数据域),来决定当前层的数据要不要更新。
trackExpression
逻辑控制#
联动#
跨组件交互#
事件交互#
数据校验#
业务CURD#
列表接口标准返回结构:
配置#
请求 fetch#
设置 initApi/api 类字段,会使用 fetch 发送请求
{
"type": "page",
"initApi": "/amis/api/mock2/page/initData",
"body": "date is ${date}"
}
自定义 filter#
import {registerFilter} from 'amis';
registerFilter('my_replace', (input: string, search: string, repalceWith) =>
typeof input === 'string' ? input.replace(search, repalceWith) : input
);
iconfont 的加载#
sdk 加载方式还需要安装 @fortawesome/fontawesome-free
// https://github.com/baidu/amis/blob/master/examples/app/index.html
import 'amis/lib/helper.css';
import 'amis/sdk/iconfont.css';
import 'amis/lib/themes/antd.css';
import 'amis-ui/lib/themes/antd.css'; // 沃日
import '@fortawesome/fontawesome-free/css/all.css'
其他组件#
“type”: “static”
“type”: “tpl”