低代码能力模型 | 黯羽轻扬
低代码，要怎么低？和低代码有关的 10 个问题 - 知乎

灵活性和易用性之间

组件间的交互处理

一些技术观察

应用最多的场景

  • 表单
  • 流程
  • 仪表盘 (dashboard)
  • 报表 (各种chart)
  • Table (curd等复杂场景)

内部逻辑编排还是外部逻辑编排？

内部的逻辑编排，组件内部化

百度的amis，都是各种内部的编排。

如table中的编辑按钮，弹窗编辑，则是在事件中绑定事件行为叫做“抽出式弹窗”，然后再弹一层窗口，配置弹窗的内容。这个弹窗就跟这个按钮绑定的局部的了。

外部逻辑编排，组件平级化

拖拽按钮，拖拽弹窗，然后通过编写JS或者蓝图编辑器连线的方式来关联。

或者

组件间的关联，组件间的引用描述

数据的传输，传输给下个组件怎样的数据？

如有input查询的target为另一个table组件，如何传数据给另个数据，如何配置传输哪些数据？

数据作用域，以及对数据的引用

思路，拿几个经典场景来看

思考，拿几个经典场景，比较复杂的场景来看，如果这些场景满足，解决了，就能够满足复杂场景建设了。避免使用简单场景来推，未来无法满足复杂场景。

  • 表单的场景

    • 显隐状态联动 (这其实是基本能力)
    • 表单校验
      • 自身值的校验规则，自身值的动态校验(服务端校验)
      • 关联校验，如两个input值相等，如校验groupBy选择的值是否在select的input中
      • 服务端验证，请求完的验证
    • 值的动态关联
      • 如选择了某个radio，清空某个input
      • 如某个groupBy的下拉框的值，需要从其它的几个input中计算得来
      • 如下拉可选值，或推荐值动态从服务端拉取
    • 动态表单
      • 即可动态添加input
    • 子表单

  • table (crud)的场景

    • 顶部的查询筛选 (查询时还需重置翻页)
    • 底部的翻页能力
    • 中间的功能区，选择，全删除，全已读等各种操作
    • 各column的配置
    • table中的操作
      • 编辑，弹窗表单的形式编辑，然后服务端请求，然后重刷table
      • 删除操作，删除后重刷
    • 嵌套子table

  • 可视化BI

**

  • 动态渲染 参考vue-directive

    • for循环，
    • if , else , else if
    • show
    • 作用域内变量如何获取

  • 子组件的渲染

    • slot

对表单能力的思考

https://x-render.gitee.io/form-render/playground 这里面的复杂联动案例，其他表单动态变更的

需要具备哪些能力？

  • 基础，提供访问其他值的能力
  • 各种参数，都是具备动态的能力，而非静态配置

参数联动的动态能力

  1. 1 
  2. key: bi 
  3. desc: 币种
  4. enum [rmb, dollar]
  5. enumNames [人民币，美元]
  7. 2 
  8. key: value
  9. desc: bi === 'rmb' 一次汇款不超过150美元 : 一次汇款不超过1000元
  10. addonBefore: bi === 'rmb' ? '￥':'$' 
  11. addonAfter: bi === 'rmb' ? '元' : '美元'

这里的动态能力只是简单的一行js判断，还可能是复杂的需要写一段js逻辑的语句，并且是涉及到多个字段的。

  1. selects
  2. // [count() count, avg(xx) avgSpeed]


校验联动的动态能力**

  1. 1 password
  2. 2 repassword
  3.     pattern: password === repassword
  4.     message: 两次密码输入不一致

AMIS的思考

AMIS这套封装的太严重了，对低代码的这套研发成本太大

  • Form 中又为了联动，出现了公式，formula，以及特定按钮触发，按钮还有个target配置。

  • 按钮点击出弹窗，在按钮的事件中，封装了一个弹窗的可视化响应配置。

  • 校验规则，也封装了一个叫和另一个组件值相等。

  • 封装了组件叫做增删改查，crud