Skip to main content
  1. Blogs/
  2. 前端开发/
  3. 低代码/
  4. amis/

·278 words·2 mins
Table of Contents

基础
#

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”