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

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

一、基本概念

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

二、数据绑定示例

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

1.wxml

1. 在.json配置文件中无需特别设置，保持默认即可。
2. 在.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()方法来改变状态或数据，以触发视图更新。
• 对于复杂的表单场景，可能需要更精细的状态管理和验证逻辑。

---

@漏刻有时