2020-07-28 14:55:49 +08:00
|
|
|
|
---
|
|
|
|
|
|
title: 快速开始
|
|
|
|
|
|
description:
|
|
|
|
|
|
---
|
|
|
|
|
|
|
2020-08-12 16:39:54 +08:00
|
|
|
|
amis 有两种使用方法：
|
|
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
|
- [JS SDK](#SDK)，可以用在任意页面中
|
2020-12-29 12:21:10 +08:00
|
|
|
|
- [React](#react)，可以用在 React 项目中
|
2020-08-12 16:39:54 +08:00
|
|
|
|
|
2020-12-25 00:18:45 +08:00
|
|
|
|
SDK 版本适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，可以像 Vue/jQuery 那样外链代码就能使用。
|
2020-08-12 16:39:54 +08:00
|
|
|
|
|
2020-09-11 15:00:56 +08:00
|
|
|
|
## SDK
|
|
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
|
下载方式：
|
2020-09-11 15:00:56 +08:00
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
|
1. github 的 [releases](https://github.com/baidu/amis/releases)，文件是 sdk.tar.gz。
|
|
|
|
|
|
1. 使用 `npm i amis` 来下载，在 `node_modules\amis\sdk` 目录里就能找到。
|
2020-09-11 15:00:56 +08:00
|
|
|
|
|
2021-03-01 08:54:09 +08:00
|
|
|
|
新建一个 hello.html 文件，内容如下：
|
2020-09-11 15:00:56 +08:00
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
|
<title>amis demo</title>
|
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
|
|
<meta
|
|
|
|
|
|
name="viewport"
|
|
|
|
|
|
content="width=device-width, initial-scale=1, maximum-scale=1"
|
|
|
|
|
|
/>
|
|
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
2020-10-10 09:51:10 +08:00
|
|
|
|
<link rel="stylesheet" href="sdk.css" />
|
2021-04-18 16:33:08 +08:00
|
|
|
|
<link rel="stylesheet" href="helper.css" />
|
2021-09-17 23:16:09 +08:00
|
|
|
|
<link rel="stylesheet" href="iconfont.css" />
|
|
|
|
|
|
<!-- 这是默认主题所需的，如果是其他主题则不需要 -->
|
2021-01-07 23:35:03 +08:00
|
|
|
|
<!-- 从 1.1.0 开始 sdk.css 将不支持 IE 11，如果要支持 IE11 请引用这个 css，并把前面那个删了 -->
|
2020-12-21 10:08:40 +08:00
|
|
|
|
<!-- <link rel="stylesheet" href="sdk-ie11.css" /> -->
|
2021-01-07 23:35:03 +08:00
|
|
|
|
<!-- 不过 amis 开发团队几乎没测试过 IE 11 下的效果，所以可能有细节功能用不了，如果发现请报 issue -->
|
2020-09-11 15:00:56 +08:00
|
|
|
|
<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>
|
2020-10-10 09:51:10 +08:00
|
|
|
|
<script src="sdk.js"></script>
|
2020-09-11 15:00:56 +08:00
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
(function () {
|
|
|
|
|
|
let amis = amisRequire('amis/embed');
|
2020-10-10 09:51:10 +08:00
|
|
|
|
// 通过替换下面这个配置来生成不同页面
|
2021-01-07 23:35:03 +08:00
|
|
|
|
let amisJSON = {
|
2020-09-11 15:00:56 +08:00
|
|
|
|
type: 'page',
|
2020-10-10 09:51:10 +08:00
|
|
|
|
title: '表单页面',
|
|
|
|
|
|
body: {
|
|
|
|
|
|
type: 'form',
|
|
|
|
|
|
mode: 'horizontal',
|
|
|
|
|
|
api: '/saveForm',
|
2021-06-07 10:09:55 +08:00
|
|
|
|
body: [
|
2020-10-10 09:51:10 +08:00
|
|
|
|
{
|
|
|
|
|
|
label: 'Name',
|
2021-06-07 10:09:55 +08:00
|
|
|
|
type: 'input-text',
|
2020-10-10 09:51:10 +08:00
|
|
|
|
name: 'name'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
label: 'Email',
|
2021-06-07 10:09:55 +08:00
|
|
|
|
type: 'input-email',
|
2020-10-10 09:51:10 +08:00
|
|
|
|
name: 'email'
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
2021-01-07 23:35:03 +08:00
|
|
|
|
};
|
|
|
|
|
|
let amisScoped = amis.embed('#root', amisJSON);
|
2020-09-11 15:00:56 +08:00
|
|
|
|
})();
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-01-07 23:35:03 +08:00
|
|
|
|
### 切换主题
|
|
|
|
|
|
|
2022-12-16 15:22:13 +08:00
|
|
|
|
jssdk 版本默认使用 `sdk.css` 即云舍主题，如果你想使用仿 Antd，请将 css 引用改成 `antd.css`。同时 js 渲染地方第四个参数传入 `theme` 属性。如：
|
2021-01-07 23:35:03 +08:00
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
amis.embed(
|
|
|
|
|
|
'#root',
|
|
|
|
|
|
{
|
|
|
|
|
|
// amis schema
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 这里是初始 props
|
|
|
|
|
|
},
|
2022-05-09 16:30:25 +08:00
|
|
|
|
// 注意是第四个参数
|
2021-01-07 23:35:03 +08:00
|
|
|
|
{
|
2021-08-18 16:21:35 +08:00
|
|
|
|
theme: 'antd'
|
2021-01-07 23:35:03 +08:00
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
```
|
2022-02-10 15:49:48 +08:00
|
|
|
|
|
2022-01-17 19:47:07 +08:00
|
|
|
|
> 如果想使用 amis 1.2.2 之前的默认主题，名字是 ang
|
2021-01-07 23:35:03 +08:00
|
|
|
|
|
2021-06-30 16:59:02 +08:00
|
|
|
|
### 初始值
|
|
|
|
|
|
|
|
|
|
|
|
可以通过 props 里的 data 属性来赋予 amis 顶层数据域的值，类似下面的例子。
|
|
|
|
|
|
|
2023-05-17 17:21:31 +08:00
|
|
|
|
> 3.1.0 开始可以传入 context 数据，无论哪层都可以使用到这个里面的数据。适合用来传递一些平台数据。
|
|
|
|
|
|
|
2021-06-30 16:59:02 +08:00
|
|
|
|
```js
|
|
|
|
|
|
let amis = amisRequire('amis/embed');
|
|
|
|
|
|
let amisJSON = {
|
|
|
|
|
|
type: 'page',
|
|
|
|
|
|
body: {
|
|
|
|
|
|
type: 'tpl',
|
2021-08-18 16:21:35 +08:00
|
|
|
|
tpl: '${myData}'
|
2021-06-30 16:59:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
let amisScoped = amis.embed('#root', amisJSON, {
|
|
|
|
|
|
data: {
|
|
|
|
|
|
myData: 'amis'
|
2023-05-17 17:21:31 +08:00
|
|
|
|
},
|
|
|
|
|
|
context: {
|
|
|
|
|
|
amisUser: {
|
|
|
|
|
|
id: 1,
|
|
|
|
|
|
name: 'test user'
|
|
|
|
|
|
}
|
2021-06-30 16:59:02 +08:00
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2020-09-11 15:00:56 +08:00
|
|
|
|
### 控制 amis 的行为
|
|
|
|
|
|
|
2020-12-29 12:21:10 +08:00
|
|
|
|
`amis.embed` 函数还支持以下配置项来控制 amis 的行为，比如在 fetcher 的时候加入自己的处理逻辑，这些函数参数的说明在后面 React 中也有介绍。
|
2020-09-11 15:00:56 +08:00
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
let amisScoped = amis.embed(
|
|
|
|
|
|
'#root',
|
2021-01-07 23:35:03 +08:00
|
|
|
|
amisJSON,
|
2020-09-11 15:00:56 +08:00
|
|
|
|
{
|
2021-01-07 23:35:03 +08:00
|
|
|
|
// 这里是初始 props，一般不用传。
|
2021-01-10 11:22:18 +08:00
|
|
|
|
// locale: 'en-US' // props 中可以设置语言，默认是中文
|
2020-09-11 15:00:56 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2021-11-12 12:36:44 +08:00
|
|
|
|
// 下面是一些可选的外部控制函数
|
2022-02-08 10:35:17 +08:00
|
|
|
|
// 在 sdk 中可以不传，用来实现 ajax 请求，但在 npm 中这是必须提供的
|
2021-11-12 12:36:44 +08:00
|
|
|
|
// fetcher: (url, method, data, config) => {},
|
|
|
|
|
|
// 全局 api 请求适配器
|
2021-09-09 17:41:50 +08:00
|
|
|
|
// 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
|
2021-11-12 12:36:44 +08:00
|
|
|
|
//
|
2021-12-21 18:50:09 +08:00
|
|
|
|
// requestAdaptor(api) {
|
2021-11-12 12:36:44 +08:00
|
|
|
|
// return api;
|
|
|
|
|
|
// }
|
|
|
|
|
|
//
|
|
|
|
|
|
// 全局 api 适配器。
|
2021-01-07 23:35:03 +08:00
|
|
|
|
// 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
|
2022-05-09 10:43:45 +08:00
|
|
|
|
// responseAdaptor(api, payload, query, request, response) {
|
|
|
|
|
|
// return payload;
|
2021-11-12 12:36:44 +08:00
|
|
|
|
// }
|
|
|
|
|
|
//
|
|
|
|
|
|
// 用来接管页面跳转，比如用 location.href 或 window.open，或者自己实现 amis 配置更新
|
2021-01-04 16:59:32 +08:00
|
|
|
|
// jumpTo: to => { location.href = to; },
|
2021-11-12 12:36:44 +08:00
|
|
|
|
//
|
|
|
|
|
|
// 用来实现地址栏更新
|
2021-01-04 16:59:32 +08:00
|
|
|
|
// updateLocation: (to, replace) => {},
|
2021-11-12 12:36:44 +08:00
|
|
|
|
//
|
|
|
|
|
|
// 用来判断是否目标地址当前地址。
|
2020-11-18 17:26:20 +08:00
|
|
|
|
// isCurrentUrl: url => {},
|
2021-11-12 12:36:44 +08:00
|
|
|
|
//
|
|
|
|
|
|
// 用来实现复制到剪切板
|
2020-11-18 17:26:20 +08:00
|
|
|
|
// copy: content => {},
|
2021-11-12 12:36:44 +08:00
|
|
|
|
//
|
|
|
|
|
|
// 用来实现通知
|
2020-11-18 17:26:20 +08:00
|
|
|
|
// notify: (type, msg) => {},
|
2021-11-12 12:36:44 +08:00
|
|
|
|
//
|
|
|
|
|
|
// 用来实现提示
|
2020-11-18 17:26:20 +08:00
|
|
|
|
// alert: content => {},
|
2021-11-12 12:36:44 +08:00
|
|
|
|
//
|
|
|
|
|
|
// 用来实现确认框。
|
2021-01-07 23:35:03 +08:00
|
|
|
|
// confirm: content => {},
|
2021-11-12 12:36:44 +08:00
|
|
|
|
//
|
|
|
|
|
|
// 主题，默认是 default，还可以设置成 cxd 或 dark，但记得引用它们的 css，比如 sdk 目录下的 cxd.css
|
|
|
|
|
|
// theme: 'cxd'
|
|
|
|
|
|
//
|
|
|
|
|
|
// 用来实现用户行为跟踪，详细请查看左侧高级中的说明
|
|
|
|
|
|
// tracker: (eventTracker) => {},
|
2022-07-29 16:11:45 +08:00
|
|
|
|
//
|
|
|
|
|
|
// Toast提示弹出位置，默认为'top-center'
|
|
|
|
|
|
// toastPosition: 'top-right' | 'top-center' | 'top-left' | 'bottom-center' | 'bottom-left' | 'bottom-right' | 'center'
|
2020-09-11 15:00:56 +08:00
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
同时返回的 `amisScoped` 对象可以获取到 amis 渲染的内部信息，它有如下方法：
|
|
|
|
|
|
|
|
|
|
|
|
`getComponentByName(name)` 用于获取渲染出来的组件，比如下面的示例
|
|
|
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
|
{
|
|
|
|
|
|
"type": "page",
|
|
|
|
|
|
"name": "page1",
|
|
|
|
|
|
"title": "表单页面",
|
|
|
|
|
|
"body": {
|
|
|
|
|
|
"type": "form",
|
|
|
|
|
|
"name": "form1",
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"body": [
|
2020-09-11 15:00:56 +08:00
|
|
|
|
{
|
|
|
|
|
|
"label": "Name",
|
2021-06-07 10:09:55 +08:00
|
|
|
|
"type": "input-text",
|
2020-09-11 15:00:56 +08:00
|
|
|
|
"name": "name1"
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
可以通过 `amisScoped.getComponentByName('page1.form1').getValues()` 来获取到所有表单的值，需要注意 page 和 form 都需要有 name 属性。
|
|
|
|
|
|
|
2020-11-12 16:57:45 +08:00
|
|
|
|
还可以通过 `amisScoped.getComponentByName('page1.form1').setValues({'name1': 'othername'})` 来修改表单中的值。
|
|
|
|
|
|
|
2021-06-17 00:58:35 +08:00
|
|
|
|
### 更新属性
|
|
|
|
|
|
|
|
|
|
|
|
可以通过 amisScoped 对象的 updateProps 方法来更新下发到 amis 的属性。
|
|
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
|
amisScoped.updateProps(
|
|
|
|
|
|
{
|
|
|
|
|
|
// 新的属性对象
|
|
|
|
|
|
} /*, () => {} 更新回调 */
|
|
|
|
|
|
);
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2023-06-14 14:42:09 +08:00
|
|
|
|
### 更新配置
|
|
|
|
|
|
|
|
|
|
|
|
可以通过 amisScoped 对象的 udpateSchema 方法来更新更新内容配置。
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
let amisJSON = {
|
|
|
|
|
|
type: 'page',
|
|
|
|
|
|
body: [
|
|
|
|
|
|
'inital string',
|
|
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'button',
|
|
|
|
|
|
label: 'Change',
|
|
|
|
|
|
onClick: handleChange
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
};
|
|
|
|
|
|
let amisScoped = amis.embed('#root', amisJSON);
|
|
|
|
|
|
|
|
|
|
|
|
function handleChange() {
|
|
|
|
|
|
const schema = {
|
|
|
|
|
|
...amisJSON,
|
|
|
|
|
|
body: ['changed']
|
|
|
|
|
|
};
|
|
|
|
|
|
amisScoped.updateSchema(schema);
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-01-10 11:40:26 +08:00
|
|
|
|
### 多页模式
|
|
|
|
|
|
|
2021-02-09 18:12:28 +08:00
|
|
|
|
默认 amis 渲染是单页模式，如果想实现多页应用，请使用 [app 渲染器](../../components/app)。
|
2021-01-10 11:40:26 +08:00
|
|
|
|
|
|
|
|
|
|
### Hash 路由
|
|
|
|
|
|
|
2022-05-30 11:06:05 +08:00
|
|
|
|
默认 JSSDK 不是 hash 路由，如果你想改成 hash 路由模式，请查看此处代码实现。只需要修改 `env.isCurrentUrl`、`env.jumpTo` 和 `env.updateLocation` 这几个方法，并在路由切换的时候，通过 amisScoped 对象的 `updateProps` 方法，更新 `location` 属性即可。
|
2021-01-10 11:40:26 +08:00
|
|
|
|
|
2022-05-30 11:06:05 +08:00
|
|
|
|
参考：https://github.com/baidu/amis/blob/master/examples/app/index.jsx
|
2021-01-10 11:40:26 +08:00
|
|
|
|
|
2021-06-17 01:06:34 +08:00
|
|
|
|
### 销毁
|
|
|
|
|
|
|
|
|
|
|
|
如果是单页应用，在离开当前页面的时候通常需要销毁实例，可以通过 unmount 方法来完成。
|
|
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
|
amisScoped.unmount();
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2020-11-18 15:51:58 +08:00
|
|
|
|
## react
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2021-01-29 19:35:15 +08:00
|
|
|
|
初始项目请参考 <https://github.com/aisuda/amis-react-starter>。
|
2020-11-20 10:21:20 +08:00
|
|
|
|
|
2022-02-10 15:49:48 +08:00
|
|
|
|
如果在已有项目中，React 版本需要是 `>=16.8.6`，mobx 需要 `^4.5.0`。
|
|
|
|
|
|
|
|
|
|
|
|
amis 1.6.5 及以上版本支持 React 17。
|
2020-11-20 10:21:20 +08:00
|
|
|
|
|
2020-07-28 14:55:49 +08:00
|
|
|
|
### 安装
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
npm i amis
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-09-15 17:31:46 +08:00
|
|
|
|
### webpack 配置参考
|
|
|
|
|
|
|
|
|
|
|
|
如果要使用代码编辑器，需要 `monaco-editor-webpack-plugin` 插件
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
const path = require('path');
|
|
|
|
|
|
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
|
|
|
|
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
|
|
|
|
|
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
|
|
|
|
|
|
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
|
|
|
|
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
|
|
mode: 'development',
|
|
|
|
|
|
entry: {
|
|
|
|
|
|
index: './src/index.tsx'
|
|
|
|
|
|
},
|
|
|
|
|
|
module: {
|
|
|
|
|
|
rules: [
|
|
|
|
|
|
{
|
|
|
|
|
|
test: /\.tsx?$/,
|
|
|
|
|
|
use: [
|
|
|
|
|
|
{
|
|
|
|
|
|
loader: 'ts-loader',
|
|
|
|
|
|
options: {
|
|
|
|
|
|
transpileOnly: true
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
exclude: /node_modules/
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
|
|
|
|
|
use: 'url-loader?limit=10000'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
|
|
|
|
|
|
use: 'file-loader'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
test: /\.css$/,
|
|
|
|
|
|
use: ['style-loader', 'css-loader']
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
test: /\.ttf$/,
|
|
|
|
|
|
use: ['file-loader']
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
},
|
|
|
|
|
|
plugins: [
|
|
|
|
|
|
new CleanWebpackPlugin({cleanStaleWebpackAssets: false}),
|
|
|
|
|
|
new HtmlWebpackPlugin({
|
|
|
|
|
|
template: 'src/index.html'
|
|
|
|
|
|
}),
|
|
|
|
|
|
new MonacoWebpackPlugin(),
|
|
|
|
|
|
new ForkTsCheckerWebpackPlugin()
|
|
|
|
|
|
],
|
|
|
|
|
|
resolve: {
|
|
|
|
|
|
extensions: ['.tsx', '.ts', '.js', '.html']
|
|
|
|
|
|
},
|
|
|
|
|
|
output: {
|
|
|
|
|
|
filename: '[name].bundle.js',
|
2021-09-17 23:16:09 +08:00
|
|
|
|
publicPath: '/'
|
2021-09-15 17:31:46 +08:00
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2020-08-04 10:55:22 +08:00
|
|
|
|
### 主题样式
|
|
|
|
|
|
|
2022-02-10 15:49:48 +08:00
|
|
|
|
目前主要支持两个主题：`cxd（云舍）` 和 `antd（仿 Antd）`
|
2020-08-04 10:55:22 +08:00
|
|
|
|
|
|
|
|
|
|
1. 引入样式文件：
|
|
|
|
|
|
|
2020-08-04 13:16:20 +08:00
|
|
|
|
html 中引入：
|
|
|
|
|
|
|
2020-08-04 10:55:22 +08:00
|
|
|
|
```html
|
2021-08-18 16:21:35 +08:00
|
|
|
|
<link href="./node_modules/amis/lib/themes/cxd.css" />
|
2021-06-29 17:04:34 +08:00
|
|
|
|
<link href="./node_modules/amis/lib/helper.css" />
|
2021-09-15 17:17:36 +08:00
|
|
|
|
<link href="./node_modules/amis/sdk/iconfont.css" />
|
2021-08-18 16:21:35 +08:00
|
|
|
|
<!-- 或 <link href="./node_modules/amis/lib/themes/antd.css" /> -->
|
2020-08-04 10:55:22 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
js 中引入：
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
2022-07-07 17:25:03 +08:00
|
|
|
|
import 'amis/lib/themes/cxd.css';
|
|
|
|
|
|
import 'amis/lib/helper.css';
|
|
|
|
|
|
import 'amis/sdk/iconfont.css';
|
|
|
|
|
|
// 或 import 'amis/lib/themes/antd.css';
|
2020-08-04 10:55:22 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
> 上面只是示例，请根据自己的项目结构调整引用路径
|
2022-07-07 17:25:03 +08:00
|
|
|
|
> 如果要支持 IE 11 请引入 amis/sdk/cxd-ie11.css，但这样就没法支持 CSS 变量了
|
2020-08-04 10:55:22 +08:00
|
|
|
|
|
|
|
|
|
|
2. 渲染器使用配置主题
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
renderAmis(
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'page',
|
|
|
|
|
|
title: '简单页面',
|
|
|
|
|
|
body: '内容'
|
|
|
|
|
|
},
|
2021-01-07 23:35:03 +08:00
|
|
|
|
{
|
|
|
|
|
|
// props
|
|
|
|
|
|
},
|
2020-08-04 10:55:22 +08:00
|
|
|
|
{
|
|
|
|
|
|
// env...
|
2021-08-18 16:21:35 +08:00
|
|
|
|
theme: 'cxd' // cxd 或 antd
|
2020-08-04 10:55:22 +08:00
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
### 使用指南
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
|
|
|
|
|
可以在 React Component 这么使用（TypeScript）。
|
|
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
1. 安装部分示例需要的插件库
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
npm i axios copy-to-clipboard
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
> 为了方便示例，上面选用了我们常用几个插件库，你完全可以选择自己喜欢的插件并重新实现
|
|
|
|
|
|
|
2020-09-11 12:58:20 +08:00
|
|
|
|
2. 代码实现（React Typescript）
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
2020-07-28 14:55:49 +08:00
|
|
|
|
```tsx
|
|
|
|
|
|
import * as React from 'react';
|
2020-08-18 18:53:18 +08:00
|
|
|
|
import axios from 'axios';
|
|
|
|
|
|
import copy from 'copy-to-clipboard';
|
|
|
|
|
|
|
2022-06-30 20:47:34 +08:00
|
|
|
|
import {render as renderAmis} from 'amis';
|
|
|
|
|
|
import {ToastComponent, AlertComponent, alert, confirm, toast} from 'amis-ui';
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
|
|
|
|
|
class MyComponent extends React.Component<any, any> {
|
2020-08-04 10:55:22 +08:00
|
|
|
|
render() {
|
2021-06-07 10:09:55 +08:00
|
|
|
|
let amisScoped;
|
2021-08-18 16:21:35 +08:00
|
|
|
|
let theme = 'cxd';
|
2022-01-28 11:03:05 +08:00
|
|
|
|
let locale = 'zh-CN';
|
2021-12-22 12:37:45 +08:00
|
|
|
|
|
2021-12-14 19:04:50 +08:00
|
|
|
|
// 请勿使用 React.StrictMode，目前还不支持
|
2020-08-04 10:55:22 +08:00
|
|
|
|
return (
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<p>通过 amis 渲染页面</p>
|
2022-02-10 15:49:48 +08:00
|
|
|
|
<ToastComponent
|
|
|
|
|
|
theme={theme}
|
|
|
|
|
|
key="toast"
|
|
|
|
|
|
position={'top-right'}
|
|
|
|
|
|
locale={locale}
|
|
|
|
|
|
/>
|
2022-01-28 11:03:05 +08:00
|
|
|
|
<AlertComponent theme={theme} key="alert" locale={locale} />
|
2020-08-04 10:55:22 +08:00
|
|
|
|
{renderAmis(
|
|
|
|
|
|
{
|
|
|
|
|
|
// 这里是 amis 的 Json 配置。
|
|
|
|
|
|
type: 'page',
|
|
|
|
|
|
title: '简单页面',
|
|
|
|
|
|
body: '内容'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
2020-08-18 18:53:18 +08:00
|
|
|
|
// props...
|
2021-01-10 11:22:18 +08:00
|
|
|
|
// locale: 'en-US' // 请参考「多语言」的文档
|
2021-04-21 10:21:27 +08:00
|
|
|
|
// scopeRef: (ref: any) => (amisScoped = ref) // 功能和前面 SDK 的 amisScoped 一样
|
2020-08-04 10:55:22 +08:00
|
|
|
|
},
|
|
|
|
|
|
{
|
2020-11-18 17:26:20 +08:00
|
|
|
|
// 下面三个接口必须实现
|
2020-08-04 10:55:22 +08:00
|
|
|
|
fetcher: ({
|
2020-08-18 18:53:18 +08:00
|
|
|
|
url, // 接口地址
|
|
|
|
|
|
method, // 请求方法 get、post、put、delete
|
|
|
|
|
|
data, // 请求数据
|
|
|
|
|
|
responseType,
|
|
|
|
|
|
config, // 其他配置
|
|
|
|
|
|
headers // 请求头
|
|
|
|
|
|
}: any) => {
|
|
|
|
|
|
config = config || {};
|
|
|
|
|
|
config.withCredentials = true;
|
|
|
|
|
|
responseType && (config.responseType = responseType);
|
|
|
|
|
|
|
|
|
|
|
|
if (config.cancelExecutor) {
|
|
|
|
|
|
config.cancelToken = new (axios as any).CancelToken(
|
|
|
|
|
|
config.cancelExecutor
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
config.headers = headers || {};
|
|
|
|
|
|
|
|
|
|
|
|
if (method !== 'post' && method !== 'put' && method !== 'patch') {
|
|
|
|
|
|
if (data) {
|
|
|
|
|
|
config.params = data;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return (axios as any)[method](url, config);
|
|
|
|
|
|
} else if (data && data instanceof FormData) {
|
|
|
|
|
|
config.headers = config.headers || {};
|
|
|
|
|
|
config.headers['Content-Type'] = 'multipart/form-data';
|
|
|
|
|
|
} else if (
|
|
|
|
|
|
data &&
|
|
|
|
|
|
typeof data !== 'string' &&
|
|
|
|
|
|
!(data instanceof Blob) &&
|
|
|
|
|
|
!(data instanceof ArrayBuffer)
|
|
|
|
|
|
) {
|
|
|
|
|
|
data = JSON.stringify(data);
|
|
|
|
|
|
config.headers = config.headers || {};
|
|
|
|
|
|
config.headers['Content-Type'] = 'application/json';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return (axios as any)[method](url, data, config);
|
2020-08-04 10:55:22 +08:00
|
|
|
|
},
|
2020-08-18 18:53:18 +08:00
|
|
|
|
isCancel: (value: any) => (axios as any).isCancel(value),
|
|
|
|
|
|
copy: content => {
|
|
|
|
|
|
copy(content);
|
|
|
|
|
|
toast.success('内容已复制到粘贴板');
|
2021-04-24 11:02:14 +08:00
|
|
|
|
},
|
|
|
|
|
|
theme
|
2020-11-18 17:26:20 +08:00
|
|
|
|
|
|
|
|
|
|
// 后面这些接口可以不用实现
|
|
|
|
|
|
|
|
|
|
|
|
// 默认是地址跳转
|
|
|
|
|
|
// jumpTo: (
|
|
|
|
|
|
// location: string /*目标地址*/,
|
|
|
|
|
|
// action: any /* action对象*/
|
|
|
|
|
|
// ) => {
|
|
|
|
|
|
// // 用来实现页面跳转, actionType:link、url 都会进来。
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
|
|
// updateLocation: (
|
|
|
|
|
|
// location: string /*目标地址*/,
|
|
|
|
|
|
// replace: boolean /*是replace，还是push？*/
|
|
|
|
|
|
// ) => {
|
|
|
|
|
|
// // 地址替换，跟 jumpTo 类似
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
|
|
// isCurrentUrl: (
|
|
|
|
|
|
// url: string /*url地址*/,
|
|
|
|
|
|
// ) => {
|
|
|
|
|
|
// // 用来判断是否目标地址当前地址
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
|
|
// notify: (
|
|
|
|
|
|
// type: 'error' | 'success' /**/,
|
|
|
|
|
|
// msg: string /*提示内容*/
|
|
|
|
|
|
// ) => {
|
|
|
|
|
|
// toast[type]
|
|
|
|
|
|
// ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息')
|
|
|
|
|
|
// : console.warn('[Notify]', type, msg);
|
|
|
|
|
|
// },
|
|
|
|
|
|
// alert,
|
|
|
|
|
|
// confirm,
|
2021-11-12 12:36:44 +08:00
|
|
|
|
// tracker: (eventTracke) => {}
|
2020-08-04 10:55:22 +08:00
|
|
|
|
}
|
|
|
|
|
|
)}
|
|
|
|
|
|
</div>
|
|
|
|
|
|
);
|
|
|
|
|
|
}
|
2020-07-28 14:55:49 +08:00
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
render 有三个参数，后面会详细说明这三个参数内的属性
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
(schema, props, env) => JSX.Element;
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
### schema
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
即页面配置，请前往 [配置与组件](../concepts/schema) 了解
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
### props
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如：
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
```jsx
|
|
|
|
|
|
() =>
|
|
|
|
|
|
renderAmis(schema, {
|
|
|
|
|
|
data: {
|
|
|
|
|
|
username: 'amis'
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
这样，内部所有组件都能拿到 `username` 这个变量的值。当然，这里的 key 并不一定必须是 data , 你也可以是其它 key，但必须配合 schema 中的 `detectField` 属性一起使用。 如：
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
```jsx
|
|
|
|
|
|
() =>
|
|
|
|
|
|
renderAmis(
|
|
|
|
|
|
{
|
|
|
|
|
|
//其它配置
|
|
|
|
|
|
detectField: 'somekey'
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
somekey: {
|
2020-07-28 14:55:49 +08:00
|
|
|
|
username: 'amis'
|
|
|
|
|
|
}
|
2020-08-18 18:53:18 +08:00
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
```
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
### env
|
2020-08-12 16:39:54 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
环境变量，可以理解为这个渲染器工具的配置项，需要使用 amis 用户实现部分接口。他有下面若干参数：
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### fetcher（必须实现）
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
接口请求器，实现该函数才可以实现 ajax 发送，函数签名如下：
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
```ts
|
|
|
|
|
|
(config: {
|
|
|
|
|
|
url; // 接口地址
|
|
|
|
|
|
method; // 请求方法 get、post、put、delete
|
|
|
|
|
|
data; // 请求数据
|
|
|
|
|
|
responseType;
|
|
|
|
|
|
config; // 其他配置
|
|
|
|
|
|
headers; // 请求头
|
|
|
|
|
|
}) => Promise<fetcherResult>;
|
|
|
|
|
|
```
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
> 你可以使用任何你喜欢的 ajax 请求库来实现这个接口
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### notify
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
```ts
|
|
|
|
|
|
(type: string, msg: string) => void
|
|
|
|
|
|
```
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2020-08-18 18:53:18 +08:00
|
|
|
|
用来实现消息提示。
|
2020-07-28 14:55:49 +08:00
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### alert
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
|
(msg: string) => void
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
用来实现警告提示。
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### confirm
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
```ts
|
2022-06-30 20:47:34 +08:00
|
|
|
|
(msg: string) => boolean | Promise<boolean>;
|
2020-08-18 18:53:18 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
用来实现确认框。返回 boolean 值
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### jumpTo
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
|
(to: string, action?: Action, ctx?: object) => void
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
用来实现页面跳转，因为不清楚所在环境中是否使用了 spa 模式，所以用户自己实现吧。
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### updateLocation
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
|
(location: any, replace?: boolean) => void
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
地址替换，跟 jumpTo 类似。
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### blockRouting
|
2021-01-04 16:46:41 +08:00
|
|
|
|
|
|
|
|
|
|
设置阻止路由跳转的钩子函数，用来实现 form 未保存提前离开时出现确认框。
|
|
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
|
(fn: (nextLocation:any) => void | string) => () => void;
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### theme: string
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
目前支持是三种主题：`default`、`cxd` 和 `dark`
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### isCurrentUrl
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
|
(link: string) => boolean;
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
判断目标地址是否为当前页面。
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### copy
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
```ts
|
2021-10-13 11:41:43 +08:00
|
|
|
|
(contents: string, options?: {silent: boolean, format?: string})
|
2020-08-18 18:53:18 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-10-13 11:41:43 +08:00
|
|
|
|
用来实现内容复制，其中 `format` 可以为 text/html，或 text/plain
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### tracker
|
|
|
|
|
|
|
|
|
|
|
|
用户行为跟踪，请参考[这里](../extend/tracker)
|
|
|
|
|
|
|
|
|
|
|
|
#### session
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
默认为 'global'，决定 store 是否为全局共用的，如果想单占一个 store，请设置不同的值。
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### getModalContainer
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
```ts
|
|
|
|
|
|
() => HTMLElement;
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
用来决定弹框容器。
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### loadRenderer
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
```ts
|
2022-06-30 20:47:34 +08:00
|
|
|
|
(schema: any, path: string) => Promise<Function>;
|
2020-08-18 18:53:18 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
可以通过它懒加载自定义组件，比如： https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### affixOffsetTop: number
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
固顶间距，当你的有其他固顶元素时，需要设置一定的偏移量，否则会重叠。
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### affixOffsetBottom: number
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
|
|
|
|
|
固底间距，当你的有其他固底元素时，需要设置一定的偏移量，否则会重叠。
|
|
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### richTextToken: string
|
2020-08-18 18:53:18 +08:00
|
|
|
|
|
2020-09-17 21:40:59 +08:00
|
|
|
|
内置 rich-text 为 frolaEditor，想要使用，请自行购买，或者用免费的 Tinymce，不设置 token 默认就是 Tinymce。
|
2021-09-13 20:02:05 +08:00
|
|
|
|
|
2021-11-12 12:36:44 +08:00
|
|
|
|
#### hideValidateFailedDetail: boolean
|
2021-09-13 20:02:05 +08:00
|
|
|
|
|
|
|
|
|
|
Form 表单验证失败时在 notify 消息提示中是否隐藏详细信息，默认展示，设置为 true 时隐藏
|
2021-11-22 12:41:26 +08:00
|
|
|
|
|
|
|
|
|
|
#### replaceText
|
|
|
|
|
|
|
|
|
|
|
|
> 1.5.0 及以上版本
|
|
|
|
|
|
|
|
|
|
|
|
可以用来实现变量替换及多语言功能，比如下面的例子
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
let amisScoped = amis.embed(
|
|
|
|
|
|
'#root',
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'page',
|
|
|
|
|
|
body: {
|
|
|
|
|
|
type: 'service',
|
|
|
|
|
|
api: 'service/api'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
{},
|
|
|
|
|
|
{
|
|
|
|
|
|
replaceText: {
|
|
|
|
|
|
service: 'http://localhost'
|
|
|
|
|
|
},
|
|
|
|
|
|
replaceTextKeys: ['api']
|
|
|
|
|
|
}
|
|
|
|
|
|
);
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
它会替换 `api` 里的 `service` 字符串
|
|
|
|
|
|
|
|
|
|
|
|
#### replaceTextIgnoreKeys
|
|
|
|
|
|
|
|
|
|
|
|
> 1.5.0 及以上版本
|
|
|
|
|
|
|
|
|
|
|
|
和前面的 `replaceText` 配合使用，某些字段会禁用文本替换，默认有以下：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
type, name, mode, target, reload
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
如果发现有字段被意外替换了，可以通过设置这个属性来避免
|
2022-07-29 16:11:45 +08:00
|
|
|
|
|
|
|
|
|
|
#### toastPosition
|
|
|
|
|
|
|
|
|
|
|
|
Toast 提示弹出位置，默认为`'top-center'`。
|
|
|
|
|
|
支持的属性值有：
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
'top-right' | 'top-center' | 'top-left' | 'bottom-center' | 'bottom-left' | 'bottom-right' | 'center'
|
|
|
|
|
|
```
|
