baidu/amis

前端低代码框架，通过 JSON 配置就能生成各种页面。

文档（国内） | 文档（国外） | 可视化编辑器 | amis-admin | 爱速搭

如流群：3395342 | 如流群2：5511067|

前端低代码框架，通过 JSON 配置就能生成各种后台页面，极大减少开发成本，甚至可以不需要了解前端。

开发指南

以下是参与开发 amis 才需要看的，使用请看前面的文档。

如果 github 下载慢可以使用 gitee 上的镜像。

推荐使用 node 12/14/16。npm 7+， 因为用到了 workspaces 功能。

# 安装项目 npm 依赖，在 node 12 下会有报错但不影响正常使用。
npm i --legacy-peer-deps

# 启动项目，等编译结束后通过 http://127.0.0.1:8888/examples/pages/simple 访问。
npm start

如果是开发编辑器，需要访问 http://127.0.0.1:8888/packages/amis-editor/

测试

注意：本地修改代码后，执行测试用例（npm test --workspaces）之前需要先执行npm run build完成编译，因为 jest 并不支持 TypeScript

# 安装依赖
npm i --legacy-peer-deps

# 执行构建
npm run build

# 执行测试用例
npm test --workspaces

# 测试某个用例
# <spec-name>为用例名称，比如inputImage
npm test --workspace amis -- -t <spec-name>

# 运行某个单测文件
./node_modules/.bin/jest packages/amis/__tests__/renderers/Form/buttonToolBar.test.tsx

# 运行某个单测文件里的某个例子
./node_modules/.bin/jest packages/amis/__tests__/renderers/Form/buttonToolBar.test.tsx -t 'Renderer:button-toolbar'

# 查看测试用例覆盖率
npm run coverage

# 更新 snapshot
npm run update-snapshot

# 更新单个 snapshot
# <spec-name>为用例名称，比如inputImage
npm run update-snapshot --workspace amis -- -t  <spec-name>

发布版本

# 发布内部 registry
npm run publish

# 发布外网环境
# 先通过一下命令设置版本号
npm run version
npm run release

如何贡献

请使用分支开发，首先创建分支

git checkout -b feat-xxx

开发提交后使用 git push --set-upstream origin feat-xxx 创建远程分支。

然后通过系统提示的 https://github.com/xxx/amis/pull/new/feat-xxx 链接来提交 PR。

请采用 typescript 编写，所有合理的改动、新的公用渲染器、用例或者文档的提交都会被接收。

贡献者

低代码平台

amis 只能实现前端低代码，如果需要完整的低代码平台推荐使用爱速搭。

amis's Issues

json 配置里如何获取父组建的数据

是否可以隐藏导航栏，将页面通过iframe嵌入其他系统呢？

分页加载数据，默认参数page= 1, perPage=10, 如何动态自己的参数呢

是否可能提供更轻量的 函数渲染器?

静态文本

在使用amis时, 我遇到类似以下的情形:

export default {
    type: 'page',
    body: {
          type: 'tpl',
          tpl: '<span>我是一段静态文本, 整个项目内保持统一</span>',
    }
}

可以非常方便地改成:

const GlobalDesc = {
    type: 'tpl',
    tpl: '<span>我是一段静态文本, 整个项目生命周期内保持统一</span>',
};

export default {
    type: 'page',
    body: GlobalDesc      <== 直接替换
}

非常简单, 非常实用.

---

公共picker

然后我遇到一个公共 选省份的picker:

const ProvincePicker = ({name, value}) => ({
    type: 'picker',
    name,
    label: '单选',
    value,
    options: [{label: '北京', value: 'BJ'}, {label: '四川', value: 'SC'}, {label: '上海', value: 'SH'}, {
        label: '广东',
        value: 'GD',
    }],
});

我这样用它:

export default {
    type: 'form',
    api: '/api/mock2/form/saveForm',
    controls: [
        ProvincePicker({name: 'province', value: 'BJ'}),        <== 注意这里!!!! 与amis风格不统一
    ],
    actions: [{type: 'submit', label: '提交'}],
};

其中的 ProvincePicker({name: 'province', value: 'BJ'}) 让我感觉很糟糕, 可能主要是视觉上的.
比较而言, 我更希望amis的风格:

{
    name: 'type',
    type: 'province-picker',
    value: 'BJ'
}

问题

这就需要注册一个新的 province-picker 类型的渲染器
但以我的浅见, 这既重又不必要, 因为我们并不需要涉及context, 只是简单地生成js object
所以, 提供一种纯函数渲染器的方式可行吗?

