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