Iofod是一个在线可视化应用程序开发平台。通过其可视化布局和丰富的组件元素两大功能，可以快速输出高质量的复合组件。前言随着前端开发业务的需求不断增加，为了高效率高质量的开发，开发者想必已经开始注意到低代码开发平台，正在寻找一款适合自己的工具——iofod将是你的最好的选择。您可能担心iofod上的组件质量和数量，请放心尝试。近日，iofod推出WeUI系列组件分享。接下来，让我看看如何在iofod上快速搭建表单结构。WeUI系列框架介绍WeUI是一个小程序的UI框架。它有一套界面设计方案。你只需要将它的组件拼接在一起，就可以让我们的小程序更加美观。但它使用更传统的代码，并通过编写良好的CSS和HTML来实现。表单结构设计和实现表单是收集用户数据的容器。一个表单通常由表单控件和相关的提示信息组成。表单控件是实现用户输入的组件。基本表单包括文本框、密码框、单选按钮、复选按钮、下拉列表框、多行文本框、文本域等。iofod中的表单有文本、容器和图片三个基本组成部分。实现比较简单的结构还是比较快的。使用可视化编辑区，我们可以通过鼠标拖拽来实现，并在右侧的tab栏中设置合适的样式。由于是静态组件，所以构建过程就结束了。选中窗体，我们可以使用快捷键Ctrl+Shift+C将其设置为自定义组件。设计复合组件时，只需选中并拖出即可使用。Marquee![Picture]()在跑马灯中，我们选择两种图标来标识，分别在右上方添加子状态default:active，设置缩放为1active，设置缩放为1%，其他icon表示选中的图标是相反的。将两者的active模型值赋值给active，设置zoom1active，这样我们就可以通过父组件的active开关来控制选中图标的显示，并为两个图标添加动态属性，使其运行起来更加流畅。接下来我们添加一个tap交互事件来控制触摸带来的选择反馈，添加一个断言，if:active==true,thenactive==true,thenactive==true,thenactive==false,otherwise$active==是的。如果需要预览checkbox，我们此时将其设置为自定义组件，只需要拉出需要的数量即可。在单选框中，我们需要添加一个特殊的模型变量copy，顾名思义，赋予copy上的值代表副本的数量，当你触摸其中一个时，你正在与所有被复制的对象进行交互。这时候需要加一个子状态default:i==i==i==active来区分。当获取到的i值代表复制对象的活动状态时，设置default:i==i==i==active风格来区分。交互事件的具体设置是获取索引值，将获取到的值赋值给父组件，再反馈给其他组件的激活模型。Switchswitchswitch开关代表两种相反状态的切换，多用于触发[on/off]。表单结构中也使用了开关，在开和关两种状态下呈现不同的信息。Iofod在设计交换机时，只需要使用两个容器组件来构建它。通过tap交互事件控制active布尔值，从而改变容器的子状态变化，两个容器可以配合动效实现切换。使用选择下拉框时，一般与文本框配合使用，选择其中一个下拉列表进行显示。首先，复制文本框，你会看到一堆堆在一起的字体。这时候就需要使用default:$active来区分，添加一个active模型，通过active值来控制显示的文字。思路就简单多了：给父组件两个状态和动态效果，呈现一个下拉动作。通过交互事件tap获取索引值，控制活跃值。激活值选择后，将是一个回滚动作。具体情况预览如图。结论Iofod是一个新上市的低代码开发平台，未来会不断更新完善。刚开始用的时候无意中发现iofod的可视化和交互非常好，简洁。如果你是个人开发者，可以大胆尝试。相关链接：iofod官网iofod官方文档weui案例iofod低代码平台
