


Bringen Sie Ihnen Schritt für Schritt bei, wie Sie eine Sucheingabefeldkomponente in einem Miniprogramm entwickeln
Nov 11, 2021 am 10:32 AMDieser Artikel zeigt Ihnen eine praktische Anwendung der Entwicklung kleiner Programme und stellt vor, wie Sie eine Sucheingabefeldkomponente entwickeln. Ich hoffe, dass er für alle hilfreich ist!
Lassen Sie uns dieses Mal über die Entwicklung von component
sprechen. Da ein Miniprogramm aus vielen Seiten bestehen kann und verschiedene Seiten ?hnliche
Teile haben k?nnen, müssen wir die Seiten sinnvoll in verschiedene Komponenten aufteilen, genau wie Bausteine
Dasselbe , und vervollst?ndigen Sie dann den Zusammenbau jeder Seite, indem Sie verschiedene Komponenten kombinieren. Aus diesem Grund gibt es das Konzept der Komponentenentwicklung. [Verwandte Lernempfehlungen: Mini-Tutorial zur Programmentwicklung]組件
的開發(fā)。由于小程序可能由很多頁面組成,而不同頁面可能會(huì)有相似
的部分,所以我們要將頁面合理拆分成不同的組件,就像一塊塊積木
一樣,然后再通過組合不同組件完成一個(gè)個(gè)頁面的組裝,這就是為什么會(huì)有組件開發(fā)這個(gè)概念?!鞠嚓P(guān)學(xué)習(xí)推薦:小程序開發(fā)教程】
實(shí)戰(zhàn)演練
那么話不多說,我們直接開始實(shí)戰(zhàn)。如何將一個(gè)頁面拆分成組件是由一系列頁面開發(fā)后積累的經(jīng)驗(yàn)所指引的,我們先來做幾個(gè)頁面找找感覺。
比如我們先來做一個(gè)小程序首頁,我們常見的很多應(yīng)用首頁大多是一個(gè)內(nèi)容列表,其實(shí)它有一個(gè)比較專業(yè)的名稱,叫做“feed流”。
比如上圖,分別是微博、知乎、美團(tuán)和boss直聘的小程序首頁??梢钥吹剑鼈兓径际怯梢粋€(gè)頂部的搜索輸入框
和主體部分一個(gè)可以持續(xù)上劃的內(nèi)容列表所組成的。
首頁開發(fā)
那么按照這個(gè)思路,我們開始自己的小程序首頁開發(fā)。
首先,我們打開app.json
文件,其中pages
中的所配置的第一項(xiàng)則是小程序首頁。
接著,我們打開首頁的index.wxml
文件并清空它,然后開始編寫我們自己的首頁內(nèi)容。
清空前
清空后
我們可以將上圖中所指的熱重載
打開,這樣可以在每次修改完頁面的內(nèi)容后實(shí)時(shí)看到修改效果,而無需每次手動(dòng)點(diǎn)擊編譯。
另外,我們發(fā)現(xiàn)上面四個(gè)主流小程序的首頁都沒有標(biāo)題內(nèi)容,所以我們也將app.json
中的navigationBarTitleText
字段改為空字符串即可。
搜索框組件
我們上面提到過,首頁由頂部的搜索輸入框和主體部分的列表所組成,這就已經(jīng)天然地將首頁拆分成了搜索輸入框
+內(nèi)容列表
兩個(gè)組件了,因?yàn)檫@兩個(gè)元素都可能是被其他頁面重復(fù)使用
的。
那么先來開發(fā)搜索輸入框,我們以最簡(jiǎn)單的形式為例,比如上面主流小程序中第2個(gè)和第4個(gè)。即一個(gè)圓角
輸入框,輸入框內(nèi)部最左側(cè)有一個(gè)搜索圖標(biāo)
,輸入框內(nèi)部有一行默認(rèn)的提示文字
。
內(nèi)置組件input
輸入框我們會(huì)使用小程序提供的內(nèi)部組件input
,文檔可見 input
然后我們?cè)陂_發(fā)頁面或組件的時(shí)候,注意在每一個(gè)元素層級(jí)都盡量以一個(gè)view
標(biāo)簽作為容器,對(duì)元素進(jìn)行包裹,這樣后面對(duì)于元素在布局中的操控都會(huì)更加容易。
比如我們?cè)?code>pages/index/index.wxml中寫下如上代碼,頁面就會(huì)呈現(xiàn)出左側(cè)的樣子。
這里我們使用了小程序內(nèi)置組件input
,并通過placeholder
屬性為其設(shè)置了默認(rèn)提示文字。
接著,我們需要使用一些樣式代碼來對(duì)搜索框進(jìn)行樣式修飾。
我們?yōu)樵貥?biāo)簽添加了樣式屬性
接著在index.wxss
Sucheingabefeld
oben und einer Inhaltsliste im Hauptteil, die kontinuierlich nach oben gescrollt werden kann. ??Homepage-Entwicklung
??Nach dieser Idee beginnen wir mit der Entwicklung unserer eigenen Mini-Programm-Homepage. ????Zuerst ?ffnen wir die Dateiapp.json
, wobei das erste konfigurierte Element in pages
die Homepage des Miniprogramms ist. ????
index.wxml
auf der Homepage, l?schen sie und beginnen dann mit dem Schreiben unseres eigenen Homepage-Inhalts. ????Vor dem L?schen????

