WeChat-Applet
Mini-Programmentwicklung
Fassen Sie g?ngige Formularkomponenten von WeChat-Miniprogrammen zusammen und organisieren Sie sie
Fassen Sie g?ngige Formularkomponenten von WeChat-Miniprogrammen zusammen und organisieren Sie sie
May 06, 2022 pm 05:57 PM
Dieser Artikel vermittelt Ihnen relevantes Wissen über das WeChat Mini-Programm. Er stellt haupts?chlich einige g?ngige Formularkomponenten vor, darunter Schaltfl?che, Kontrollk?stchen, Eingabe, Beschriftung und andere verwandte Themen. Jeder ist hilfsbereit.
【Verwandte Lernempfehlungen: Mini-Programm-Lern-Tutorial】
1. Gemeinsame Formularkomponenten
1.1-Schaltfl?che
?<button></button> ist eine Schaltfl?chenkomponente. Eine der am h?ufigsten verwendeten Formularkomponenten, die zum Ausl?sen von Ereignissen und zum Senden von Formularen verwendet wird. Die Attributtabelle ist unten dargestellt. <button></button>為按鈕組件，是常用的表單組件之一，用于事件的觸發(fā)以及表單的提交。其屬性表如下所示。
代碼示例：
<view> ??<view>7.button小案例</view> ??<view>(1)迷你按鈕</view> ??<button>主要按鈕</button> ??<button>次要按鈕</button> ??<button>警告按鈕</button> ??<view>(2)按鈕狀態(tài)</view> ??<button>普通按鈕</button> ??<button>警用按鈕</button> ??<button>加載按鈕</button> ??<view>(3)增加按鈕事件</view> ??<button>點(diǎn)我獲取用戶信息</button></view>
1.2 checkbox
??<checkbox></checkbox>為復(fù)選框組件，常用于在表單中進(jìn)行多項(xiàng)數(shù)據(jù)的選擇。復(fù)選框的<checkbox-group></checkbox-group>為父控件，其內(nèi)部嵌套若干個(gè)<checkbox></checkbox>子控件。
??<checkbox-group></checkbox-group>屬性如下：
??<checkbox></checkbox>組件的屬性如下：
代碼示例：
checkbox.wxml
<view>
??<view>8.checkbox小案例</view>
??<view>利用for循環(huán)批量生成</view>
??<checkbox-group>
????<label>
??????<checkbox></checkbox>{{item.value}}
????</label>
??</checkbox-group>
</view>
checkbox.js
Page({
??data:?{
????items:?[
??????{?name:?"tiger",?value:?"老虎"?},
??????{?name:?"elephant",?value:?"大象"?},
??????{?name:?"lion",?value:?"獅子",?checked:?"true"?},
??????{?name:?"penguin",?value:?"企鵝"?},
??????{?name:?"elk",?value:?"麋鹿"?},
??????{?name:?"swan",?value:?"天鵝"?},
????]
??},
??checkboxChange:function(e)?{
????console.log("checkbox發(fā)生change事件，攜帶value值為：",?e.detail.value)
??}})
1.3 input
??<input>為輸入框組件，常用于文本(如姓名、年齡等信息)的輸入。屬性表如下：
<view> ??<view>9.input小案例</view> ??<view>(1)文字輸入框</view> ??<input> ??<view>(2)密碼輸入框</view> ??<input> ??<view>(3)禁用輸入框</view> ??<input> ??<view>(4)為輸入框增加事件監(jiān)聽</view> ??<input></view>
1.4 label
??<label></label>是標(biāo)簽組件，不會(huì)呈現(xiàn)任何效果，但是可以用來改進(jìn)表單組件的可用性。當(dāng)用戶在label元素內(nèi)點(diǎn)擊文本時(shí)，就會(huì)觸發(fā)此控件，即當(dāng)用戶選擇該標(biāo)簽時(shí)，事件會(huì)傳遞到和標(biāo)簽相關(guān)的表單控件上，可以使用for屬性綁定id,也可以將空間放在該標(biāo)簽內(nèi)部，該組件對(duì)應(yīng)屬性如下所示。
wxml
<view> ??<view>10.lable小案例</view> ??<view>(1)利用for屬性</view> ??<checkbox-group> ????<checkbox></checkbox> ????<label>老虎</label> ????<checkbox></checkbox> ????<label>大象</label> ????<checkbox></checkbox> ????<label>獅子</label> ??</checkbox-group> ??<view>(2)label包裹組件</view> ??<checkbox-group> ????<label> ??????<checkbox></checkbox>老虎????</label> ????<label> ??????<checkbox></checkbox>大象????</label> ????<label> ??????<checkbox></checkbox>獅子????</label> ??</checkbox-group></view>
1.5 form
??<form></form>為表單控件組件，用于提交表單組件中的內(nèi)容。<form></form>控件組件內(nèi)部可以嵌套多種組件。
??組件屬性如下：
form.wxml
<view> ??<view>11.form小案例</view> ??<view>模擬注冊(cè)功能</view> ??<form> ????<text>用戶名:</text> ????<input> ????<text>密碼:</text> ????<input> ????<text>手機(jī)號(hào):</text> ????<input> ????<text>驗(yàn)證碼:</text> ????<input> ????<button>注冊(cè)</button> ????<button>重置</button> ??</form></view>
form.js
Page({
??onSubmit(e)?{
????console.log("form發(fā)生了submit事件，攜帶數(shù)據(jù)為：")
????console.log(e.detail.value)
??},
??onReset()?{
????console.log("form發(fā)生了reset事件，表單已被重置")
??}})
??輸入測(cè)試數(shù)據(jù)后點(diǎn)擊注冊(cè)按鈕觸發(fā)表單提交事件。
1.6 radio
??<radio></radio>為單選框組件，往往需配合<radio-group></radio-group>組件來使用，<radio></radio>標(biāo)簽嵌套在<radio-group></radio-group>當(dāng)中。
??<radio-group></radio-group>組件屬性如下：
??<radio></radio>組件屬性如下：
radio.wxml
<view>
??<view>14.radio小案例</view>
??<view>利用for循環(huán)批量生成</view>
??<radio-group>
????<block>
??????<radio></radio>{{item.value}}????</block>
??</radio-group></view>
radio.js
Page({
??data:?{
????radioItems:?[
??????{?name:?'tiger',?value:?'老虎'?},
??????{?name:?'elephant',?value:?'大象'?},
??????{?name:?'lion',?value:?'獅子',?checked:?'true'?},
??????{?name:?'penguin',?value:?'企鵝'?},
??????{?name:?'elk',?value:?'麋鹿'?},
??????{?name:?'swan',?value:?'天鵝'?},
????]
??},
??radioChange:function(e)?{
????console.log("radio發(fā)生change事件，攜帶value值為：",?e.detail.value)
??}})
1.7 slider
??<slider></slider>
Codebeispiel:
<view> ??<view>15.slider小案例</view> ??<view>(1)滑動(dòng)條右側(cè)顯示當(dāng)前進(jìn)度值</view> ??<slider></slider> ??<view>(2)自定義滑動(dòng)條顏色與滑塊樣式</view> ??<slider></slider> ??<view>(3)禁用滑動(dòng)條</view> ??<slider></slider> ??<view>(4)增加滑動(dòng)條監(jiān)聽事件</view> ??<slider></slider></view>
< ;checkbox> ist eine Kontrollk?stchenkomponente, die h?ufig zum Ausw?hlen mehrerer Daten in Formularen verwendet wird. Der <checkbox-group></checkbox-group> des Kontrollk?stchens ist das übergeordnete Steuerelement, und mehrere untergeordnete <checkbox></checkbox>-Steuerelemente sind darin verschachtelt.
?<checkbox-group></checkbox-group>-Attribute lauten wie folgt: 
?????<checkbox></checkbox>Die Attribute der Komponente lauten wie folgt: ????
????Codebeispiel: ????checkbox.wxml??<view> ??<view>16.switch小案例</view> ??<view>增加switch事件監(jiān)聽</view> ??<switch></switch> ??<switch></switch></view>??checkbox.js ??
<view> ??<form> ????<view>1.你現(xiàn)在大幾？</view> ????<radio-group> ??????<radio></radio>大一??????<radio></radio>大二??????<radio></radio>大三??????<radio></radio>大四????</radio-group> ????<view>2.你使用手機(jī)最大的用途是什么？</view> ????<checkbox-group> ??????<label><checkbox></checkbox>社交</label> ??????<label> ????????<checkbox></checkbox>網(wǎng)購</label> ??????<label> ????????<checkbox></checkbox>學(xué)習(xí)</label><label> ????????<checkbox></checkbox>其他</label> ????</checkbox-group> ????<view>3.平時(shí)每天使用手機(jī)多少小時(shí)？</view> ????<slider></slider> ?????<view>4.你之前有使用過微信小程序嗎？</view> ????<radio-group> ??????<radio></radio>無??????<radio></radio>有????</radio-group> ????<view>5.談?wù)勀銓?duì)微信小程序未來發(fā)展的看法</view> ????<textarea></textarea> ????<button>提交</button> ????<button>重置</button> ??</form></view>??????1.3 Eingabe???? ?
<input> Code> ist eine Eingabefeldkomponente, die h?ufig zur Eingabe von Text (wie Name, Alter und anderen Informationen) verwendet wird. Die Attributtabelle lautet wie folgt: ????
?? Page({
??universityChange:?function?(e)?{
????console.log("你選擇的現(xiàn)在大幾：",?e.detail.value)
??},
??mobilChange:?function?(e)?{
????console.log("你選擇使用手機(jī)的最大用途是：",?e.detail.value)
??},
??timechange:?function?(e)?{
????console.log("你選擇的每天使用手機(jī)的時(shí)間是：",?e.detail.value?+?"小時(shí)")
??},
??programChange:?function?(e)?{
????console.log("你選擇的是否使用過微信小程序：",?e.detail.value)
??},
?
?
??onSubmit(e)?{
????console.log("你輸入的對(duì)小程序發(fā)展前途的看法是："+e.detail.value.textarea)
??},
??onReset()?{
????console.log("表單已被重置")
??}})??????1.4. label?????<form></form> ist eine Formularsteuerkomponente, die zum übermitteln von Inhalten in der Formularkomponente verwendet wird. <form></form>Innerhalb der Steuerkomponente k?nnen verschiedene Komponenten verschachtelt werden. ?????Die Komponenteneigenschaften lauten wie folgt: ?????? ?? form.wxml??rrreee??form.js??rrreee????Klicken Sie nach Eingabe der Testdaten auf die Registrierungsschaltfl?che, um das Formularübermittlungsereignis auszul?sen. ????????1.6 Radio???<radio></radio> ist eine Optionsfeldkomponente, die h?ufig mit der <radio-group></radio-group>-Komponente verwendet werden muss Tag ist in <radio-group></radio-group> verschachtelt. ?????<radio-group></radio-group>Die Komponenteneigenschaften lauten wie folgt: ?????????<radio></radio>Die Komponenteneigenschaften sind wie folgt: ????????radio.wxml??rrreee??radio.js??rrreee?? & lt; Slider & gt; / CODE> ist ein Schiebeselektor zur Visualisierung. ?ndern Sie den Wert einer Variablen dynamisch. Die Attributtabelle lautet wie folgt: ??????????slider.wxml??rrreee??????<h2 id="switch">1.8 switch</h2>
<p>??<code><switch></switch>為開關(guān)選擇器，常用于表單上地開關(guān)功能，屬性表如下所示。
switch.wxml
<view>
??<view>16.switch小案例</view>
??<view>增加switch事件監(jiān)聽</view>
??<switch></switch>
??<switch></switch></view>
1.9 textarea
??<textarea></textarea>為多行輸入框，常用于多行文字的輸入。
2、實(shí)訓(xùn)小案例–問卷調(diào)查
survey.wxml
<view>
??<form>
????<view>1.你現(xiàn)在大幾？</view>
????<radio-group>
??????<radio></radio>大一??????<radio></radio>大二??????<radio></radio>大三??????<radio></radio>大四????</radio-group>
????<view>2.你使用手機(jī)最大的用途是什么？</view>
????<checkbox-group>
??????<label><checkbox></checkbox>社交</label>
??????<label>
????????<checkbox></checkbox>網(wǎng)購</label>
??????<label>
????????<checkbox></checkbox>學(xué)習(xí)</label><label>
????????<checkbox></checkbox>其他</label>
????</checkbox-group>
????<view>3.平時(shí)每天使用手機(jī)多少小時(shí)？</view>
????<slider></slider>
?????<view>4.你之前有使用過微信小程序嗎？</view>
????<radio-group>
??????<radio></radio>無??????<radio></radio>有????</radio-group>
????<view>5.談?wù)勀銓?duì)微信小程序未來發(fā)展的看法</view>
????<textarea></textarea>
????<button>提交</button>
????<button>重置</button>
??</form></view>
survey.js
Page({
??universityChange:?function?(e)?{
????console.log("你選擇的現(xiàn)在大幾：",?e.detail.value)
??},
??mobilChange:?function?(e)?{
????console.log("你選擇使用手機(jī)的最大用途是：",?e.detail.value)
??},
??timechange:?function?(e)?{
????console.log("你選擇的每天使用手機(jī)的時(shí)間是：",?e.detail.value?+?"小時(shí)")
??},
??programChange:?function?(e)?{
????console.log("你選擇的是否使用過微信小程序：",?e.detail.value)
??},
?
?
??onSubmit(e)?{
????console.log("你輸入的對(duì)小程序發(fā)展前途的看法是："+e.detail.value.textarea)
??},
??onReset()?{
????console.log("表單已被重置")
??}})
【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】
?????
Das obige ist der detaillierte Inhalt vonFassen Sie g?ngige Formularkomponenten von WeChat-Miniprogrammen zusammen und organisieren Sie sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Das Miniprogramm Xianyu WeChat wurde offiziell gestartet
Feb 10, 2024 pm 10:39 PM
Das offizielle WeChat-Miniprogramm von Xianyu wurde stillschweigend gestartet. Im Miniprogramm k?nnen Sie private Nachrichten posten, um mit K?ufern/Verk?ufern zu kommunizieren, pers?nliche Informationen und Bestellungen anzuzeigen, nach Artikeln zu suchen usw. Wenn Sie neugierig sind, was ist das Xianyu WeChat Mini? Programm namens? Werfen wir einen Blick darauf. Wie hei?t das Xianyu WeChat-Applet? Antwort: Xianyu, Leerlauftransaktionen, Gebrauchtverk?ufe, Bewertungen und Recycling. 1. Im Miniprogramm k?nnen Sie inaktive Nachrichten posten, mit K?ufern/Verk?ufern über private Nachrichten kommunizieren, pers?nliche Informationen und Bestellungen einsehen, nach bestimmten Artikeln suchen usw. 2. Auf der Seite des Miniprogramms gibt es eine Homepage, in der N?he, Posten Sie Leerlauf, Nachrichten und meine 5 Funktionen. 3. Wenn Sie es nutzen m?chten, müssen Sie die WeChat-Zahlung aktivieren, bevor Sie es kaufen k?nnen.
Implementieren Sie Bildfiltereffekte in WeChat-Miniprogrammen
Nov 21, 2023 pm 06:22 PM
Implementieren von Bildfiltereffekten in WeChat-Miniprogrammen Mit der Popularit?t von Social-Media-Anwendungen wenden Menschen immer h?ufiger Filtereffekte auf Fotos an, um den künstlerischen Effekt und die Attraktivit?t der Fotos zu verst?rken. Bildfiltereffekte k?nnen auch in WeChat-Miniprogrammen erzielt werden, wodurch Benutzer interessantere und kreativere Fotobearbeitungsfunktionen erhalten. In diesem Artikel wird erl?utert, wie Bildfiltereffekte in WeChat-Miniprogrammen implementiert werden, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die Canvas-Komponente im WeChat-Applet verwenden, um Bilder zu laden und zu bearbeiten. Die Canvas-Komponente kann auf der Seite verwendet werden
Implementieren Sie den Dropdown-Menüeffekt im WeChat-Applet
Nov 21, 2023 pm 03:03 PM
Um den Dropdown-Menüeffekt in WeChat-Miniprogrammen zu implementieren, sind spezifische Codebeispiele erforderlich. Mit der Popularit?t des mobilen Internets sind WeChat-Miniprogramme zu einem wichtigen Bestandteil der Internetentwicklung geworden, und immer mehr Menschen haben begonnen, darauf zu achten Verwenden Sie WeChat Mini-Programme. Die Entwicklung von WeChat-Miniprogrammen ist einfacher und schneller als die herk?mmliche APP-Entwicklung, erfordert jedoch auch die Beherrschung bestimmter Entwicklungsf?higkeiten. Bei der Entwicklung von WeChat-Miniprogrammen sind Dropdown-Menüs eine h?ufige UI-Komponente, um eine bessere Benutzererfahrung zu erzielen. In diesem Artikel wird detailliert beschrieben, wie der Dropdown-Menüeffekt im WeChat-Applet implementiert wird, und es werden praktische Informationen bereitgestellt
Wie hei?t das Xianyu WeChat-Applet?
Feb 27, 2024 pm 01:11 PM
Das offizielle WeChat-Miniprogramm von Xianyu wurde stillschweigend gestartet. Es bietet Benutzern eine praktische Plattform, die es ihnen erm?glicht, ungenutzte Artikel einfach zu ver?ffentlichen und zu handeln. Im Miniprogramm k?nnen Sie über private Nachrichten mit K?ufern oder Verk?ufern kommunizieren, pers?nliche Informationen und Bestellungen einsehen und nach den gewünschten Artikeln suchen. Wie genau hei?t Xianyu im WeChat-Miniprogramm? Dieses Tutorial stellt es Ihnen im Detail vor. Benutzer, die es wissen m?chten, folgen bitte diesem Artikel und lesen Sie weiter! Wie hei?t das Xianyu WeChat-Applet? Antwort: Xianyu, Leerlauftransaktionen, Gebrauchtverk?ufe, Bewertungen und Recycling. 1. Im Miniprogramm k?nnen Sie inaktive Nachrichten posten, mit K?ufern/Verk?ufern über private Nachrichten kommunizieren, pers?nliche Informationen und Bestellungen einsehen, nach bestimmten Artikeln suchen usw. 2. Auf der Seite des Miniprogramms gibt es eine Homepage, in der N?he, Post-Leerlauf, Nachrichten und meine 5 Funktionen;
Das WeChat-Applet implementiert die Funktion zum Hochladen von Bildern
Nov 21, 2023 am 09:08 AM
WeChat-Applet implementiert Bild-Upload-Funktion Mit der Entwicklung des mobilen Internets ist das WeChat-Applet zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden. WeChat-Miniprogramme bieten nicht nur eine Fülle von Anwendungsszenarien, sondern unterstützen auch vom Entwickler definierte Funktionen, einschlie?lich Funktionen zum Hochladen von Bildern. In diesem Artikel wird erl?utert, wie die Bild-Upload-Funktion im WeChat-Applet implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. 1. Vorbereitende Arbeiten Bevor wir mit dem Schreiben von Code beginnen, müssen wir die WeChat-Entwicklertools herunterladen und installieren und uns als WeChat-Entwickler registrieren. Gleichzeitig müssen Sie auch WeChat verstehen
Implementieren Sie den Bildrotationseffekt im WeChat-Applet
Nov 21, 2023 am 08:26 AM
Um den Bildrotationseffekt im WeChat Mini-Programm zu implementieren, sind spezifische Codebeispiele erforderlich. Das WeChat Mini-Programm ist eine leichtgewichtige Anwendung, die Benutzern umfangreiche Funktionen und eine gute Benutzererfahrung bietet. In Miniprogrammen k?nnen Entwickler verschiedene Komponenten und APIs nutzen, um unterschiedliche Effekte zu erzielen. Unter diesen ist der Bildrotationseffekt ein g?ngiger Animationseffekt, der dem Miniprogramm interessante und visuelle Effekte verleihen kann. Um Bildrotationseffekte in WeChat-Miniprogrammen zu erzielen, müssen Sie die vom Miniprogramm bereitgestellte Animations-API verwenden. Das Folgende ist ein spezifisches Codebeispiel, das zeigt, wie das geht
Verwenden Sie das WeChat-Applet, um einen Karussellwechseleffekt zu erzielen
Nov 21, 2023 pm 05:59 PM
Verwenden Sie das WeChat-Applet, um den Karussellwechseleffekt zu erzielen. Das WeChat-Applet ist eine leichtgewichtige Anwendung, die einfach und effizient zu entwickeln und zu verwenden ist. In WeChat-Miniprogrammen ist es eine h?ufige Anforderung, Karussellwechseleffekte zu erzielen. In diesem Artikel wird erl?utert, wie Sie mit dem WeChat-Applet den Karussell-Umschalteffekt erzielen, und es werden konkrete Codebeispiele aufgeführt. Fügen Sie zun?chst eine Karussellkomponente zur Auslagerungsdatei des WeChat-Applets hinzu. Sie k?nnen beispielsweise den Tag <swiper> verwenden, um den Schalteffekt des Karussells zu erzielen. In dieser Komponente k?nnen Sie b übergeben
Implementieren Sie die Schiebel?schfunktion im WeChat-Miniprogramm
Nov 21, 2023 pm 06:22 PM
Die Implementierung der Schiebel?schfunktion in WeChat-Miniprogrammen erfordert spezifische Codebeispiele. Aufgrund der Beliebtheit von WeChat-Miniprogrammen sto?en Entwickler w?hrend des Entwicklungsprozesses h?ufig auf Implementierungsprobleme. Unter diesen ist die gleitende L?schfunktion eine h?ufige und h?ufig verwendete Funktionsanforderung. In diesem Artikel wird detailliert beschrieben, wie die Schiebel?schfunktion im WeChat-Applet implementiert wird, und es werden spezifische Codebeispiele gegeben. 1. Anforderungsanalyse Im WeChat-Miniprogramm umfasst die Implementierung der Schiebel?schfunktion die folgenden Punkte: Listenanzeige: Um eine Liste anzuzeigen, die verschoben und gel?scht werden kann, muss jedes Listenelement enthalten sein
