amis-快速入门
1、下载
-
打开网址amis网址：aims
-
点击发行版，跳转至下载页面
-
下载
2、使用
-
将下载下来的压缩包，解压到sdk的文件夹内，并在项目中放入sdk文件夹，如项目名称为demo
-
在demo文件夹内（sdk文件夹外）新增
index.html文件 -
在
index.html文件中引入相关的css与js文件
<!-- 引入sdk的css文件 -->
<link rel="stylesheet" href="./sdk/sdk.css">
<link rel="stylesheet" href="./sdk/helper.css">
<link rel="stylesheet" href="./sdk/iconfont.css">
<!-- 引入sdk.js -->
<script src="./sdk/sdk.js"></script>
- 定义容器
<div id="root" class="app-wrapper"></div>
- 在script标签内进行定义并渲染
<script>
(function () {
// 初始化
let amis = amisRequire('amis/embed');
// 通过替换下面这个配置来生成不同页面
let amisJSON = {
type: 'page',
title: '登录界面',
body: {
type: 'form',
title: '登录',
mode: 'horizontal',
api: '/saveForm',
body: [
{
label: '登录名',
type: 'input-text',
name: 'name'
},
{
label: '密码',
type: 'input-password',
name: 'password'
}
]
}
};
// 开始渲染，放入渲染容器#root，渲染的页面内容是amisJSON
let amisScoped = amis.embed('#root', amisJSON);
})();
</script>
3、完整的代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ceshi</title>
<!-- 引入sdk的css文件 -->
<link rel="stylesheet" href="./sdk/sdk.css">
<link rel="stylesheet" href="./sdk/helper.css">
<link rel="stylesheet" href="./sdk/iconfont.css">
<!-- 引入sdk.js -->
<script src="./SDK/sdk.js"></script>
<!-- 页面的样式 -->
<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 type="text/javascript">
(function () {
// 初始化
let amis = amisRequire('amis/embed');
// 通过替换下面这个配置来生成不同页面
let amisJSON = {
type: 'page',
title: '登录界面',
body: {
type: 'form',
title: '登录',
mode: 'horizontal',
api: '/saveForm',
body: [
{
label: '登录名',
type: 'input-text',
name: 'name'
},
{
label: '密码',
type: 'input-password',
name: 'password'
}
]
}
};
// 开始渲染，放入渲染容器#root，渲染的页面内容是amisJSON
let amisScoped = amis.embed('#root', amisJSON);
})();
</script>
</body>
</html>
效果如下：
4、切换主题
- 如果要切换主题，则还需引用对应的css文件，如切换成
antd主题
<link rel="stylesheet" href="./sdk/antd.css">
- 同时，
amis.embed函数的第四个参数需要加入theme属性
let amisScoped = amis.embed(
// amis.embed()有4个参数
// 1、容器id
// 2、schema：即页面配置，此例子对应的是amisJSON
// 3、props：初始值
// 4、可选的外部控制函数，其中包含了 theme：主题；当然还有其他的可选项
'#root',
amisJSON,
{
// 这里是初始 props
},
{
theme:'antd'
}
);
- 完整代码如下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ceshi</title>
<!-- 引入sdk的css文件 -->
<link rel="stylesheet" href="./sdk/sdk.css">
<link rel="stylesheet" href="./sdk/helper.css">
<link rel="stylesheet" href="./sdk/iconfont.css">
<!-- antd主题 -->
<link rel="stylesheet" href="./sdk/antd.css">
<!-- 引入sdk.js -->
<script src="./SDK/sdk.js"></script>
<!-- 页面的样式 -->
<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 type="text/javascript">
(function () {
// 初始化
let amis = amisRequire('amis/embed');
// 通过替换下面这个配置来生成不同页面
let amisJSON = {
type: 'page',
title: '登录界面',
body: {
type: 'form',
title: '登录',
mode: 'horizontal',
api: '/saveForm',
body: [
{
label: '登录名',
type: 'input-text',
name: 'name'
},
{
label: '密码',
type: 'input-password',
name: 'password'
}
]
}
};
// 开始渲染，放入渲染容器#root，渲染的页面内容是amisJSON
let amisScoped = amis.embed(
'#root',
amisJSON,
{
// 这里是初始 props
},
{
theme: 'antd'
}
);
})();
</script>
</body>
</html>
5、初始值
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ceshi</title>
<!-- 引入sdk的css文件 -->
<link rel="stylesheet" href="./sdk/sdk.css">
<link rel="stylesheet" href="./sdk/helper.css">
<link rel="stylesheet" href="./sdk/iconfont.css">
<!-- 引入sdk.js -->
<script src="./SDK/sdk.js"></script>
<!-- 页面的样式 -->
<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 type="text/javascript">
(function () {
// 初始化
let amis = amisRequire('amis/embed');
// 通过替换下面这个配置来生成不同页面
let amisJSON = {
type: 'page',
title: '登录界面',
body: {
type: 'form',
title: '登录',
mode: 'horizontal',
api: '/saveForm',
body: [
{
label: '登录名',
type: 'input-text',
name: 'name'
},
{
label: '密码',
type: 'input-password',
name: 'password'
}
]
}
};
// 开始渲染，放入渲染容器#root，渲染的页面内容是amisJSON
let amisScoped = amis.embed(
'#root',
amisJSON,
// 第三个参数，配置初始值
// 登录名的初始值是admin
// 密码的初始值是123456
{
data: {
name: 'admin',
password: '123456'
}
},
);
})();
</script>
</body>
</html>
效果如下：
6、amis.embed 函数
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ceshi</title>
<link rel="stylesheet" href="./sdk/sdk.css">
<link rel="stylesheet" href="./sdk/helper.css">
<link rel="stylesheet" href="./sdk/iconfont.css">
<script src="./sdk/sdk.js"></script>
<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>
(function () {
// 初始化
let amis = amisRequire('amis/embed');
// 配置页面
let amisJSON = {
type: 'page',
title: '登录界面',
body: {
type: 'form',
title: '登录',
mode: 'horizontal',
api: '/saveForm',
body: [
{
label: '登录名',
type: 'input-text',
name: 'name'
},
{
label: '密码',
type: 'input-password',
name: 'password'
}
]
}
};
// 渲染
// amis.embed()有4个参数
let amisScoped = amis.embed(
'#root', // 1、容器id
amisJSON, // 2、schema：即页面配置，此例子对应的是amisJSON
{
// 3、props：初始值
},
// 第4个参数，可选的外部控制函数
{
// 在 sdk 中可以不传，用来实现 ajax 请求，但在 npm 中这是必须提供的
// fetcher: (url, method, data, config) => {},
// 全局 api 请求适配器，另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
// requestAdaptor(api) {
// return api;
// }
// 全局 api 适配器，另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
// responseAdaptor(api, payload, query, request, response) {
// return payload;
// }
// 用来接管页面跳转，比如用 location.href 或 window.open，或者自己实现 amis 配置更新
// jumpTo: to => { location.href = to; },
// 用来实现地址栏更新
// updateLocation: (to, replace) => {},
// 用来判断是否目标地址当前地址。
// isCurrentUrl: url => {},
// 用来实现复制到剪切板
// copy: content => {},
// 用来实现通知
// notify: (type, msg) => {},
// 用来实现提示
// alert: content => {},
// 用来实现确认框。
// confirm: content => {},
// 主题，默认是 default，还可以设置成 cxd 或 dark，但记得引用它们的 css，比如 sdk 目录下的 cxd.css
// theme: 'cxd'
// 用来实现用户行为跟踪，详细请查看左侧高级中的说明
// tracker: (eventTracker) => {},
// Toast提示弹出位置，默认为'top-center'
// toastPosition: 'top-right' | 'top-center' | 'top-left' | 'bottom-center' | 'bottom-left' | 'bottom-right' | 'center'
}
);
})();
</script>
</body>
</html>
- 同时返回的
amisScoped对象可以获取到amis渲染的内部信息getComponentByName(name)用于获取渲染出来的组件- 如下面的示例中：
amisScoped.getComponentByName('page1.form1').getValues()— 获取到所有表单的值，需要注意page和form都需要有name属性amisScoped.getComponentByName('page1.form1').setValues({'name1': 'othername'})— 修改表单中的值。
{
"type": "page",
"name": "page1",
"title": "表单页面",
"body": {
"type": "form",
"name": "form1",
"body": [
{
"label": "Name",
"type": "input-text",
"name": "name1"
}
]
}
}
7、更新属性
- 可以通过
amisScoped对象的updateProps方法来更新下发到amis的属性
amisScoped.updateProps(
{
// 新的属性对象
} /*, () => {} 更新回调 */
);
8、销毁
- 如果是单页应用，在离开当前页面的时候通常需要销毁实例，可以通过 unmount 方法来完成
amisScoped.unmount();
