iofod - 借助低代码快速构建 WeUI 表单
Iofod 是一款在线可视化应用开发平台，通过它的两个功能——可视化布局和丰富的组件元素，你可以快速输出高质量的复合组件。
前言
随着前端开发业务的需求不断加大，为了开发的高效率和高质量，各位开发者想必已经开始注意到低代码开发平台并在寻找一款适合自己的工具——iofod 会是你不二之选。你可能在担心 iofod 上的组件的质量和数量问题，请放心尝试，近期 iofod 推出 WeUI 系列组件分享，接下来和我一起查看表单结构在 iofod 上是如何快速搭建的。
WeUI 系列框架介绍
WeUI 是一个小程序的 UI 框架，它拥有一套界面设计方案，你只要将其组件一个个拼接到一起，就能让我们的小程序更加美观。但它使用的是比较传统的代码，是通过写好的 CSS 和 HTML 去实现。
表单结构的设计和实现
表单是收集用户数据的容器。一个表单通常由表单控件和相关的提示信息组成。表单控件是实现用户输入的组件。基本的表单包括文本框、密码框、单选按钮、复选按钮、下拉列表框、多行文本框、文本域等。****
Form
在 iofod 中，有着文本、容器和图片的三大基础组件，在实现比较简单的结构，操作起来还是比较快速的，利用可视化编辑区，我们可以使用鼠标拖拽方式去实现，并在右侧 tab 栏中设置合适的样式，由于是静态的组件，搭建过程这样结束了。选中 form，我们可以使用快捷键 Ctrl+Shift+C 将其设置为自定义组件，在设计复合组件时，只需选中拖出使用即可。
选框
在选框中，我们选用了两种图标进行标识，分别在右上方添加子状态 default:active，设置缩放 1%，另一个表示选中的图标则相反。其中两者的 active 模型值，赋值于 active，设置缩放 1active<ID（父组件）>，这样我们就可以通过父组件的 active 开关去控制选中图标的显示，另外可以在两种图标添加动效属性使得运行更加流畅。
接下来，我们来添加 tap 交互事件去控制触碰带来的选择反馈，添加断言，if : active == true ，则 active==true，则 active == false，否则 $active == true 。预览
如果需要复选框 checkbox，这个时候我们将其设置成自定义组件，需要多少个拉出使用即可，而在单选框 radio 中，我们要添加一个特殊的模型变量 copy，顾名思义，赋于 copy 上的值代表复制的数量，而你在操作触碰其中一个，便是在与所有 copy 的对象进行互动。这时候就要添加一个子状态 default:i ==i==active 对其进行区分，当获取的 i 的值是代表着 copy 对象的活跃状态，通过设置 default:i ==i==active 的样式去区别。交互事件的具体设置事项为获取索引值，将获取的值赋值在父组件中，进行去反馈到别的组件的 active 模型上。
开关 switch
switch 开关表示两种相互对立的状态间的切换，多用于触发【开/关】。在表单结构中也有开关的使用，在开与关的两种状态呈现不同的信息。Iofod 在设计开关时，只需使用两个容器组件即可搭建。
通过 tap 交互事件去控制 active 的布尔值，从而去改变容器的子状态变化，两个容器配合动效，就能使 switch 就实现了。
Select 下拉框
在使用下拉框时，一般会配合文本框进行使用，在下拉列表中选取一个进行显示。首先对文本框进行 copy 处理，你会看到一团字体堆在一起，
这种时候就要使用 default:$active 进行区别了，同时添加 active 的模型，通过 active 值去控制显示的文本比如
这样子设计思路就简单了许多：
给予父组件两种状态和动效，呈现出下拉的动作
通过交互事件 tap 获取索引值控制 active 值
选择完之后就是回退的动作
具体情况预览如图
结语
Iofod 是一款新上市的低代码开发平台，在未来会不断升级更新并完善。在刚刚使用的时候我意外发现 iofod 的可视化和交互方面做得十分出色与简洁，如果你是一个个人开发者，完全可以大胆尝试。
相关链接：
前端开发者、低代码爱好者 2022.08.16 加入
还未添加个人简介
评论