前言
本文将介绍如何使用微信小程序编写动态表单，最终实现房屋租赁系统中多租客录入的业务。
在阅读本文前，您需要对微信小程序的开发有一个初步的了解，以便更容易的学会开发动态表单。
1 什么是表单
表单是一种数据采集工具，可以用来收集或呈现数据或者特定字段，可运用到不同的业务场景中，如调查问卷等。
简单来说，表单就是收集用户数据的主要方式，通过在线采集信息并且一键生成想要的数据，如下图所示。
还有一个概念是表格，表格和表单有着一定的区别和联系。
- 表单：主要用于搜集信息。
- 表格：主要用来存放数据。
当然还有更加花里胡哨的表单，一些主流的组件库都支持单选框、多选框、下拉选择框、开关、滑块等表单组件，如下图所示。
2 何为动态表单
动态表单顾名思义就是动态的表单，也就是表单的个数不是固定的，而是由具体的业务去决定。
比如对于一个房屋租赁系统，在登记某个房间的租客数据时，甲方往往会要求在一个界面中完成所有租客数据的登记，如下图所示。
用户添加完成主租客后，还需要录入从租客的数据，并且从租客的数量不固定。
我们点击了“新增从租客”按钮，系统自动渲染出一个子表单界面，如下图所示。
再次点击，继续新增，如下图所示。
再次点击，继续新增，如下图所示。
如果添加多了，还需要可以点击每一个子表单的删除按钮，实现局部删除，如下图所示。
3 动态表单的实现
实现上面介绍的动态表单，总体来说分为以下三个步骤
- 编写添加按钮
- 编写一个子表单
- 使用 wx:for 语法实现循环渲染
- 表单提交
接下来我们逐一讲解。
3.1 编写添加按钮
第一步非常简单，新建一个按钮即可，界面代码如下所示。
<button type="primary" bindtap="addCongItem" class='weui-btn weui-btn_primary'>新增从租客</button>
在实现动态表单之前首先建立一个数组变量，如下所示。
const app = getApp(); Page({ data: { congList: [] }, })
点击按钮后，我们需要初始化一个子表单界面，也就是 new 一个 item 子项，其中表单的房间 ID、起租时日期、终止日期要被初始化，如下所示。
addCongItem() { var newDate = new Date(); var item = { lesseeName: "", lesseeMobile: "", lesseeCard: "", photo: "", registerDate: newDate.getFullYear() + "-" + (newDate.getMonth() < 9 ? "0" + (newDate.getMonth() + 1) : (newDate.getMonth() + 1)) + "-" + (newDate.getDate() < 10 ? "0" + newDate.getDate() : newDate.getDate()), outDate: (newDate.getFullYear() + 1) + "-" + (newDate.getMonth() < 9 ? "0" + (newDate.getMonth() + 1) : (newDate.getMonth() + 1)) + "-" + (newDate.getDate() < 10 ? "0" + newDate.getDate() : newDate.getDate()), roomId: JSON.parse(app.data.addRoomObj) }; var list = this.data.congList; list.push(item); this.setData({ congList: list }) console.log(this.data.congList); },