registerFunctionalRenderer(/^provice\-type$/, ProvincePicker);   <== ProvincePicker是上面的函数

然后这样用它:

{
    type: 'province-picker',   <== 函数式渲染器, 不涉及context操作, 返回一段新的js object替换这里
    name: 'type',        <== 直接传到 ProvincePicker 函数里
    value: 'BJ'            <== 直接传到 ProvincePicker 函数里
}

疑问fetcher中data参数是如何传递过来

fetcher: (
{
url,
method,
data,
config
}) => {
})

想知道这个框架的主要思路

想知道这个框架的主要思路

amis功能太强大了，请问开源部分包括后端吗?就像百度内部的amis一样

evalExpression 直接 new Function 还是有点危险的

我这边做过类似的表单工具，也有遇到需要支持配置表达式的场景，一开始也是使用 new Function ，但是这样开发者还是很容易拿到完整的 dom 对象，后来有对外开放过，需要考虑安全场景，所以我这边写了一个简单的表达式解析工具 https://github.com/shepherdwind/simple-evaluate 。

如果你们有需要考虑安全问题，可以参考下 😄

amis/src/utils/tpl.ts

Lines 30 to 42 in e076c6b

	export function evalExpression(expression: string, data?: object): boolean {
	/* jshint evil:true */
	try {
	const fn = new Function(
	"data",
	`with(data) {return !!(${expression});}`
	);
	data = data || {};
	return fn.call(data, data);
	} catch (e) {
	return false;
	}
	}

可以支持Vue的自定义组件吗

amis renderSchema函数第三个参数env配置问题

看了amis-admin，是规定必须要用mobx-state-tree

请问amis我可以将schema当做一个模板来用，动态生成页面么？

比如类似这样的：
render(schema);
schema后端可以通过接口提供，然后渲染出定制化的页面来

amisPage / amisUser 如何使用?

文档 高级用法中提到:

page 等价于全局变量，因为顶级渲染器就是它，所以下面的所有组件都能用到这个里面的数据。
amisPage 当前页面的数据信息，包含标题，id，key 之类的信息。
amisUser 当前用户信息，包含邮箱和用户名信息。

但在源码中, 并未找到相关内容, 请问具体如何使用这两个属性呢?

page. children的行为 与预期 不一致

先看第一段代码:

export default {
    type: 'page',
    name: 'page',
    initApi: '/api/mock2/page/initData',
    body: "$title"                       <===   正常输出 " Test ...."
};

---

再来看第二段, 仅仅是用children替代了body, 预期输出与 上面代码 应该 完全相同,
然而:

export default {
    type: 'page',
    name: 'page',
    initApi: '/api/mock2/page/initData',
    children: (...args) => 
        args && args[0] && args[0].title ? args[0].title : 'nothing'    <====  居然输出 "nothing"
};

---

请问是什么原因呢?
如果想自定义 children , 应该如何做?

增删改插示例, [保存并下一个], 关闭对话框后, 页面如何自动刷新?

对应本地访问地址: http://127.0.0.1:8888/examples/crud/jump-next

( [ 表格模式 ] 可以自动刷新, [ 保存并下一个 ] 无法自动刷新 )

请问应该如何设置呢?

建议加上.prettier

方便贡献代码. 目前稍一修改, 文件格式就全变动了.

请问下JSON Schema是手动编写的还是通过解析代码生成的？

比如这里 （ https://houtai.baidu.com/v2/schemas/page.json ） 的schema定义，理论上是应该跟渲染器可以支持的配置对应起来的。当某些渲染器的代码更新了导致配置字段也更新了，这时的schema是人为手工跟着维护还是可以通过最新代码解析生成呢？

两个子节点怎么互相传递数据

比如一个form中，有两个service，这两个service的数据怎么传递给对方比较好？

请问文件上传成功后，后端要返回什么样的数据格式？

现在有个需求是上传excel文件到服务器
上传成功了，但是页面没有任何反馈，
想请教下，上传成功后，后端同学要返回什么样的数据格式

请问，为何用react不用vue呢？主要考虑哪些方面的原因？

1、我在做类似的东西，但是实现是用vue来做的，主要考虑的是自己知识体系的问题，我想知道，这个项目出于什么原因考虑用的react?
2、我有个项目是通过拖动组件的方式生成json，然后根据json的可视化配置渲染页面，现在发现你们这个项目可以简化我的组件开发和json定义，我是否可以在这个项目的基础上做二次开发，直接根据你们这个项目的json做配置？这么做是否会涉及侵权？（商用）
3、有没有移动端的一套类似的json和对应组件，开源分享一下？同样我在此基础上做2、描述中的二次开发来使用，是否涉及侵权？（商用）

