amis

amis 使用(模板 + 数据)

1 index.html

1.1 amis.embed 渲染 json 为前端页面

amis - 低代码前端框架

当前使用的 amis SDK 方式

amis.embed()有4个参数
// 1、容器id
// 2、schema：即页面配置
// 3、props：初始值
// 4、可选的外部控制函数，其中包含了 theme：主题；当然还有其他的可选项

1.2 左侧菜单

static/pages/site.json

visible 属性可以控制是否显示左侧菜单

visible 属性 issue

2 Schema (页面配置)

{
  "type": "page",
  "title": "这是标题部分",
  "subTitle": "这是子标题",
  "remark": "这是小提示信息",
  "aside": "这是侧边栏部分",
  "body": "这是内容区",
  "toolbar": "这是工具栏部分"
}

Page是 amis 页面配置中 必须也是唯一的顶级节点

2.1 容器类型

aside、body 和 toolbar这三个配置都是容器类型，容器类型即可以把其他渲染类型放进来。

上面例子字符串类型内部是把他当成了 tpl 渲染器来处理

{
  "type": "page",
  "body": "这是内容区"
}

等同于:

{
  "type": "page",
  "body": {
    "type": "tpl",
    "tpl": "这是内容区"
  }
}

容器内可以直接放一个渲染器，也可以放多个，用数组包起来即可如：

{
  "type": "page",
  "body": [
    {
      "type": "tpl",
      "tpl": "<p>段落1</p>"
    },
    {
      "type": "tpl",
      "tpl": "<p>段落2</p>"
    },
    "<p>段落3</p>"
  ]
}

3 数据域

{
  "type": "page",
  "body": "Hello ${text}"
}

上面的配置要做的很简单：使用 Page 组件，在内容区内渲染一段模板文字，其中${text}是模板变量，它会去到当前组件的数据域中，获取text变量值。

3.1 通过接口初始化数据域

配置初始化接口 initApi：

{
  "type": "page",
  "initApi": "/amis/api/initData",
  "body": "Hello ${text}"
}

接口必须按照下面的格式返回：

{
  "status": 0,
  "msg": "",
  "data": {
    "text": "World!"
    ...其他字段
  }
}

注意:

1. 并不是所有组件都支持配置初始化接口来实现数据域初始化操作，对于那些不支持配置初始化接口的组件来说，一般会使用 Service 组件 来辅助实现数据域初始化；

2. status、msg 和 data 字段为接口返回的必要字段；

3. data必须返回一个具有key-value结构的对象

3.2 显式配置 data 属性值

{
  "data": {
    "text": "World!",
    "name": "amis"
  },
  "type": "page",
  "body": "Hello ${text}, my name is ${name}."
}

同时配置 初始化接口 和 data属性 时，数据域将会合并初始化接口返回的数据和data属性值