【低代码】iVX编辑介绍及随机验证码demo

1. ivx界面介绍

1.1 舞台

画面中间有一块白色区域，称之为“舞台”（也称为前台、编辑器窗口），它定义了项目的编辑区域，所有的编辑和创作都在这一区域完全可视化地进行：

1.2 组件工具栏

工作界面最左侧的长条形组件栏中竖直排列着一列小图标，每个小图标就是一个“组件”。每个组件都有特定的功能和用法，例如用于页面排版的横幅、面板，用于添加媒体对象的图片、视频、音频、文本，用于添加动效的动效组等等：

组件是iVX中最为核心的元素，所有交互、动画、数据都需要以组件为基础，通过组件的组合和编排来完成。有些组件可以容纳媒体素材，例如图片组件，需要为其指定图片素材；音频组件，需要指定音频素材。
了解每种组件的详细用法、它所支持的素材类型，是使用iVX的基础，可以在“组件详解”模块中进行学习。

组件栏具有以下功能特性：
· 组件栏按照组件功能被划分为若干区域，包括系统组件、媒体组件、数据组件、通讯组件等。
· 组件栏有“精简”和“完整”两种模式，可以通过点击左上角的“折叠\展开”按钮，在精简和完整模式之间切换。
· 依照选取的案例类型（小程序、网站）、开发环境和排版方式的不同，系统将自动加载匹配的组件，组件类型和用法可能略有差异。
· 前台和后台对应不同的组件，详情见“组件详解-前台组件/后台组件”。

1.3 对象树/素材面板

工作区的右侧为对象树/素材窗格。二者可通过顶部标签进行切换，默认状态展示对象树窗格。

• 对象树
  对象树是进行对象管理的重要窗口。当前开发环境中添加的每种组件都会被对象树记录，以树状结构进行可视化的展示，例如下图：
  

对象树分为前台和后台两部分，其中前台内容即我们的案例所展示的内容，打开案例后能看到的内容都属于前台，通过对对象树前台部分进行操作，可以实现快速选中某个对象、调整对象之间的层级关系、复制或删除对象、对对象进行重命名、搜索对象、为对象添加动画或交互等操作，功能极为强大；后台主要功能为数据的存储，后台可以添加数据库以及服务，通过服务前台就可以对后台的数据库进行操作。

• 素材面板
  素材窗格用于管理当前案例中的所有媒体素材，包括视频、音频、图片等。所有素材都将显示在该窗格中，可进行替换、下载、删除等操作。
  
  当然，在今天的例子中，我们没有用到音视频和图片这种素材，因此素材面板为空。

1.4 属性面板

当我们通过对象树或舞台任意点选一个对象时，可以看到工具栏右侧将对应显示该对象的属性窗格，例如下图是按钮button的属性：

每个对象都有很多属性，比如X、Y是它的位置属性，宽度、高度是它的尺寸属性。通过调节这些属性，可以对每个对象的外观、位置及功能进行定义，使它满足我们的开发需求。

1.5 菜单栏

菜单栏可用于进行一些全局性操作。是iVX中非常重要的功能型区域。

菜单栏分为三个区域：

左侧区域：汇集了若干个下拉菜单。例如「文件」菜单，通过它可以完成新建、保存、另存为等操作：

中部区域：用于案例的预览和发布，以及多人协作开发。

右侧区域：用于定义编辑器的属性：

例如通过设备列表功能，可以在系统预置设备列表中选取合适的开发环境：

需要特别注意的是这里有一个显示比例的按钮，即上图中的100%，我们可以通过它调节编辑器窗口的显示比例。当编辑器窗口尺寸较大时，难以完全显示，通过调节比例，便于更好进行预览。这一点与浏览器网页或者word文档缩放相同。

2.随机验证码

我们通过ivx的随机验证码demo来进行运用学习。

2.1 思路

将0-9，A-Z存放在数组里并设置对应的数字。用一个数值变量在设置的数字范围内随机6次，每次将随机出来数字对应的0-9，A-Z输出到文本变量里组成一个六位数的验证码。如果都随机到数字或者都随机到字母则重新来一次。

2.2 小模块创建

创建四个小模块，分别为随机数字，6次输出结果，验证码，数字对应的验证码。小模块就是编程语言中数组或字符串元素，有的会带一点函数功能，它们始终是基础元素。

随机数字只是一个数值，无特殊属性：

6次输出结果是一个一维数组，数组长度定义为6，并带有清空功能：

验证码是一个值，就与存放生成的随机验证码：

数字对应的验证码用于将生成的随机数字与字符对应起来，例如数字1对应字符1，数字10对应字符A，数字16对应字符G，最后由字符组合为验证码：

2.3 按钮及文本框

文本框Text用于显示生成的验证码，无特殊属性:

按钮用来点击，产生事件触发生成验证码。左侧为按钮的属性，例如宽度，高度，背景色，字体属性等，按照自己的需要进行设置即可。

2.4 动作组定义

“生成六位随机验证码”是动作组程序，即程序名称。下面的动作组定义就如同编程语言的主流程代码：

1. [T]验证码定义了一个变量，初值为空
2. 次数循环6次，生成6个随机数字，数值范围为0~35
3. 数字对应的验证码，进行筛选，将6个随机数字对应转换为字符
4. 回调组合6次输出的字符，产生我们需要的验证码。
   

2.5 验证码生成效果

点击上方的预览→全部，显示编译完成。点击确定即可查看运行效果。

点击生成验证码，即可看到随机验证码：

3. 总结

通过实际demo以及介绍，我们熟悉了ivx编辑器的运用，通过拖延，属性编辑以及动作组定义等操作，真正实现了低代码甚至无代码开发。