微信小程序中的表单数据绑定是一种非常实用的功能，它允许开发者将页面上的表单元素与数据进行关联，从而实现数据的双向绑定。这样做的好处是能够简化代码，提高开发效率，并且让数据管理变得更加直观。
一、基本概念
- 数据绑定：在微信小程序中，通过
{{}}语法可以在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.value
this.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()方法来改变状态或数据，以触发视图更新。 - 对于复杂的表单场景，可能需要更精细的状态管理和验证逻辑。
@漏刻有时
