forked from p96170835/amis
rn AMis to amis
This commit is contained in:
liaoxuezhi
parent
07865047b9
commit
f7b3c30259
|
|
@ -1,10 +1,10 @@
|
|||
# AMis
|
||||
# amis
|
||||
|
||||
一种页面渲染器，可以直接基于特定格式的 JSON 配置将页面渲染出来，结合业务方 API 可快速完成各类管理页面的开发。
|
||||
|
||||
目前用于百度内部 [AMIS](http://amis.baidu.com) 平台，已有 100+ 部门接入使用，创建 1.2w+ 页面，欢迎大家使用和提建议。
|
||||
|
||||
通过 AMis 搭建自己的后台系统，可以参考这： https://github.com/fex-team/amis-admin
|
||||
通过 amis 搭建自己的后台系统，可以参考这： https://github.com/fex-team/amis-admin
|
||||
|
||||
## 快速开始
|
||||
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export default class CustomCheckbox extends React.PureComponent {
|
|||
|
||||
### Renderer
|
||||
|
||||
非表单类的组件自定义，主要通过 `Renderer` 实现。在开始阅读之前，请先阅读 [AMis 工作原理](./sdk#工作原理)。
|
||||
非表单类的组件自定义，主要通过 `Renderer` 实现。在开始阅读之前，请先阅读 [amis 工作原理](./sdk#工作原理)。
|
||||
|
||||
```jsx
|
||||
import * as React from 'react';
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: 快速开始
|
||||
---
|
||||
|
||||
为了简化前端开发，AMis Renderer 能够直接用配置就能将页面渲染出来。
|
||||
为了简化前端开发，amis Renderer 能够直接用配置就能将页面渲染出来。
|
||||
|
||||
先来看个简单的例子。
|
||||
|
||||
|
|
@ -21,7 +21,7 @@ title: 快速开始
|
|||
|
||||
> PS: 可以通过编辑器实时修改预览
|
||||
|
||||
从上面的内容可以看出，一个简单页面框架已经基本出来了，这是 AMis 渲染器配置的入口。从 `page` 渲染器开始出发，通过在容器中放置不同的渲染器来配置不同性质的页面。
|
||||
从上面的内容可以看出，一个简单页面框架已经基本出来了，这是 amis 渲染器配置的入口。从 `page` 渲染器开始出发，通过在容器中放置不同的渲染器来配置不同性质的页面。
|
||||
|
||||
简单说明以上配置信息。
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
### 渲染器手册
|
||||
|
||||
AMis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成的，掌握他们规则，就能灵活配置出各种页面。
|
||||
amis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成的，掌握他们规则，就能灵活配置出各种页面。
|
||||
|
||||
- [Page](./renderers/Page.md): JSON 配置最外层的 Page 渲染器
|
||||
- [Form](./renderers/Form.md): 表单渲染器
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
|
|||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| actionType | `string` | `link` | 单页跳转 |
|
||||
| link | `string` | `link` | 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 AMis 平台内的页面。可用 `${xxx}` 取值。 |
|
||||
| link | `string` | `link` | 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 `${xxx}` 取值。 |
|
||||
|
||||
#### url
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
|
|
@ -95,7 +95,7 @@ Action 是一种特殊的渲染器，它本身是一个按钮，同时它能触
|
|||
}
|
||||
```
|
||||
|
||||
- `link` 当按钮点击后，无刷新进入 AMis 内部某个页面。
|
||||
- `link` 当按钮点击后，无刷新进入 amis 内部某个页面。
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
- `size` 按钮大小。 包含： `xs`、`sm`、`md`和`lg`
|
||||
- `className` 按钮的类名。
|
||||
|
||||
如果按钮是 `button` 类型，则还需要配置 [Action](./Action.md) 中定义的属性，否则，AMis 不知道如何响应当前按钮点击。
|
||||
如果按钮是 `button` 类型，则还需要配置 [Action](./Action.md) 中定义的属性，否则，amis 不知道如何响应当前按钮点击。
|
||||
|
||||
```schema:height="300" scope="form"
|
||||
[
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
### File
|
||||
|
||||
文件输入，AMis 也默认处理了图片存储，提交给 API 的是文件的下载地址。
|
||||
文件输入，amis 也默认处理了图片存储，提交给 API 的是文件的下载地址。
|
||||
|
||||
- `type` 请设置成 `file`
|
||||
- `reciever` 默认 `/api/upload/file` 如果想自己存储，请设置此选项。(PS: 如果想存自己的 bos, 系统配置中可以直接填写自己的 bos 配置。)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
### Image
|
||||
|
||||
图片格式输入，默认 AMis 会直接存储在 FEX 的 hiphoto 里面，提交到 form 是直接的图片 url。
|
||||
图片格式输入，默认 amis 会直接存储在 FEX 的 hiphoto 里面，提交到 form 是直接的图片 url。
|
||||
|
||||
- `type` 请设置成 `image`
|
||||
- `reciever` 默认 `/api/upload` 如果想自己存储，请设置此选项。
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
### Container
|
||||
|
||||
Container 不是一个特定的渲染器，而是 AMis 中一个特殊类型，它是以下类型的任何一种。
|
||||
Container 不是一个特定的渲染器，而是 amis 中一个特殊类型，它是以下类型的任何一种。
|
||||
|
||||
- `String` 字符串，可以包含 `html` 片段。
|
||||
- `Object` 指定一个渲染器如： `{"type": "button", "label": "按钮"}`
|
||||
|
|
@ -123,7 +123,7 @@ Api 类型可以是字符串或者对象。API 中可以直接设置数据发送
|
|||
|
||||
** 注意 **
|
||||
|
||||
AMis 所有值为 url 的如： `"http://www.baidu.com"` 都会被替换成 proxy 代理，如果不希望这么做，请明确指示如： `"raw:http://www.baidu.com"`。还有为了安全，AMis 默认只能转发公司内部 API 接口，如果您的接口在外网环境，也请明确指示如：`"external:http://www.baidu.com"`
|
||||
amis 所有值为 url 的如： `"http://www.baidu.com"` 都会被替换成 proxy 代理，如果不希望这么做，请明确指示如： `"raw:http://www.baidu.com"`。还有为了安全，amis 默认只能转发公司内部 API 接口，如果您的接口在外网环境，也请明确指示如：`"external:http://www.baidu.com"`
|
||||
|
||||
### 表达式
|
||||
|
||||
|
|
|
|||
20
docs/sdk.md
20
docs/sdk.md
|
|
@ -21,10 +21,10 @@ class MyComponent extends React.Component<any, any> {
|
|||
render() {
|
||||
return (
|
||||
<div>
|
||||
<p>通过 AMis 渲染页面</p>
|
||||
<p>通过 amis 渲染页面</p>
|
||||
{renderAmis({
|
||||
// schema
|
||||
// 这里是 AMis 的 Json 配置。
|
||||
// 这里是 amis 的 Json 配置。
|
||||
type: 'page',
|
||||
title: '简单页面',
|
||||
body: '内容'
|
||||
|
|
@ -32,7 +32,7 @@ class MyComponent extends React.Component<any, any> {
|
|||
// props
|
||||
}, {
|
||||
// env
|
||||
// 这些是 AMis 需要的一些接口实现
|
||||
// 这些是 amis 需要的一些接口实现
|
||||
// 可以参考本项目里面的 Demo 部分代码。
|
||||
|
||||
updateLocation: (location:string/*目标地址*/, replace:boolean/*是replace，还是push？*/) => {
|
||||
|
|
@ -74,7 +74,7 @@ class MyComponent extends React.Component<any, any> {
|
|||
|
||||
## 工作原理
|
||||
|
||||
AMis 的渲染过程就是将 `json` 转成对应的 React 组件。先通过 `json` 的 type 找到对应的 `Component` 然后，然后把其他属性作为 `props` 传递过去完成渲染。
|
||||
amis 的渲染过程就是将 `json` 转成对应的 React 组件。先通过 `json` 的 type 找到对应的 `Component` 然后，然后把其他属性作为 `props` 传递过去完成渲染。
|
||||
|
||||
拿一个表单页面来说，如果用React组件调用大概是这样。
|
||||
|
||||
|
|
@ -96,7 +96,7 @@ AMis 的渲染过程就是将 `json` 转成对应的 React 组件。先通过 `j
|
|||
</Page>
|
||||
```
|
||||
|
||||
把以上配置方式换成 AMis JSON, 则是：
|
||||
把以上配置方式换成 amis JSON, 则是：
|
||||
|
||||
```json
|
||||
{
|
||||
|
|
@ -117,9 +117,9 @@ AMis 的渲染过程就是将 `json` 转成对应的 React 组件。先通过 `j
|
|||
}
|
||||
```
|
||||
|
||||
那么，AMis 是如何将 JSON 转成组件的呢？直接根据节点的 type 去跟组件一一对应？似乎很可能会重名比如在表格里面展示的类型 `text` 跟表单里面的 `text`是完全不一样的，一个负责展示，一个却负责输入。所以说一个节点要被什么组件渲染，还需要携带上下文(context)信息。
|
||||
那么，amis 是如何将 JSON 转成组件的呢？直接根据节点的 type 去跟组件一一对应？似乎很可能会重名比如在表格里面展示的类型 `text` 跟表单里面的 `text`是完全不一样的，一个负责展示，一个却负责输入。所以说一个节点要被什么组件渲染，还需要携带上下文(context)信息。
|
||||
|
||||
如何去携带上下文（context）信息？AMis 中直接是用节点的路径（path）来作为上下文信息。从上面的例子来看，一共有三个节点，path 信息分别是。
|
||||
如何去携带上下文（context）信息？amis 中直接是用节点的路径（path）来作为上下文信息。从上面的例子来看，一共有三个节点，path 信息分别是。
|
||||
|
||||
* `page` 页面节点
|
||||
* `page/body/form` 表单节点
|
||||
|
|
@ -211,7 +211,7 @@ export class FormItemTextRenderer extends React.Component {
|
|||
|
||||
## 自定义组件
|
||||
|
||||
如果 AMis 中组件不能满足你的需求，同时你又会 React 组件开发，那么就自己定制一个吧。
|
||||
如果 amis 中组件不能满足你的需求，同时你又会 React 组件开发，那么就自己定制一个吧。
|
||||
|
||||
先来看个简单的例子
|
||||
|
||||
|
|
@ -247,7 +247,7 @@ class CustomRenderer extends React.Component {
|
|||
}
|
||||
```
|
||||
|
||||
如果你看了[AMis工作原理](#工作原理)应该不难理解，这里注册一个 React 组件，当节点的 path 信息是 `my-renderer` 结尾时，交给当前组件来完成渲染。
|
||||
如果你看了[amis工作原理](#工作原理)应该不难理解，这里注册一个 React 组件，当节点的 path 信息是 `my-renderer` 结尾时，交给当前组件来完成渲染。
|
||||
如果你只写叶子节点的渲染器，已经可以不用看了，如果你的渲染器中有容器需要可以放置其他节点，那么接着看以下这段代码。
|
||||
|
||||
```jsx
|
||||
|
|
@ -401,4 +401,4 @@ class MyFormItem extends React.Component {
|
|||
```
|
||||
|
||||
即：通过 `children` 传递一个React组件，这个示例是一个React Stateless Functional Component，也可以是传统的 React 组件。
|
||||
任何节点如果包含 `children` 这个属性，则都会把当前节点交给 `children` 来处理，跳过了从 AMis 渲染器池子中选择渲染器的过程。
|
||||
任何节点如果包含 `children` 这个属性，则都会把当前节点交给 `children` 来处理，跳过了从 amis 渲染器池子中选择渲染器的过程。
|
||||
|
|
@ -3,13 +3,13 @@ title: 样式表说明
|
|||
shortname: style
|
||||
---
|
||||
|
||||
AMis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。
|
||||
amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。
|
||||
|
||||
AMis 中的样式基于 [BootStrap V3](http://getbootstrap.com/css/), 这里主要讲 Bootstrap 中没有涉及到的。
|
||||
amis 中的样式基于 [BootStrap V3](http://getbootstrap.com/css/), 这里主要讲 Bootstrap 中没有涉及到的。
|
||||
|
||||
## 图标
|
||||
|
||||
AMis 集成了 [fontawesome](http://fontawesome.io/icons/)，所以关于图标部分，请前往 [fontawesome](http://fontawesome.io/icons/) 查看。
|
||||
amis 集成了 [fontawesome](http://fontawesome.io/icons/)，所以关于图标部分，请前往 [fontawesome](http://fontawesome.io/icons/) 查看。
|
||||
|
||||
## 布局
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue