关于低代码:低代码平台宜搭的核心概念

宜搭的外围概念

@[TOC]

在左侧数据源中增加变量，增加变量的写法和 js 的写法统一。

给文本绑定数据源，点击左侧方才定义的全局变量，应用 state.helloWorld.name 的形式调用变量（对象取值）

预览中查看后果

在页面公布中复制拜访地址到浏览器就可查看

点击按钮，增加新建动作

这里的动作名称也就是咱们绑定的事件，对于绑定事件的执行以及逻辑，能够在动作面板中编辑。

动作面板中编辑事件逻辑

咱们能够在事件中携带参数，在 js 代码中通过 this.params.xxx 获取对应的数据信息

didMount： 页面生命周期，第一次渲染实现后调用

willUnmount: 页面卸载前调用的生命周期

须要留神：函数的后面必须增加export，否则无奈调用

非法的：
export function fn(){console.log("这是一个函数")
}
不非法的：
const fn = ()=>{}

function fn(){}

在组件的高级配置里有一个是否渲染开关，默认为开启状态，也就是渲染模式

该按钮敞开后，对应的组件不会在页面渲染，咱们能够在组件树上查看该组件是否开启了渲染模式，如果组件树上有一个红色的 icon 图标，则示意开启了条件渲染

条件渲染的应用场景：表单波及到的增加和批改性能，在某些场景下能操作的字段是不同的，所以须要依据对应的状态来判断该字段是否可操作，此处就须要应用条件渲染。

点击中括号，在弹框内设置条件渲染的判断条件

如果全局变量的 helloWorld.name 存在，那么该字段显示，不存在则不显示

当咱们创立一些表格数据的时候，每一行其实是同样的字段，多行显示则能够应用循环渲染。

1、须要应用数据源，这里提供两种数据源，第一种静态数据，第二种动态数据（通过 API 获取），这里以静态数据做演示：

抉择容器组件，在高级选项中设置循环数据的数据源

2、设置遍历的字段信息，这里默认为变量默认为item，索引默认为index，你也能够本人设置

3、设置遍历的 dom 以及数据

咱们理论要遍历的是容器，将文本拖入容器中，设置文本的数据源

设置文本的数据源信息，这里的数据援用的就是方才设置的循环变量 item，此处的item.name 就是咱们要的数据

4、页面预览

抉择对应的组件，抉择右侧的款式，点击源码编辑

这里反对 css 款式，元素默认命名为：

:root

反对伪类、伪元素、动画

表单是无奈关联一般按钮的，须要新建表单，在预览的时候自带提交按钮

宜搭提供两种表单校验设置计划

1、内置校验规定，在官网提供的表单校验上配置即可。

2、自定义校验规定

表单分多种场景，官网提供的表单校验不可能齐全笼罩场景，所以须要手动自定义校验规定

勾选自定义函数，编辑自定义函数

function validateRule(value) {
  /** value 为输出的值 */
  /** 正则校验 - 校验金额 */
  if (/^(([0-9]|([1-9][0-9]{0,9}))((\.[0-9]{1,2})?))$/.test(value)) {return true;}
  return false;
 }

最初附上低代码平台宜搭的官网文档：https://developers.aliwork.com/docs/guide/concept/state

如果感觉这篇文章对你有帮忙，欢送点赞、珍藏、转发哦~

关于低代码:低代码平台宜搭的核心概念

全局变量

根本的变量应用

查看输入内容以及调试形式

事件绑定

页面生命周期

条件渲染

循环渲染

自定义款式

表单校验