iofod——WeUI 基础组件解析
在 WeUI 提供的例子中，他们已经为我们分好了几个大类：表单、基础组件、操作反馈、导航相关、搜索相关、层级规范。今天我们着重于基础组件的部分进行解析，其操作主要平台是 iofod。
官网地址：iofod - 构建应用毫不费力
前言
基础组件是区分于高级组件的一类，它具有单一的不可再拆分性，并适用于各类业务场景，保证设计质量和效率。在 iofod，可利用其可视性编辑和低操作量去快速构建，本期是讲述如何构建这些组建的，当然，您在使用时只需知道它的高效率和便捷性即可。
徽章（Badge）
文件和徽章，是我们的小计数和标签组件的例子。
它可以作为链接或按钮的一部分来提供计数器，如图中，小红点数字或文字可以理解为通知数量，或者考虑为列表跳转内容的通知。
单个表单，可以采用容器的简单堆叠拼凑，
Badge 部分采用容器的样式编辑功能，设置圆角和背景颜色，再添加文本框
对于多个表单而言，可以使用 copy 或者用单个列表进行堆叠。当使用 copy 模型进行复制时，需要用到子状态编辑功能和一维模型变量，对不同复制单位的样式进行修改。如：
default:2 对应第三个复制单位
对文本框添加一维模型变量修改各自的文本
页脚（footer）
页脚（footer）应该达到的目的：
权威可信（包括公司名称地址等联系信息、政府相关部门备案及认证信息）、
便捷（底部导航、其它快捷入口）、
合理拓展信息（广告位、友情链接、服务理念特色等）
首先在可视编辑区中拖入一个页脚容器，之后再添加组件栏中高级分类的链接组件
在其中添加 msg 描述和 link 链接
提示文本可加入文本框，输入内容即可。
画廊（gallery）
用于多张图片展示，类似原生的 wx.previewImage 的展示。
在可视编辑区内添加一个全屏幕的背景 mask 容器，添加 #000000，在其中加入图片组件。
设置图片时，可在模型中 url 中选择插入的图片素材。
并且启用 render 模型，可根据情况选择是否开启（render 模型：控制组件的可视情况）。
图标（Icons）
示例：
在 iofod 中，收录了许多的图标组件，你可以直接使用，并根据自身需求编辑样式这边作简单介绍。
设置显示大小后，颜色属性有两种，背景颜色（#06C160）和图标颜色（#FFFFFF）。之后添加与大小参数相应的圆角属性。这样对图标的编辑就算完成，当然也有其他编辑属性（跟其他组件类似：渐变、滤镜、不透明度、缩放、阴影等等）可设置。
面板（Panel）
为用户提供可视内容模块。这类组件在 iofod 中构建也十分简单，只是三大基本组件的简单摆放就可完成。
这边提供的示例时图文组合的列表：
由图可以得知，第一，有重复组件的使用；第二，有导航按钮的使用。
第一点，为减少操作量以及后来的编辑量，使用 copy 模型复制，之后再用一维模型变量进行设置复制组件的内容。按钮的设置在上期已经讲到不重复了。
表单预览（Preview）
实例演示：
这个组件构建过程十分简单，包括两点：组件的摆放和样式设置；button 的添加。
进度条（Progress）
实例演示：
设计思路：
控制子组件 progress 的 width：# $pl + '%'，就跟普通的函数换算公式一样计算。通过对父组件的 value 值的变换对全局进行控制，这就是 iofod 特有的数据驱动功能。
步骤条（Step）
步骤条有两个部分：内容部分；步骤条部分。
实例演示
通过对父组件的 step 模型值进行修改，控制步骤条的位置。
设计思路：
设置完内容部分后，添加步骤条容器，同样采用子状态编辑，之后对子状态样式编辑。通过命名方式与父组件进行联系，人为控制 step 值去控制步骤条显示情况。
结语
以上是 iofod 中基础组件的构建情况， WeUI 作为十分基础的小程序组件库，在 iofod 中也能轻松构建。Iofod 对于个人开发者来说是一个可以尝试的开发工具，个人用下来感受还是很不错的。
相关链接：
前端开发者、低代码爱好者 2022.08.16 加入
还未添加个人简介
评论