学习腾讯无极低代码的第3天

96 阅读9分钟

组件间联动 拖拽选择器 首先要重复昨天的操作,将数据源绑定到页面上。 在数据面板上,将需要的数据按照合适的组件类型拖拽出来。

image.png

数据源拖拽出来的组件,会自动根据数据的性质填写对应属性。 不同的组件信息放在后面,有需要的同学自取哈~

“组件商店”:component.woa.com/page/

配置数据联动筛选方法 1、想要呈现的效果是在输入省会时,改变城市的信息展示,因此先选中省会的输入筛选器,配置“当省会输入的值变化时,会触发一个城市数据源信息请求变更的调用事件”

image.png

image.png

2、 这里调用的数据是“城市表”,需要根据输入的省会进行筛选,重新请求城市表的信息,所以数据表和数据源方法的选择如下:

image.png

3、 配置完成,点击保存&预览,进行体验

image.png

配置完成 配置到这里,两个数据源间的联动筛选就配置完成啦~

image.png

常用技巧整理 基础技巧 在无极上快速搭建一个管理台页面,可以基本概括为以下阶段步骤: 【页面准备阶段】 创建管理台应用 ➡️ 准备数据源 ➡️ 创建一个无极页面 【页面搭建阶段】 绑定数据源到页面 ➡️ 拖拽数据生成页面 ➡️ 配置行为事件 【页面使用阶段】 保存 ➡️ 预览 ➡️ 发布 ➡️ 效果检测等等

页面准备阶段 不同的数据源情况 在搭建页面的时候,会遇到不同的数据源情况,例如: 1、纯样式页面,不需要数据源 2、页面计划会有数据源,且业务本身已有数据存储,无需无极的数据存储功能 3、页面计划会有数据源,需要将数据存储到DB,但是还没有对应HTTP接口的数据

image.png

(1) 已有数据存储,直接接入无极应用 无极应用支持多种类型的数据源接入,不同数据源类型的配置内容不同,具体信息可以查看官网教程。

(2) 未有数据存储,先建立DB表存储数据,再接入 对于需要存储到DB,但是还没有对应HTTP接口的数据,可以使用无极的“数据配置”功能来实现,整个数据准备与接入流程可概括为: STEP1:数据配置侧:建项目>>建表 STEP2:应用管理侧:授权数据配置到应用项目>>建立数据源

页面搭建阶段 页面搭建流程,我们在已经学习了很多,接下来详细拆解一下无极的编辑器,可以更好的理解无极的功能构成。

每一个应用页面搭建前,我们都可以思考一下:这个应用页面,需要有什么内容?

问题1:页面需要向展示什么信息? ——页面编辑上主要为此服务的功能是:数据源

问题2:这个页面要长成什么样子,有哪些页面元素、如何布局? ——页面编辑上主要为此服务的功能是:页面编辑器(可拖拽画布)、页面样式、组件

问题3:我可以在这个页面上进行什么事情? ——页面编辑上主要通过给“页面&组件”绑定“行为事件”来满足页面上的操作需求

解决以上3个问题,构成了页面编辑器的主结构

image.png

在之前学到了如何将数据源和页面进行绑定、使用数据源一键推导生成UI等方法,这能够快速的帮我们生成一个样式通用的列表、表单页面,但面对更加复杂的页面样式需求,无极还有更多的隐藏功能可以解锁。

  1. 拖拽字段,自动匹配组件,支持快速更换 我们从数据源中拖拽一个字段到画布上,编辑器会根据字段的类型自动匹配一个相对合适的组件来承载展示,例如:String字段拖出,无极会默认把他装在一个只读文本

image.png

可以直接选中组件, 点击“更换组件”来快速变更组件的样式,如将文本变更为输入框: image.png

  1. 双击组件,无限钻入画布,调整局部样式 如果无极推导出来的页面列表整体都符合要求,只有一小部分需要替换组件/数据等等进行微调的话,我们可以选中需要调整的部分,双击编辑组件进行局部调整。

如下图,鼠标锚定到要调整的位置,不断双击下钻到要调整的数据内容区域,即可针对这个区域的样式和数据进行配置。

image.png

组件配置的过程中,左侧数据源列表会根据你选中的组件定位到对应的数据项上。

