Introduction à l'interprétation et à l'analyse des formulaires des composants du mini-programme WeChat-Développement de mini-programmes-php.cn

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

高洛峰

Libérer： 2017-03-20 14:45:53

original

3641 Les gens l'ont consulté

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 :

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

Introduction à linterprétation et à lanalyse des formulaires des composants du mini-programme WeChat

Soumettre :

Introduction à linterprétation et à lanalyse des formulaires des composants du mini-programme WeChat

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>

Copier après la connexion

Voici le code JS :

Page({
  data: {
    pickerHidden: true,
    chosen: &#39;&#39;,
    modalHidden: true,
    name: &#39;&#39;,
    gender: &#39;&#39;,
    age: &#39;&#39;,
    technology: &#39;&#39;,
    isPublic: &#39;&#39;
  },
  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(&#39;form发生了submit事件，携带数据为：&#39;, e.detail.value)
  },
  formReset: function(e) {
    console.log(&#39;form发生了reset事件，携带数据为：&#39;, e.detail.value)
    this.setData({
      chosen: &#39;&#39;
    })
  },
  modalChange: function(e) {
    this.setData({
      modalHidden: true
    })
  },
})

Copier après la connexion

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;
}

Copier après la connexion

Principaux attributs du formulaire :

Introduction à linterprétation et à lanalyse des formulaires des composants du mini-programme WeChat

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: &#39;您填写的表单如下&#39;,
      content: &#39;姓名:&#39;+value.name
              +&#39;性别：&#39;+value.gender
              +&#39;年龄：&#39;+value.age
              +&#39;擅长的开发语言：&#39;+value.technology
              +&#39;是否公开信息：&#39; + value.isPublic,
      showCancel: false,
      success: function(res) {
        if (res.confirm) {
          console.log(&#39;用户点击确定&#39;)
        }
      }
    });
  },

Copier après la connexion

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!