select多选后样式错乱

现在问题：

多选后label上移

建议：
让label保持在一行，样式可以修改成：
Form-item--inline>.a-Form-value>.a-Form-control {
vertical-align: bottom;
}
top改成bottom；

前端可视化编辑生成页面开源了吗?

http://amis.baidu.com/内网里面可以通过拖拽,填表单的方式生成页面.

通过json配置页面优势在哪？

首先赞一个👍
我理解好处是修改后台库中的字段就可实时更新页面，避免生产上重复部署；
但采用json来定义页面结果相较于直接写代码工作量感觉并没有减少，而且编辑器各种插件也用不了，所以好奇实际写起来效率如何？

amis 1.0.0-rc.2, npm test 出错

__tests__/renderers/Form/index.test.tsx 
 ● Renderer:Form initApi
 ● Renderer:Form sendOn:true

框架好像只是针对于前端渲染，后端没有涉及

所以想问下，有没有匹配的后端框架？

或者我们自己定制我们的后端框架有没有一些规范？

打包后icon的classname合在一起了，没有空开

fis配置

const build = fis.media('build');

build.match('/node_modules/(**)', {
    release: '/n/$1'
});

build.match('/script/refresh.js', {
    optimizer: fis.plugin('uglify-js'),
    release: '/script/refresh.js'
});

build.match('::package', {
    packager: fis.plugin('deps-pack', packConfig),
    postpackager: [fis.plugin('loader', {
        useInlineMap: false,
        resourceType: 'mod'
    }), function(ret) {
        const indexHtml = ret.src['/index.html'];
        const pages = [];
        const contents = indexHtml.getContent();
        pages.forEach(function(path) {
            const file = fis.file(fis.project.getProjectPath(), '/' + path + '.html');
            file.setContent(contents);
            ret.pkg[file.getId()] = file;
        });
    }]
});

build.match('*.{css,less,scss}', {
    optimizer: fis.plugin('clean-css'),
    useHash: true
});

build.match('::image', {
    useHash: true
});

build.match('*.{js,ts,tsx}', {
    optimizer: fis.plugin('uglify-js'),
    useHash: true
});
build.match('/script/refresh.js', {
    useHash: false
});
build.match('*.map', {
    release: false,
    url: 'null',
    useHash: false
});
build.match('{*.jsx,*.tsx,*.ts}', {
    parser: fis.plugin('typescript', {
        sourceMap: false,
        importHelpers: true
    })
});
build.match('{*.jsx,*.tsx,*.ts,*.js}', {
    moduleId: function (m, path) {
        return fis.util.md5('amis' + path);
    }
})

build.match('*', {
    deploy: [
        fis.plugin('skip-packed'),
        fis.plugin('local-deliver', {
            to: './dist'
        })
    ]
});
build.match('{*.min.js,monaco-editor/**.js}', {
    optimizer: null
});
build.match('monaco-editor/**.js', {
    useHash: false
});

麻烦有空看下，谢谢

数据作用域的疑问

考虑将 appInfo + userInfo 统一保存到顶级作用域, 各页面可共享, 即如下结构:

App  ( data: { appInfo, userInfo } )
  | ---   BizPage1 
  | ---   BizPage2
  | ---   BizPageN

但由于 amis 未提供 App Renderer, 所以 使用了 service, 如下:

export default {
    type: 'service',       <==  使用service作为顶级组件
    initApi: '/api/mock2/page/initData',            <=============     ( 1 ) 
    body: {
        type: 'grid',
        columns: [
            {
                type: 'page',
                name: 'page1',
                md: 3,
                // initApi: '/api/mock2/page/initData',             <========       ( 2 )
                children: (...args)=>{console.log("args-page1", args); return null;}
            },
            {
                type: 'page',
                name: 'page3',
                body: 'page3',
                md: 9,
            },
        ],

    },
};

存在的问题是:
只有 顶级的 service.initApi ( 1 ) 会自动执行
而 page.initApi ( 2 ) 不会执行.

---

疑问1: amis **享user等信息的正确方式是怎样的呢?
疑问2: 为何server中嵌套page的initApi不会被执行?

可以提供一个vue的demo吗？

amis内置的组件(如AsideNav)，有使用文档么

import {
Layout,
Button,
AsideNav
} from 'amis';

为啥body为字符串的时候可以渲染出来，设成json对象就渲染不了

import * as React from 'react'
import {
  render as renderAmis
} from 'amis'