Hot Reload
aktivieren, wie im Bild oben gezeigt, sodass wir den ?nderungseffekt in Echtzeit sehen k?nnen, nachdem wir den Inhalt der Seite ge?ndert haben, ohne jedes Mal manuell auf ?Kompilieren“ klicken zu müssen Zeit. ????Darüber hinaus haben wir festgestellt, dass die Homepages der oben genannten vier Mainstream-Miniprogramme keinen Titelinhalt haben, daher haben wir auch das Feld navigationBarTitleText
in app.json
in ein leeres Feld ge?ndert Zeichenfolge. ??Suchfeldkomponente
??Wie oben erw?hnt, besteht die Startseite aus einem Sucheingabefeld oben und einer Liste im Hauptteil Teil. Die Homepage wurde natürlich in zwei Komponenten aufgeteilt:Sucheingabefeld
+ Inhaltsliste
, da diese beiden Elemente von anderen Seiten wiederholt werden k?nnen Verwendung
. ????Dann entwickeln wir zun?chst das Sucheingabefeld als Beispiel, z. B. die 2. und 4. im Mainstream-Applet oben. Das hei?t, ein abgerundete Ecken
-Eingabefeld. Ganz links im Eingabefeld befindet sich ein Suchsymbol
und eine Zeile mit Standard-Eingabeaufforderungstext
im Eingabefeld. ??Integrierte Komponenteneingabe
??In der Eingabebox verwenden wir die interne Komponenten-Eingabe
, die vom Mini bereitgestellt wird Programm, das Dokument kann gesehen werden input a>????Dann achten wir bei der Entwicklung einer Seite oder Komponente darauf, auf jeder Elementebene ein view
-Tag als Container zu verwenden, um das Element einzuschlie?en, damit es einfacher ist, das Element darin zu steuern das Layout sp?ter. ????
pages/index/index.wxml
und die Seite sieht wie die linke Seite aus. ????Hier verwenden wir die integrierte Komponente input
des Miniprogramms und legen den Standard-Eingabeaufforderungstext dafür über das Attribut placeholder
fest. ????Als n?chstes müssen wir einen Stilcode verwenden, um das Suchfeld zu gestalten. ????index.wxss
und fügen Sie dann unseren eigenen Stilcode hinzu. ??Stil-Debugging
Hier ist ein sehr praktischer Entwicklungstipp. Wie im Bild oben gezeigt, k?nnen wir den von den Entwicklertools bereitgestellten Debugger
verwenden, um die tats?chlich gerenderte Struktur und Stilattribute anzuzeigen Und wir k?nnen die Stile der Seitenelemente hier direkt ?ndern und die Auswirkungen in Echtzeit sehen. Auch bei Farbattributen k?nnen wir auf die aktuelle Farbe klicken, um das Farbauswahlfeld aufzurufen und die Farbe des Elements wie oben gezeigt anzupassen. 調(diào)試器
查看頁面實(shí)際渲染出的結(jié)構(gòu)以及樣式屬性,并且我們可以直接在這里對(duì)頁面元素的樣式進(jìn)行修改并實(shí)時(shí)看到效果。甚至對(duì)于顏色類的屬性我們可以像上圖中的操作,點(diǎn)擊當(dāng)前顏色喚出顏色選擇面板,進(jìn)而調(diào)整該元素的顏色。
然后,當(dāng)我們把頁面樣式調(diào)整到最佳效果后,直接將調(diào)試器中的樣式代碼選中并復(fù)制,隨即粘貼到我們的index.wxss
中即可。
圖標(biāo)引入
最后,我們還需要在輸入框內(nèi)部的最左側(cè)顯示一個(gè)搜索樣式的圖標(biāo),那么首先我們需要從網(wǎng)上找一個(gè)搜索樣式的圖片。這里推薦使用 iconfont 這個(gè)網(wǎng)站進(jìn)行圖標(biāo)篩選
我們選擇好圖標(biāo)后,可以按照下圖對(duì)圖標(biāo)的顏色和大小進(jìn)行修改,然后下載。
接著,我們將下載好的圖片放到小程序項(xiàng)目文件夾中,打開小程序項(xiàng)目文件夾的方式有很多種。比如你可以右鍵開發(fā)者工具中的資源管理器
中任何一個(gè)文件,然后選擇在資源管理器中顯示
,或者點(diǎn)擊右上角的詳情面板,然后點(diǎn)擊本地目錄
一項(xiàng)。
然后我們新建一個(gè)assets
文件夾用于存放小程序的靜態(tài)文件,比如圖片、公共樣式等。
我們將剛剛下載好的搜索圖片放進(jìn)assets
中的images
目錄,并將圖片名稱改為英文名稱(一般建議文件命名都用英文命名,以避免一些程序解析錯(cuò)誤)
然后我們回到開發(fā)者工具,可以看到剛才拷貝而來的搜索圖標(biāo)已經(jīng)準(zhǔn)備好。接著,我們通過樣式代碼來將它顯示在輸入框中
首先,我們可以使用上圖所示的方法,點(diǎn)擊調(diào)試器左上角的圖標(biāo),來查看我們頁面當(dāng)前的元素結(jié)構(gòu)。方法是先點(diǎn)擊調(diào)試器左上角的查看圖標(biāo),然后將鼠標(biāo)移動(dòng)到左側(cè)小程序預(yù)覽中的任意位置,可以看到右側(cè)面板會(huì)隨著左側(cè)選中的位置而高亮提示你選中的元素所對(duì)應(yīng)的代碼區(qū)域。
通過這樣的方法,我們可以直觀地了解我們的頁面目前所對(duì)應(yīng)的代碼結(jié)構(gòu),從而決定我們新加入的圖標(biāo)元素應(yīng)該放到哪層容器比較合適。
位置布局
經(jīng)過如上操作,我們最終在search-bar
這一層容器內(nèi)部的第一行,即與input
同級(jí)的位置新增了另外一個(gè)內(nèi)置組件image
,然后通過src
屬性指明要顯示的圖片位置。這里當(dāng)你在image
標(biāo)簽中設(shè)置src
屬性時(shí),開發(fā)者工具會(huì)自動(dòng)提示可以選擇的路徑。由于我們的圖片位置在當(dāng)前文件所在目錄的外部,所以我們一開始只需要輸入..
來進(jìn)行上一級(jí)目錄,接下來開發(fā)者工具就會(huì)提示我們上一級(jí)目錄都有哪些文件。
index.wxss
ein. Explorer
klicken und dann Im Explorer anzeigen
ausw?hlen oder auf den Detailbereich in der oberen rechten Ecke klicken und Klicken Sie dann auf das Element Lokales Verzeichnis
. ????assets
, um die statischen Dateien des Miniprogramms wie Bilder, ?ffentliche Stile usw. zu speichern. ????images
unter assets
ab und ?ndern Sie den Bildnamen in einen englischen Namen (im Allgemeinen wird empfohlen, die Dateinamen auf Englisch zu benennen). um Fehler beim Parsen des Programms zu vermeiden)??????Positionslayout??????Nach den oben genannten Vorg?ngen landen wir schlie?lich in der ersten Zeile innerhalb des Ebenencontainers search-bar
, der Dasselbe wie image
wird auf derselben Ebene wie >input hinzugefügt, und dann wird der Speicherort des anzuzeigenden Bildes über src-Attribut. Wenn Sie hier das Attribut <code>src
im Tag image
festlegen, werden Sie von den Entwicklertools automatisch zur Eingabe des Pfads aufgefordert, den Sie ausw?hlen k?nnen. Da sich der Speicherort unseres Bildes au?erhalb des Verzeichnisses befindet, in dem sich die aktuelle Datei befindet, müssen wir nur ..
eingeben, um in das Verzeichnis der oberen Ebene zu gelangen. Anschlie?end werden wir vom Entwicklertool aufgefordert, das Verzeichnis der oberen Ebene anzuzeigen -Level-Verzeichnis ist, welche Dokumente vorhanden sind. ????
????Endlich verwenden wir CSS-Syntax, um sinnvolle Stile in index.wxss
zu schreiben, um das Suchsymbol in der vertikalen Mittelposition auf der linken Seite des Eingabefelds anzuzeigen. Informationen zur spezifischen Syntax finden Sie unter ?Verwandte Dokumente“ zum Lernen. Hier stellen wir eine weitere leistungsstarke Funktion vor, die von Entwicklertools bereitgestellt wird – die Funktion ?Real Machine Preview“. ??
Wie im Bild gezeigt, klicken Sie oben im Bedienfeld auf die Schaltfl?che Vorschau
. Die Entwicklertools kompilieren das aktuelle Miniprogrammprojekt in einen vorschaubaren Zustand und führen dann die 2D-Verarbeitung durch WeChat des Entwicklers, der sich beim Miniprogramm angemeldet hat, um die Wirkung des aktuellen Miniprogramms auf dem realen Ger?t zu sehen預(yù)覽
按鈕,開發(fā)者工具會(huì)將當(dāng)前小程序項(xiàng)目編譯為可預(yù)覽狀態(tài),然后通過登錄了該小程序的開發(fā)者的微信進(jìn)行二維碼掃描,即可在真機(jī)中看到當(dāng)前小程序的效果
總結(jié)
好了,最后我們總結(jié)一下今天講了哪些內(nèi)容。今天我們首先引入了組件開發(fā)的概念以及為什么要進(jìn)行組件拆分,并通過一個(gè)實(shí)例介紹了開發(fā)組件過程中所用到的一些開發(fā)技巧,包括
- 內(nèi)置組件使用
- 樣式調(diào)試方法
- 圖片資源引入
- 真機(jī)預(yù)覽
當(dāng)然,本篇其實(shí)還沒有進(jìn)行真正地進(jìn)行組件開發(fā)
,因?yàn)槲覀冞€是直接在頁面文件內(nèi)進(jìn)行了元素的開發(fā),下一篇我們將會(huì)把首頁按照搜索輸入框組件
+內(nèi)容列表組件
Zusammenfassung
Okay, lasst uns endlich zusammenfassen, worüber wir heute gesprochen haben. Heute haben wir zun?chst das Konzept der Komponentenentwicklung und die Notwendigkeit der Komponentenaufteilung vorgestellt und anhand eines Beispiels einige Entwicklungstechniken vorgestellt, die im Prozess der Komponentenentwicklung verwendet werden, darunter- Verwendung integrierter Komponenten Stil-Debugging-Methode
- Einführung in die Bildressource
- Echte Ger?tevorschau
-Komponente noch nicht tats?chlich entwickelt , da wir die Elemente immer noch direkt in der Auslagerungsdatei entwickeln, werden wir im n?chsten Artikel die Homepage entsprechend der <code>Sucheingabefeldkomponente
+Inhaltslistenkomponente
erstellen Teilen Sie es auf, um die Methode zur Entwicklung kleiner Programmkomponenten im Detail vorzustellen. ????Weitere Kenntnisse zum Thema Programmierung finden Sie unter: ??Programmiervideos??! ! ??
Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie eine Sucheingabefeldkomponente in einem Miniprogramm entwickeln. 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)

