The amis's discuss from baidu

Cannot GET /v2/docs/getting-started

静态文本

在使用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 函数里
}

amisPage / amisUser 如何使用?

文档高级用法中提到:

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

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

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

webpack项目兼容性问题

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

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

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

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

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

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

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

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

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

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

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

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

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

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

select多选后样式错乱

现在问题：

多选后label上移

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

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

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

为啥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

数据作用域的疑问

考虑将 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不会被执行?

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

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

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

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

通过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'))

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

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

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

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

关于Vue自定义组件实现

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

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

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

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

amis 1.0.0-rc.2, npm test 出错

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

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; 
        
               } 
        
           }

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

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

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

请问应该如何设置呢?

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 , 应该如何做?

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

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

	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;
	}
	}

baidu / amis Goto Github PK

amis's Issues

静态文本

公共picker

问题

Recommend Projects

Recommend Topics

Recommend Org