Introduction à l'interprétation et à l'analyse des formulaires des composants du mini-programme WeChat

Description du composant du formulaire :

Formulaire, le />

Lorsque vous cliquez sur le composant avec le type de formulaire de soumission dans le formulaire

, la valeur du composant de formulaire sera soumise. composant comme clé.

Utilisation du composant de formulaire :

Réinitialisation :Reset

exemple de code du composant de formulaire exécuté L'effet est le suivant :

Soumettre : Submit

Voici le code WXML :

<view class="page">
  <view class="page__hd">
    <text class="page__title">表单控件</text>
  </view>
  <form class="page__bd" catchsubmit="formSubmit" catchreset="formReset">
    <view class="section">
      <view class="section__title">您的姓名：</view>
      <input name="name" placeholder="姓名：" />
    </view>
    <view class="section section_gap">
      <view class="section__title">性别：</view>
      <radio-group name="gender">
        <label><radio value="男"/>男</label>
        <label><radio value="女"/>女</label>
        <label><radio value="其他"/>其他</label>
      </radio-group>
    </view>
    <view class="section section_gap">
      <view class="section__title">年龄：</view>
      <slider value="18" name="age" show-value ></slider>
    </view>
    <view class="section section_gap">
      <view class="section__title">擅长的开发语言：</view>
      <checkbox-group name="technology">
        <label><checkbox value="Java"/>Java</label>
        <label><checkbox value="JavaScript"/>JavaScript</label>

Voici le code JS :

Page({
  data: {
    pickerHidden: true,
    chosen: '',
    modalHidden: true,
    name: '',
    gender: '',
    age: '',
    technology: '',
    isPublic: ''
  },
  formSubmit: function(e) {
    var value =  e.detail.value;
    this.setData(
      {
        modalHidden: false,
        name: value.name,
        gender: value.gender,
        age: value.age,
        technology: value.technology,
        isPublic: value.isPublic
      }
    );
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function(e) {
    console.log('form发生了reset事件，携带数据为：', e.detail.value)
    this.setData({
      chosen: ''
    })
  },
  modalChange: function(e) {
    this.setData({
      modalHidden: true
    })
  },
})

Voici le code WXSS :

wx-label {
  display: block;
  margin-top: 10rpx;
  margin-left: 15rpx;
}
.section__title{
  font-size: 30rpx;
  margin-bottom: 30rpx;
  font-weight: bold;
}
.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}
.page__hd{
    padding: 50rpx 50rpx 100rpx 50rpx;
    text-align: center;
}
.page__title{
    display: inline-block;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    color: #AAAAAA;
    border-bottom: 1px solid #CCCCCC;
}
.page__desc{
    display: none;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #BBBBBB;
}
.section{
    margin-bottom: 80rpx;
}
.section_gap{
    padding: 0 30rpx;
}
.section__title{
    margin-bottom: 16rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}
.section_gap .section__title{
    padding-left: 0;
    padding-right: 0;
}
.btn-area{
    padding: 0 30px;
}
.btn-area button{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}
.page input{
    padding: 20rpx 30rpx;
    background-color: #fff;
    margin-left: 20rpx;
}

Principaux attributs du formulaire :

Remarque :

Le composant modal utilisé dans ce cas est sur le point d'expirer. Il est recommandé d'utiliser l'API wx.showModal.

pour réécrire la méthode formSubmit comme ceci, Can. Actuellement, le contenu de l'API wx.showModal ne prend pas en charge les sauts de ligne. Il s'agit peut-être d'un bug. Nous attendons avec impatience une optimisation ultérieure.

formSubmit: function(e) {
    var value =  e.detail.value;
    wx.showModal({
      title: '您填写的表单如下',
      content: '姓名:'+value.name
              +'性别：'+value.gender
              +'年龄：'+value.age
              +'擅长的开发语言：'+value.technology
              +'是否公开信息：' + value.isPublic,
      showCancel: false,
      success: function(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        }
      }
    });
  },

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!