Mit der Popularit?t mobiler Internettechnologie und Smartphones ist WeChat zu einer unverzichtbaren Anwendung im Leben der Menschen geworden. Mit WeChat-Miniprogrammen k?nnen Benutzer Miniprogramme direkt verwenden, um einige einfache Anforderungen zu erfüllen, ohne Anwendungen herunterladen und installieren zu müssen. In diesem Artikel wird erl?utert, wie Sie mit Python ein WeChat-Applet entwickeln. 1. Vorbereitung Bevor Sie Python zum Entwickeln des WeChat-Applets verwenden, müssen Sie die entsprechende Python-Bibliothek installieren. Hier empfiehlt es sich, die beiden Bibliotheken wxpy und itchat zu verwenden. wxpy ist eine WeChat-Maschine

Implementieren von Kartenumdreheffekten in WeChat-Miniprogrammen In WeChat-Miniprogrammen ist die Implementierung von Kartenumdreheffekten ein h?ufiger Animationseffekt, der die Benutzererfahrung und die Attraktivit?t von Schnittstelleninteraktionen verbessern kann. Im Folgenden wird detailliert beschrieben, wie der Kartenumdrehungseffekt im WeChat-Applet implementiert wird, und relevante Codebeispiele bereitgestellt. Zun?chst müssen Sie in der Seitenlayoutdatei des Miniprogramms zwei Kartenelemente definieren, eines für die Anzeige des vorderen Inhalts und eines für die Anzeige des hinteren Inhalts. Der spezifische Beispielcode lautet wie folgt: <!--index.wxml-. ->&l

