目录
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>
效果如下：
