本文主要是介绍amis 基础 （数据域 表达式 api接口），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
数据域
需要注意，只有少数几个容器组件会创建新的数据域，除了最顶层的 Page，还有 CRUD、Dialog、IFrame、Form、Service 等,这几个组件如果平级就获取不到彼此的数据。 (配置了data后，dialog数据域会继承data中数据)
FormItem类型组件： input-text 、select、 combo、editor等不会创建新的数据域，使用父级数据域。
1.首先会向上寻找直到找到form组件，就使用form数据域并将数据设置进去。
ps：clearValueOnHidden属性必须是在form下面的组件才会生效，中间多一层Page等不起作用。
2.若向上找到头未找到form组件，则使用第一个有数据域的父组件，并将数据设置进去。
${}模板从数据域中获取数据.
当前组件在遇到获取变量的场景时(数据链)：
1.首先会先尝试在当前组件的数据域中寻找变量，当在当前数据域中没有找到变量时，则向上寻找，在父组件的数据域中，一直寻找，直到顶级节点，也就是page节点，寻找过程结束。
2.此外如果 url 中有参数，还会继续向上查找这层，所以很多时候配置中可以直接 ${id} 取地址栏参数。
创建数据域：
一、显示配置data属性值
需要注意，只有少数几个容器组件会创建新的数据域，除了最顶层的 Page，还有 CRUD、Dialog、IFrame、Form、Service 等。
例如：Service包裹一层，创建新数据域，区分开俩个data
{
"type": "page",
"data": {
"name": "zhangsan"
},
"body": [
{
"type": "tpl",
"tpl": "my name is ${name}"
},
{
"type": "service",
"data": {
"name": "lisi"
},
"body": {
"type": "container",
"body": {
"type": "tpl",
"tpl": "my name is ${name}"
}
}
}
]
}
data属性中配置表达式${}的话 只能向上取父级数据域的数据。自己组件内的数据取不到。
其他属性里配置表达式。比如： label、api.data配置表达式可以获取到自己的数据域和父级数据域。如下所示：
{
"type": "form",
"body": {
"label": "文本框${da1a}",
"type": "input-text",
"name": "text",
},
"data": {
"da1a": "data",
"da": "${node}", //父级数据域可以
"test": "${da1a}" //自己组件的不可以
}
}
二、配置组件初始化接口initApi
并不是所有组件都支持配置初始化接口来实现数据域初始化操作，对于Table、Cards、List等不支持配置初始化接口的组件来说，一般会使用 Service 组件(api)来辅助实现数据域初始化(搭配source处理dict数组数据,非数组数据直接${date}获取即可).
Page、CRUD、Form、Search Box组件都支持initApi属性配置初始化接口,如下：
{ "type": "page",
"initApi": "/amis/api/initData",
"body": "Hello ${text}" }
对于不支持initApi属性配置初始化接口的组件，可用service包裹起来并配置api属性实现(搭配source处理dict数组数据,非数组数据直接${date}获取即可)例如service+table：
{
"type": "page",
"body": {
"type": "service",
"api": "/amis/api/mock2/crud/table?perPage=5",
"body": {
"type": "table",
"title": "表格1",
"source": "$rows",
"columns": [
{
"name": "engine",
"label": "Engine"
},
{
"name": "version",
"label": "Version"
}
]
}
}
}
api配置的接口返回的数据结构为：
{
"status": 0,
"msg": "ok",
"data": {
"count": 57,
"rows": [
{
"engine": "Trident",
"browser": "Internet Explorer 4.0",
"version": "4",
"id": 1
},
{
"engine": "Trident",
"browser": "Internet Explorer 5.0",
"version": "5",
"id": 2
}
]
}
}
Service功能性容器，除了可以辅助实现数据域初始化外，还可以做动态渲染页面内容。
例如：
{
"type": "page",
"body": {
"type": "service",
"schemaApi": "/amis/api/mock2/service/schema?type=tabs"
}
}
接口返回的数据结构如下(data返回一个tabs页面的json数据)：
{
"status": 0,
"msg": "",
"data": {
"type": "tabs",
"tabs": [
{
"title": "TabA",
"body": "卡片A内容"
},
{
"title": "TabB",
"body": "卡片B内容"
}
]
}
}
表达式语法：
表达式获取变量时支持数据链向上取值：
1.首先会先尝试在当前组件的数据域中寻找变量，当在当前数据域中没有找到变量时，则向上寻找，在父组件的数据域中，一直寻找，直到顶级节点，也就是page节点，寻找过程结束。
2.此外如果 url 中有参数，还会继续向上查找这层，所以很多时候配置中可以直接 ${id} 取地址栏参数。
一、旧表达式 xxOn
可以写js代码,this.xxx获取数据域的数据,(支持数据链向上直到浏览器url)
比如："visibleOn": "this.show === 1"
二、新表达式 ${xxx} 获取数据域的数据,(支持数据链向上直到浏览器url)
比如： ${result===1 ? '通过' : '未通过'}
1.支持简单的运算表达式 ${a % 2} ${ arr[0].title }
2.支持公式函数 MAX MIN IF 等
3.${window:document.title} 意思是从全局变量中取页面的标题
• window 即全局变量
• ls 即 localStorage， 如果值是 json 对象，可以直接当对象用比如：${ls:xxxxxlocalStrorageKey.xxxx}
• ss 即 sessionStorage，同上
4.支持过滤器 和 函数
${title | isTrue : '${title}' :\"${TIMESTAMP(NOW(),'x')}\"}
${IF(true, 'ewqe') // 不加’’均作为变量处理
5.支持嵌套变量
${ name.${test} } //注意如果${ name.${test}-bb } 会将-作为减法运算法来解析,永远为0
三.JavaScript 模板引擎(主要用在tpl中. ) <span><%= data.result %></span>
{
"type": "tpl",
"tpl": "<% if (data.items && data.items.length) { %>Array: <% data.items.forEach(function(item) { %> <span class='label label-default'><%= item %></span> <% }); %><% } %>"
}
获取数据域里数据的方式是<%= data.xxx %> 而不是${xxx}
接口返回格式：
status、msg 和 data 字段为接口返回的必要字段；data必须返回一个具有key-value结构的对象从接口返回的数据中获取(status返回0表示正确返回,否则按错误处理。为了支持多种后端，amis 支持直接返回数据的方式，无需返回 status 和将数据放在 data 字段中)
amis接口按下面格式返回数据：
{
"status": 0,
"msg": "",
"data": {
"text": "World!"
...其他字段
}
}
兼容直接返回数据的格式,这种方式无法显示错误信息，只能通过返回 http 状态码来标识错误
直接返回数据的字段内不允许有status否则不为0均按错误处理
{
"username": "amis",
"email": "amis@amis.com"
}
api请求后端接口：
在api的数据映射(data)属性中可以通过${}获取到input组件的值(通过input标签的name属性绑定)
当变量字段过多的时候，你需要一一映射配置，也许有点麻烦，所以可以使用"&"标识符，来展开所配置变量（"&": "${c}"）
&:$$ 将所有原始数据打平设置到 data 中，只映射本组件数据域。父组件中数据需显示配置上到api.data数据映射中： data:{ "&": "$$", "parentName": "${parent.name}" }
{
"type": "page",
"body": {
"type": "form",
"data": {
"a": "1",
"b": "2",
"c": {
"e": "3",
"f": "4",
"g": "5"
}
},
"api": {
"url": "/amis/api/mock2/form/saveForm",
"method": "post",
"data": {
"name": "${name}",
"email": "${email}",
"&": "${c}"
}
},
"body": [
{
"type": "input-text",
"name": "name",
"label": "姓名："
},
{
"name": "email",
"type": "input-text",
"label": "邮箱："
}
]
}
}
requestAdaptor(请求适配器)属性：
api：api 上的配置项，GET请求通过api.query可获取数据映射的参数，POST请求通过api.data可获取到数据映射的参数。api.data/api.query会与url中query参数进行合并,若参数重名api.data优先
adaptor(接受适配器)属性：
payload：当前请求的响应 payload，即 response.data
response：当前请求的原始响应
api：api 上的配置项，GET请求通过api.query可获取数据映射的参数，POST请求通过api.data可获取到数据映射的参数。api.data/api.query会与url中query参数进行合并,若参数重名api.data优先
这篇关于amis 基础 （数据域 表达式 api接口）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