Laut Nachrichten dieser Website vom 31. Oktober und 27. Mai dieses Jahres kündigte die Ant Group den Start des ?Chinese Character Picking Project“ an und leitete kürzlich neue Fortschritte ein: Alipay startete das Miniprogramm ?Chinese Character Picking – Uncommon Characters“. um Sammlungen der Gesellschaft zu sammeln. Seltene Charaktere erg?nzen die Bibliothek seltener Charaktere und bieten unterschiedliche Eingabeerlebnisse für seltene Charaktere, um die Eingabemethode für seltene Charaktere in Alipay zu verbessern. Derzeit k?nnen Benutzer das Applet ?Ungew?hnliche Zeichen“ aufrufen, indem sie nach Schlüsselw?rtern wie ?Aufnehmen chinesischer Zeichen“ und ?Seltene Zeichen“ suchen. Im Miniprogramm k?nnen Benutzer Bilder von seltenen Zeichen einreichen, die vom System nicht erkannt und eingegeben wurden. Nach der Best?tigung nehmen Alipay-Ingenieure zus?tzliche Eintr?ge in die Schriftartenbibliothek vor. Auf dieser Website wurde festgestellt, dass Benutzer im Miniprogramm auch die neueste Eingabemethode zur Wortteilung nutzen k?nnen. Diese Eingabemethode ist für seltene W?rter mit unklarer Aussprache konzipiert. Demontage durch den Benutzer

