初识微信小程序的form

想创造一个报名页面，对form没有概念，在官网找到form的组件说明，总结出经验：

 

想用form，只要：

1、在wxml页面收尾加上

<form bindsubmit="formSubmit" bindreset="formReset">

......

</form>

2、在其中的各个输入组件的属性中加入name属性

3、在button组件的属性加入formType="submit"

就行了。

 点击按键后，会触发bindsubmit="formSubmit"函数：

formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  }

e.detail.value返回值自动编写成js对象：

{switch: false, slider: "", input: "", radio-group: "radio2", checkbox: Array(2)}

 

用这个套路可以快速改写weui中的form例子，为我所用。

 

<!--pages/weui/login.wxml-->
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="page">
    <view class="weui-form">
      <view class="weui-form__text-area">
        <view class="weui-form__title">表单标题</view>
        <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 weui-cells_form">
              <view class="weui-cell">
                <view class="weui-cell__hd"><label class="weui-label">姓名</label></view>
                <view class="weui-cell__bd">
                    <input class="weui-input" type="text" name="name" placeholder="请输入姓名"/>
                </view>
              </view>

              <view class="weui-cell">
                <view class="weui-cell__hd"><label class="weui-label">手机号</label></view>
                <view class="weui-cell__bd">
                    <input class="weui-input" type="number" pattern="[0-9]*" name="phone" placeholder="请输入手机号"/>
                </view>
              </view>
            </view>



        </view>
      </view>
      <view class="weui-form__tips-area">
        <label for="weuiAgree" class="weui-agree">
          <input id="weuiAgree" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="javascript:void(0);">《相关条款》</a>
          </span>
        </label>
      </view>
      <view class="weui-form__opr-area">
        <button type="primary" formType="submit">确定</button>
      </view>
      <view class="weui-form__tips-area">
        <view class="weui-form__tips">
          点击下一步即表示<navigator href="javascript:;">同意用户协议</navigator>
        </view>
      </view>
      <view class="weui-form__extra-area">
        <view class="weui-footer">
          <view class="weui-footer__links">
            <navigator href="javascript:void(0);" class="weui-footer__link">底部链接文本</navigator>
          </view>
          <view class="weui-footer__text">Copyright © 2008-2019 weui.io</view>
        </view>
      </view>
    </view>
</view>
</form>

// pages/weui/login.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
    const db = wx.cloud.database()
    db.collection('counters').add({
      data: e.detail.value,
      success: res => {
        // 在返回结果中会包含新创建的记录的 _id
        this.setData({
          counterId: res._id,
          count: 1
        })
        wx.showToast({
          title: '新增记录成功',
        })
        console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增记录失败'
        })
        console.error('[数据库] [新增记录] 失败：', err)
      }
    })
  },
  formReset: function () {
    console.log('form发生了reset事件')
  }

})

 这个例子结合了小程序云数据库，weui，和form。