微信小程序根据list动态渲染表单及输入数据绑定

需求

1. 项目开发时，需要渲染一个填写表单，但是微信小程序原生开发input非双向绑定，需要自己绑定输入方法&手动赋值，多个input就需要写很多个输入绑定方法，很繁琐，代码重复量也很多
2. 减少代码重复书写 => 通用组件+配置
   如果有除输入框外的表单组件需求，原理类似

 <view class="form-item" wx:for="{{itemList}}" wx:key="index">
          <view class="label">
            {{ item.label }}<text class="required" wx:if="{{item.required}}">必填</text>
          </view>
          <view class="value">
            <input value="{{form[item.field]}}" bindinput="handleInputField" type="text" data-type="{{item.field}}" placeholder-class="placeholder" placeholder="请填写{{item.label}}" />
          </view>
        </view>

.form {
  padding: 0 26rpx;
}

.form-item {
  display: flex;
  justify-content: space-between;
  padding: 36rpx 0;
  font-size: 28rpx;
  color: #333333;
}

.form-item .label {
  display: flex;
  align-items: center;
}

.form-item .label .required {
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  border: 1rpx solid #FD5858;
  font-size: 20rpx;
  color: #FD5858;
  padding: 2rpx 4rpx;
  margin-left: 12rpx;
}

.form-item .value {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: 90rpx;
}

data: {
	form:{
		field1: '',
		field2: '',
		field3: '',
		field4: '',
		field5: '',
	},
	itemList: [
      {
        label: 'field1',
        field: 'field1',
        required: true
      }, {
        label: 'field2',
        field: 'field2',
        required: true
      }, {
        label: 'field3',
        field: 'field3'
      }, {
        label: 'field4',
        field: 'field4'
      }, {
        label: 'field5',
        field: 'field5'
      }
    ]
},
handleInputField(e) {
    const { currentTarget: { dataset: { type } }, detail: { value } } = e
    // 必填的字段
    const requiredFields = itemList.map(item => {
      if (item.required) {
        return item.field
      }
    })
    const { form } = this.data, flag = requiredFields.findIndex(key => !form[key]) // 校验是否有必填字段没必填，可用于实时判断提交按钮是否可用
    // 赋值
    this.setData({ [`form.${type}`]: value})
  }

效果图