Miniprogramme k?nnen React verwenden. 1. Implementieren Sie einen Renderer basierend auf ?React-Reconciler“ und generieren Sie eine Miniprogrammkomponente zum Parsen und Rendern von DSL. 3. Installieren Sie npm und führen Sie den Entwickler-Build aus npm im Tool; 4. Führen Sie das Paket auf Ihrer eigenen Seite ein und verwenden Sie dann die API, um die Entwicklung abzuschlie?en.

Wie Uniapp eine schnelle Konvertierung zwischen Miniprogrammen und H5 erreichen kann, erfordert spezifische Codebeispiele. Mit der Entwicklung des mobilen Internets und der Popularit?t von Smartphones sind Miniprogramme und H5 zu unverzichtbaren Anwendungsformen geworden. Als plattformübergreifendes Entwicklungsframework kann Uniapp die Konvertierung zwischen kleinen Programmen und H5 basierend auf einer Reihe von Codes schnell realisieren und so die Entwicklungseffizienz erheblich verbessern. In diesem Artikel wird vorgestellt, wie Uniapp eine schnelle Konvertierung zwischen Miniprogrammen und H5 erreichen kann, und es werden konkrete Codebeispiele gegeben. 1. Einführung in uniapp unia

Dieser Artikel bringt Ihnen einige verwandte Themen zu WeChat-Miniprogrammen. Er stellt vor allem die Verwendung ?ffentlicher Kontovorlagennachrichten in Miniprogrammen vor. Ich hoffe, dass er für alle hilfreich ist.

Implementierungsidee x01 Servereinrichtung Zun?chst wird auf der Serverseite ein Socket zum Empfangen von Nachrichten verwendet. Jedes Mal, wenn eine Socket-Anfrage angenommen wird, wird ein neuer Thread ge?ffnet, um die Verteilung und Annahme von Nachrichten zu verwalten Um alle Threads zu verwalten und damit die Verarbeitung verschiedener Funktionen des Chatrooms zu realisieren, ist die Einrichtung des x02-Clients viel einfacher als die des Servers. Die Funktion des Clients besteht lediglich darin, Nachrichten zu senden und zu empfangen und bestimmte Zeichen einzugeben Um die Verwendung unterschiedlicher Funktionen zu erreichen, müssen Sie daher auf der Clientseite nur zwei Threads verwenden, einen für den Empfang von Nachrichten und einen für das Senden von Nachrichten liegt daran, nur

Geolocation-Positionierung und Kartenanzeige von PHP und Miniprogrammen Geolocation-Positionierung und Kartenanzeige sind zu einer der notwendigen Funktionen in der modernen Technologie geworden. Mit der Beliebtheit mobiler Ger?te steigt auch der Bedarf der Menschen an Ortung und Kartendarstellung. W?hrend des Entwicklungsprozesses sind PHP und Applets zwei g?ngige Technologien. In diesem Artikel werden Sie in die Implementierungsmethode der geografischen Standortpositionierung und Kartenanzeige in PHP und Miniprogrammen eingeführt und entsprechende Codebeispiele angeh?ngt. 1. Geolokalisierung in PHP In PHP k?nnen wir die Geolokalisierung von Drittanbietern verwenden
