微信小程序中的表单数据绑定是一种非常实用的功能，它允许开发者将页面上的表单元素与数据进行关联，从而实现数据的双向绑定。这样做的好处是能够简化代码，提高开发效率，并且让数据管理变得更加直观。
一、基本概念
- 数据绑定：在微信小程序中，通过
{{}}语法可以在WXML文件（类似于HTML）中插入JavaScript变量和表达式。 - 事件处理：通过在组件上定义事件处理器，可以监听用户操作，如点击、输入等，并执行相应的逻辑来更新数据。
- 双向绑定：虽然微信小程序本身不直接支持双向数据绑定，但可以通过结合使用
<input>标签的value属性和bindinput事件来模拟实现。
二、数据绑定示例
（一）采用一个对象数组的绑定事件
1.wxml
- 在
.json配置文件中无需特别设置，保持默认即可。 - 在
.wxml文件中创建表单：
<page-meta root-font-size="system"/>
<view class="page"><view class="weui-form"><view class="weui-form__text-area"><h2 class="weui-form__title">数据双向绑定</h2><view class="weui-form__desc">漏刻有时信息维护页，实现数据双向绑定。</view></view><view class="weui-form__control-area"><view class="weui-cells__group weui-cells__group_form"><view class="weui-cells__title">基础信息</view><view class="weui-cells"><view class="weui-cell weui-cell_active"><view class="weui-cell__hd"><label class="weui-label">职务</label></view><view class="weui-cell__bd"><input class="weui-input" placeholder="填写职务信息" bindinput="bindKeyInput" data-params ="user_title" placeholder-class="weui-input__placeholder" /></view></view><view class="weui-cell weui-cell_active"><view class="weui-cell__hd"><label class="weui-label">姓名</label></view><view class="weui-cell__bd"><input class="weui-input" placeholder="填写本人的姓名" bindinput="bindKeyInput" data-params ="user_name" placeholder-class="weui-input__placeholder" /></view></view><view class="weui-cell weui-cell_active"><view class="weui-cell__hd"><label class="weui-label">联系电话</label><view class="weui-cell__desc">手机号</view></view><view class="weui-cell__bd"><input class="weui-input" placeholder="填写绑定的电话号码" bindinput="bindKeyInput" data-params ="user_phone" type="number" placeholder-class="weui-input__placeholder" /></view></view></view></view></view><label class="weui-agree" aria-role=""><checkbox class="weui-agree__checkbox-check" aria-labelledby="js_agree_txt js_agree_link"/><i class="weui-agree__checkbox"></i><span class="weui-agree__text"><text aria-hidden="true" id="js_agree_txt">阅读并同意</text><navigator url="../agreement/agreement" class="weui-agree__link">《用户协议》</navigator>及<navigator url="../policy/policy" class="weui-agree__link">《隐私政策》</navigator></span></label><view class="weui-form__tips-area"><view class="weui-form__tips" wx:if="{{baseInfo.user_title != null}}">当前信息：{{baseInfo.user_name}} - {{baseInfo.user_phone}}</view></view><view class="weui-form__opr-area"><text aria-role="button" class="weui-btn weui-btn_primary" bindtap="backHome">返回首页</text></view><view class="weui-form__tips-area"><view class="weui-form__tips"></view></view><view class="weui-form__extra-area"><view class="weui-footer"><view class="weui-footer__links"><navigator url="javascript:" class="weui-footer__link">漏刻有时</navigator></view><view class="weui-footer__text">Copyright © 2023 lockdata</view></view></view></view>
</view>
2.js
Page({/*** 页面的初始数据*/data: {baseInfo: {}},bindKeyInput(e) {this.data.baseInfo[`${e.currentTarget.dataset.params}`] = e.detail.valuethis.setData({baseInfo: this.data.baseInfo})console.log(`baseInfo对象：`, this.data.baseInfo)},backHome() {wx.navigateTo({url: '../index/index',})}
})
（二）采用多个的绑定事件
1.wxml
<view class="container"><form bindsubmit="formSubmit"><view class="input-group"><label>用户名</label><input name="username" value="{{username}}" bindinput="onUsernameInput" placeholder="请输入用户名"/></view><view class="input-group"><label>密码</label><input name="password" type="password" value="{{password}}" bindinput="onPasswordInput" placeholder="请输入密码"/></view><button formType="submit">提交</button></form>
</view>
2.js
Page({data: {username: '',password: ''},onUsernameInput: function(e) {this.setData({username: e.detail.value});},onPasswordInput: function(e) {this.setData({password: e.detail.value});},formSubmit: function(e) {console.log('表单提交', e.detail.value);// 这里可以添加提交表单后的处理逻辑}
});
三、注意事项
- 确保你的数据模型与表单控件之间有正确的映射关系。
- 使用
setData()方法来改变状态或数据，以触发视图更新。 - 对于复杂的表单场景，可能需要更精细的状态管理和验证逻辑。
@漏刻有时