Einführung in die Forminterpretation und Analyse der WeChat-Miniprogrammkomponenten-Mini-Programmentwicklung-php.cn

Einführung in die Forminterpretation und Analyse der WeChat-Miniprogrammkomponenten

高洛峰

Freigeben： 2017-03-20 14:45:53

Original

3640 Leute haben es durchsucht

Formularformularkomponente:

Formular, der /> Senden.

Wenn Sie auf die Komponente mit dem Formulartyp „Senden“ klicken, wird der Wert in der Formularkomponente übermittelt. Sie müssen dem Formular einen Namen hinzufügen Komponente als Schlüssel.

Verwendung der Formularkomponente:

Zurücksetzen:

Beispielcode für die Formularkomponente wird ausgeführt Der Effekt ist wie folgt:

Einführung in die Forminterpretation und Analyse der WeChat-Miniprogrammkomponenten

Senden:

Einführung in die Forminterpretation und Analyse der WeChat-Miniprogrammkomponenten

Das Folgende ist der WXML-Code:

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

Nach dem Login kopieren

Das Folgende ist der JS-Code:

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
    })
  },
})

Nach dem Login kopieren

Das Folgende ist der WXSS-Code:

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

Nach dem Login kopieren

Hauptattribute des Formulars:

Einführung in die Forminterpretation und Analyse der WeChat-Miniprogrammkomponenten

Hinweis:

Die in diesem Fall verwendete modale Komponente läuft bald ab. Es wird empfohlen, die wx.showModal-API zu verwenden

um die formSubmit-Methode so umzuschreiben, Can. Derzeit unterstützt der Inhalt der wx.showModal-API keine Zeilenumbrüche. Es kann sich um einen Fehler handeln. Wir freuen uns auf eine spätere Optimierung.

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in die Forminterpretation und Analyse der WeChat-Miniprogrammkomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!