image.png

  1. 用行为事件来实现各种各样的页面逻辑 页面上从用户操作的引发数据变化大多上都是通过配置数据&组件间的行为事件实现的 行为事件在不同组件上可以配置的内容不同。这里通过两张图给展示一下行为配置面板的内容,以便于更好的理解这个模块的功能。

image.png

image.png

  1. 常见的页面需求案例 页面在搭建和使用的过程中,难免会遇各种各样的数据使用情况,无极的数据源面板以及数据和行为方法的联动可以解决大部分数据使用问题。

(1)在xxxx的时候,让数据产生xxxxxx的变化来展示(使用)。 数据的变化大多都可以套用这个通用话术公式来概括,加入这个公式之后,我们的需要关注的重点其实就可以概括为红色字体的两个部分。 举几个例子:

  1. 在页面初始化加载的时候,让数据筛选用户是自己,创建时间倒序的方式展示。
  2. 在用户到页面底部的时候,让数据自动加载下一页并展示。
  3. 在用户点击某个按钮的时候,让数据删除/刷新/唤起弹窗等等等等……

“在xxxx的时候”这个是时机,在无极上用行为里面的“添加事件”来配置: 如:我们选中页面这个元素,页面在下面这些时机里,都可以发生变化,代入公式就是“在页面初始化时”、“在页面滚动时”、“在离开页面前”……

image.png

或者我们把页面换成一个按钮组件,那时机的可选项会根据组件的情况减少,即变成“在按钮点击时”。

image.png

“让数据产生xxxxx的变化”这个是数据源变化的逻辑,在无极里面添加一个“数据源方法”来定义数据怎么变。

image.png

那么数据源变化的时机和数据源变化的逻辑是什么绑定在一起的呢? 答:在行为的事件时机上面,将数据源方法绑定到到该事件的行为步骤里

具体步骤: 第一步:在时机下面,选中“数据源操作“这个行为步骤。

image.png

第二步:在数据源操作的面板里面关联上要变化的数据源和这个数据源可以使用的方法

image.png

第三步:在“输出”里定义好这个数据源逻辑变化后,要得出什么结果。

(2)有一些无需存储的临时数据,这些数据在当前页面上是可以变化的。 某些情况下,页面有一些临时需要用到的数据,这些数据仅在这个页面上生效,这时我们可以用一个变量来存储。无极支持2种类型的变量。

  • 普通变量:简单理解为--定义一个“默认值“被写死的字段,在页面运行的过程中,这个”值“可以根据我的一些操作行为产生变化

image.png

  • Computed变量:简单理解为--定义一个“值”可以通过逻辑计算灵活变化的字段 【Getter】这个配置决定了变量值的计算逻辑,写入你希望这个值怎么变 【Setter】如果你有临时存储这个变量变化的需求,写入你希望存储的位置

image.png

什么时候我们可以用变量?变量适用于什么需求场景呢?

在一个页面中需要用到滚动加载数据的情况,用户首次进入仅展示部分数据,在不断下拉的过程中,展示更多的数据

需要在页面上定义一个开关,当开关打开和关闭的时候,展示不一样的数据,如打开开关的时候只展示我“收藏“的数据,关闭开关的时候展示全量数据

在一个列表中,我们需要一次性批量修改其中几条数据,可以选中这几条数据用一个变量存储起来,在其他位置展示修改

(3)需要使用页面上的一些参数作为数据的情况 有些页面数据需要根据“链接”或者“上一个页面”携带的不同参数来做特性展示时,可以通过数据源参数的方式来获取这些数据。

  1. 进阶&配置案例推荐 为了更好地使用和了解无极更多复杂的操作,能够更好地搭建想要的页面,在无极的官方文档中还给出一些具体的常见案例和使用技巧,有需要的话可以去看看~~

页面使用阶段 使用阶段的能力其实已经和业务本身脱离了,无关乎业务数据和具体页面样式,和大多数工具平台一样,基本是一些简单的通用能力。 在一个页面搭建完成我们之后,无极支持用户直接预览搭建效果,可以直接在页面编辑器上操作:保存 ➡️预览 ➡️发布,这个在前面也有学习到~ 页面往往不是独立存在的,前面说到应用(管理台)是页面的载体,往往还有很多通用能力需要一并考虑,包括菜单、导航、环境、权限、基础信息、日志、数据追踪、安全等等,这些应用级能力都可以在官方文档获取

image.png

体验后,有更好的想法欢迎戳我交流~~