class Main extends React.Component<any, any>{
  render() {
    return (
      <div>
        <p>通过 amis 渲染页面</p>
        {
          renderAmis({
            // schema
            // 这里是 amis 的 Json 配置。
            type: 'page',
            title: '简单页面',
            body: {
              "type": "form",
              "name": "sample1",
              "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1",
              "controls": [
                {
                  "name": "email",
                  "label": "Email",
                  "type": "email",
                  "description": "描述文字"
                },
                {
                  "name": "text",
                  "type": "text",
                  "label": "Text"
                }
              ]
            }
          }, {
            // props
          }, {
            updateLocation: (location:string, replace:boolean) => {
              // 用来更新地址栏
            },

            jumpTo: (location:string) => {
              // 页面跳转， actionType:  link、url 都会进来。
            },

            fetcher: ({
              url,
              method,
              data,
              config
            }: {
              url:string,
              method:'get' | 'post' | 'put' | 'delete',
              data: object | void,
              config: object
            }) => {
              // 用来发送 Ajax 请求，建议使用 axios
            },
            notify: (type:'error'|'success', msg:string) => {
              // 用来提示用户
            },
            alert: (content:string) => {
              // 另外一种提示，可以直接用系统框
            },
            confirm: (content:string) => {
              // 确认框。
            }
          })
        }
      </div>
    )
  }
}

export default Main

如何实现全局拦截器呢？

如果要增加权限控制，如何添加基于axios/api的全局拦截器，跳转到无权限页面呢？

通过import导入样式, 为啥在编译是报Unexcepted character '@'

import * as React from 'react'
import { render } from 'react-dom'
import Hello from './page/Hello'

import 'amis/lib/themes/default.css'
import './css/index.css'

render(, document.getElementById('root'))

快速开始的例子为空？

Cannot GET /v2/docs/getting-started

Cannot GET /v2/docs/getting-started

关于Vue自定义组件实现

#20 因为在这个issue中看到Vue自定义组件正在开发中，我希望能将这套方案用到Vue项目中，请问下实现方案是用Vue重写了核心机制还是有一套Vue转React组件的实现呢？

initApi可否不使用url, 而使用自己的service呢?

原因:
基于老系统进行改造, 不方便重写后台接口
3x

引入之后如何配置主题呢？

真的非常厉害，在主题和样式方面如何做到灵活配置呢

关于自定义组件

自定义组件群组管理在哪，公司内部页面？

请问crud渲染器如何normalize通过api配置获取的数据供columns使用？

比如crud的table类型，每个columns渲染器似乎只能获取到原始data，有办法在curd渲染器这一层normalize吗？

建议完善ts类型

amis1.0.0-rc.2源码下载后, 在vs code里发现一些ts类型错, 典型如:

• src/components/DatePicker.tsx
• src/components/Editor.tsx

---

由于只有了Layout 与 AsideNav 两个组件, 发现AsideNav报ts错:

<AsideNav navigations={navigations} />   

(navigation类型有问题)

为什么不用webpack

想改编译过程，还需要去看fis

使用webpack从零构建一个项目，如何接入amis，有没有相关的指导

样式不起作用

用renderAmis渲染json，运行出来没样式？不知道如何引入样式

期待QCON PPT

作为百度的RD没有可视化编辑器学起来有点难哇

求开源可视化编辑器

webpack项目兼容性问题

hi，我在webpack环境使用了下发现textarea 配置报错。

在webpack下 require("../../components/Textarea") 取到的模块出错
我创建了一个demo项目复现问题
https://github.com/21paradox/test-amis-textarea

没有样式效果

你好，用renderAmis渲染json，运行出来没样式？

json schema 文件外网貌似访问不了

如：http://amis.baidu.com/v2/schemas/page.json

page与page之间可以通过json共享数据吗？

比如说一个列表页面，和一个详情页面

fontAwesome上面的icon有些用不了

比如

<i class="fas fa-spider"></i>

找不到node_modules/react-dom/node_modules/object-assign/index

输入 http://127.0.0.1:8888/examples/pages/simple
后找报错

mod.js:141 Uncaught [ModJS] Cannot find module `node_modules/react-dom/node_modules/object-assign/index`
require @ mod.js:141
(anonymous) @ npm.js:3461
(anonymous) @ npm.js:24719
require @ mod.js:151
(anonymous) @ npm.js:24764
require @ mod.js:151
(anonymous) @ index.jsx:6
require @ mod.js:151
updateNeed @ mod.js:207
require.async @ mod.js:216
require @ mod.js:126
(anonymous) @ simple:272