Analyse von Formularen in WeChat-Miniprogrammen

In diesem Artikel werden hauptsächlich relevante Informationen zur detaillierten Erklärung des WeChat-Miniprogramms vorgestellt. Formularbeispiel Hier finden Sie eine detaillierte Einführung in das Formularformular, und der Beispielcode ist beigefügt

Beispiel für ein WeChat Mini-Programmformular

Formular wird häufig verwendet. Wir können ein Formular zum Entwerfen von Anmeldung und Registrierung verwenden, oder wir können ein Formular zur Beantwortung von Fragebögen entwerfen Sprechen Sie über die Verwendung von Formular

Formular Formular, übermitteln Sie die Werte von „Schalter“, „Eingabe“, „Kontrollkästchen“, „Schieberegler“, „Radio“ und „Auswahl“ Das Format der in die Komponente eingegebenen Daten lautet: Name: Wert. Daher müssen alle Steuerelemente im Formular ein Namensattribut hinzufügen, da sonst der Wert des entsprechenden Steuerelements nicht gefunden werden kann. Seine Hauptattribute:

Hauptcode zum Erstellen eines Formulars:

<!--pages/index/Component/FormM/FormM.wxml-->
<view class="viewTitle">
  <text class="view-Name">form表单</text>
  <view class="lineView"></view>
</view>
<!--这里用form，name=“nameName1”可以作为form的属性进行 
（e.detail.value.nameName1）调用,
form自带有提交和重置按钮，会自动获取表单中所有控件值的改变-->
<form class="page__bd" bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
   <view class="section__title">switch开关</view>
   <switch name="switch"/>
  </view>
  <view class="section section_gap">
   <view class="section__title">slider滑块</view>
   <slider value="50" name="slider" show-value ></slider>
  </view>
  <view class="section">
   <view class="section__title">input输入框</view>
   <input name="input" style="background-color: #FFFFFF" placeholder="请在这里输入" />
  </view>
  <view class="section section_gap">
   <view class="section__title">radio单选</view>
   <radio-group name="radio-group">
    <label><radio value="radio1"/>radio1</label>
    <label><radio value="radio2"/>radio2</label>
   </radio-group>
  </view>
  <view class="section section_gap">
   <view class="section__title">checkbox多选</view>
   <checkbox-group name="checkbox">
    <label><checkbox value="checkbox1"/>checkbox1</label>
    <label><checkbox value="checkbox2"/>checkbox2</label>
   </checkbox-group>
  </view>
  <view class="section">
   <view class="section__title">地区选择器</view>
   <picker name="areaPicker" bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
     当前选择：{{array[index]}}
    </view>
   </picker>
  </view>
  <view class="section">
   <view class="section__title">时间选择器</view>
   <picker name="timePicker" mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
     当前选择: {{time}}
    </view>
   </picker>
  </view>
  <view class="section">
   <view class="section__title">日期选择器</view>
   <picker name="datePicker" mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
     当前选择: {{date}}
    </view>
   </picker>
  </view>
  <view class="btn-area">
   <button form-type="submit">Submit提交</button>
   <button form-type="reset">Reset重置</button>
  </view>
 </form>

Um den Wert des Steuerelements innerhalb des Formulars zu erhalten, müssen Sie die relevanten Attribute des Formulars verwenden. Der Code lautet wie folgt:

// pages/index/Component/FormM/FormM.js
Page({
 //初始化数据
 data: {
  array: ['大中国', '美国', '巴西', '小日本'],
  index: 0,
  date: '2016-12-20',
  time: '11:19',
  allValue:''
 },
 //表单提交按钮
 formSubmit: function(e) {
  console.log('form发生了submit事件，携带数据为：', e.detail.value)
  this.setData({
   allValue:e.detail.value
  })
 },
 //表单重置按钮
 formReset: function(e) {
  console.log('form发生了reset事件，携带数据为：', e.detail.value)
  this.setData({
   allValue:''
  })
 },
 //---------------------与选择器相关的方法
 //地区选择
 bindPickerChange: function(e) {
  console.log('picker发送选择改变，携带值为', e.detail.value)
  this.setData({
   index: e.detail.value
  })
 },
 //日期选择
 bindDateChange: function(e) {
  this.setData({
   date: e.detail.value
  })
 },
 //时间选择
 bindTimeChange: function(e) {
  this.setData({
   time: e.detail.value
  })
 },


})

Rendering:

🎜>

Das Obige ist der gesamte Inhalt dieses Artikels Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Einführung in die GET-Anfrage des WeChat-Miniprogramms

Das WeChat-Miniprogramm implementiert die Popup-Menüfunktion

Das obige ist der detaillierte Inhalt vonAnalyse von Formularen in WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!