在WeUI提供的例子中，他们已经为我们分好了几个大类：表单、基础组件、操作反馈、导航相关、搜索相关、层级规范。今天我们着重于基础组件的部分进行解析，其操作主要平台是iofod。
官网地址：iofod - 构建应用毫不费力
前言
基础组件是区分于高级组件的一类，它具有单一的不可再拆分性，并适用于各类业务场景，保证设计质量和效率。在iofod，可利用其可视性编辑和低操作量去快速构建，本期是讲述如何构建这些组建的，当然，您在使用时只需知道它的高效率和便捷性即可。
WeUI系列组件
WeUI 是微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库，你可以把它理解为一个前端框架，类似于 Bootstrap 的那种。 由于是微信官方出品，所以对微信的兼容性基本没有太大问题，而且各组件的样式和微信一样，能够和微信很好的融合在一起，给用户较好的体验。
为微信Web开发量身设计，可以令用户的使用感知更加统一。试用WeUI库去设计小程序可以提高开发效率降低开发成本，我这次预想试用iofod工具实现WeUI系列组件，让每个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对于个人开发者来说是一个可以尝试的开发工具，个人用下来感受还是很不错的。
相关链接：
