小程序表单提交、input 双向绑定，最简洁写法

用户登录、信息提交、意见反馈都离不开表单，本篇实现最常用的表单双向绑定与提交。

一、wxml 结构

<view>
  <input placeholder="请输入用户名" model:value="{{form.name}}" />
  <input placeholder="请输入手机号" model:value="{{form.phone}}" />
  <button bindtap="submit">提交</button>
</view>

二、js 逻辑

Page({
  data: {
    form: {
      name: '',
      phone: ''
    }
  },

  submit() {
    const { form } = this.data
    if (!form.name || !form.phone) {
      wx.showToast({ title: '请完善信息', icon: 'none' })
      return
    }
    console.log('提交数据：', form)
    // 调用接口提交
  }
})

三、小技巧

使用 model:value 可实现简易双向绑定，不用手动写 bindinput。

总结：

结构简单、逻辑清晰，适合登录、注册、信息完善等常见场景。