p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

rn AMis to amis

This commit is contained in:
liaoxuezhi 2019-05-14 13:23:16 +08:00
parent acc2ed0d06
commit 1ee1d7556a
11 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -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
## 快速开始

2
docs/dev.md
View File

@ -70,7 +70,7 @@ export default class CustomCheckbox extends React.PureComponent {
### Renderer
非表单类的组件自定义，主要通过 `Renderer` 实现。在开始阅读之前，请先阅读 [AMis 工作原理](./sdk#工作原理)。
非表单类的组件自定义，主要通过 `Renderer` 实现。在开始阅读之前，请先阅读 [amis 工作原理](./sdk#工作原理)。
```jsx
import * as React from 'react';

4
docs/getting_started.md
View File

@ -2,7 +2,7 @@
title: 快速开始
---
为了简化前端开发，AMis Renderer 能够直接用配置就能将页面渲染出来。
为了简化前端开发，amis Renderer 能够直接用配置就能将页面渲染出来。
先来看个简单的例子。
@ -21,7 +21,7 @@ title: 快速开始
> PS: 可以通过编辑器实时修改预览
从上面的内容可以看出，一个简单页面框架已经基本出来了，这是 AMis 渲染器配置的入口。从 `page` 渲染器开始出发，通过在容器中放置不同的渲染器来配置不同性质的页面。
从上面的内容可以看出，一个简单页面框架已经基本出来了，这是 amis 渲染器配置的入口。从 `page` 渲染器开始出发，通过在容器中放置不同的渲染器来配置不同性质的页面。
简单说明以上配置信息。

2
docs/renderers.md
View File

@ -1,6 +1,6 @@
### 渲染器手册
AMis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成的，掌握他们规则，就能灵活配置出各种页面。
amis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成的，掌握他们规则，就能灵活配置出各种页面。
- [Page](./renderers/Page.md): JSON 配置最外层的 Page 渲染器
- [Form](./renderers/Form.md): 表单渲染器

4
docs/renderers/Action.md
View File

@ -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"
{

2
docs/renderers/Button.md
View File

@ -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"
[

2
docs/renderers/File.md
View File

@ -1,6 +1,6 @@
### File
文件输入，AMis 也默认处理了图片存储，提交给 API 的是文件的下载地址。
文件输入，amis 也默认处理了图片存储，提交给 API 的是文件的下载地址。
- `type` 请设置成 `file`
- `reciever` 默认 `/api/upload/file` 如果想自己存储，请设置此选项。(PS: 如果想存自己的 bos, 系统配置中可以直接填写自己的 bos 配置。)

2
docs/renderers/Image.md
View File

@ -1,6 +1,6 @@
### Image
图片格式输入，默认 AMis 会直接存储在 FEX 的 hiphoto 里面，提交到 form 是直接的图片 url。
图片格式输入，默认 amis 会直接存储在 FEX 的 hiphoto 里面，提交到 form 是直接的图片 url。
- `type` 请设置成 `image`
- `reciever` 默认 `/api/upload` 如果想自己存储，请设置此选项。

4
docs/renderers/Types.md
View File

@ -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
View File

@ -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 渲染器池子中选择渲染器的过程。

6
docs/style.md
View File

@ -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/) 查看。
## 布局