微信小程序学习实录11:精通表单数据绑定，构建高效用户界面

微信小程序中的表单数据绑定是一种非常实用的功能，它允许开发者将页面上的表单元素与数据进行关联，从而实现数据的双向绑定。这样做的好处是能够简化代码，提高开发效率，并且让数据管理变得更加直观。

一、基本概念

• 数据绑定：在微信小程序中，通过{{}}语法可以在WXML文件（类似于HTML）中插入JavaScript变量和表达式。
• 事件处理：通过在组件上定义事件处理器，可以监听用户操作，如点击、输入等，并执行相应的逻辑来更新数据。
• 双向绑定：虽然微信小程序本身不直接支持双向数据绑定，但可以通过结合使用<input>标签的value属性和bindinput事件来模拟实现。

二、数据绑定示例

（一）采用一个对象数组的绑定事件

1.wxml

1. 在.json配置文件中无需特别设置，保持默认即可。
2. 在.wxml文件中创建表单：

<page-metaroot-font-size="system"/><viewclass="page"><viewclass="weui-form"><viewclass="weui-form__text-area"><h2class="weui-form__title">数据双向绑定</h2><viewclass="weui-form__desc">漏刻有时信息维护页，实现数据双向绑定。</view></view><viewclass="weui-form__control-area"><viewclass="weui-cells__group weui-cells__group_form"><viewclass="weui-cells__title">基础信息</view><viewclass="weui-cells"><viewclass="weui-cell weui-cell_active"><viewclass="weui-cell__hd"><labelclass="weui-label">职务</label></view><viewclass="weui-cell__bd"><inputclass="weui-input"placeholder="填写职务信息"bindinput="bindKeyInput"data-params="user_title"placeholder-class="weui-input__placeholder"/></view></view><viewclass="weui-cell weui-cell_active"><viewclass="weui-cell__hd"><labelclass="weui-label">姓名</label></view><viewclass="weui-cell__bd"><inputclass="weui-input"placeholder="填写本人的姓名"bindinput="bindKeyInput"data-params="user_name"placeholder-class="weui-input__placeholder"/></view></view><viewclass="weui-cell weui-cell_active"><viewclass="weui-cell__hd"><labelclass="weui-label">联系电话</label><viewclass="weui-cell__desc">手机号</view></view><viewclass="weui-cell__bd"><inputclass="weui-input"placeholder="填写绑定的电话号码"bindinput="bindKeyInput"data-params="user_phone"type="number"placeholder-class="weui-input__placeholder"/></view></view></view></view></view><labelclass="weui-agree"aria-role=""><checkboxclass="weui-agree__checkbox-check"aria-labelledby="js_agree_txt js_agree_link"/><iclass="weui-agree__checkbox"></i><spanclass="weui-agree__text"><textaria-hidden="true"id="js_agree_txt">阅读并同意</text><navigatorurl="../agreement/agreement"class="weui-agree__link">《用户协议》</navigator>及<navigatorurl="../policy/policy"class="weui-agree__link">《隐私政策》</navigator></span></label><viewclass="weui-form__tips-area"><viewclass="weui-form__tips"wx:if="{{baseInfo.user_title != null}}">
                当前信息：{{baseInfo.user_name}} - {{baseInfo.user_phone}}
            </view></view><viewclass="weui-form__opr-area"><textaria-role="button"class="weui-btn weui-btn_primary"bindtap="backHome">返回首页</text></view><viewclass="weui-form__tips-area"><viewclass="weui-form__tips"></view></view><viewclass="weui-form__extra-area"><viewclass="weui-footer"><viewclass="weui-footer__links"><navigatorurl="javascript:"class="weui-footer__link">漏刻有时</navigator></view><viewclass="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

<viewclass="container"><formbindsubmit="formSubmit"><viewclass="input-group"><label>用户名</label><inputname="username"value="{{username}}"bindinput="onUsernameInput"placeholder="请输入用户名"/></view><viewclass="input-group"><label>密码</label><inputname="password"type="password"value="{{password}}"bindinput="onPasswordInput"placeholder="请输入密码"/></view><buttonformType="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()方法来改变状态或数据，以触发视图更新。
• 对于复杂的表单场景，可能需要更精细的状态管理和验证逻辑。

@漏刻有时