Vor einiger Zeit hat mein Freund die Musikwiedergabefunktion des NetEase Cloud Music Mini-Programms ausführlich vorgestellt, und ich habe sie als Einstieg gelernt. Ende Anfänger Ich war in letzter Zeit ziemlich beschäftigt und habe den Inhalt der Echtzeitsuche nicht rechtzeitig geschrieben, um ihn mit Ihnen zu teilen (tatsächlich wurden der Code und die Funktionen fast schon geschrieben), deshalb werde ich es Ihnen heute sagen einige Details und Details meiner Arbeit darin.
Die Suchfunktion ist sehr verbreitet und kann an vielen Stellen verwendet werden. Ich hoffe, dass ich Ihnen nützliche Dinge mitteilen kann. Gleichzeitig hoffe ich, dass Sie auf Mängel hinweisen und einige Vorschläge machen können Änderungen. Danke an Xiaobai.
Wir müssen auch die API-Schnittstelle in der Echtzeit-Suchfunktion verwenden, von der Eingabe von Werten in das Eingabefeld über Suchvorschläge bis hin zu Suchergebnissen und schließlich zum Springen zur Songwiedergabe So einfach wie das Aufnehmen von Werten ist es von entscheidender Bedeutung, und gleichzeitig verschiedene Funktionen. Nachfolgend finden Sie das Ausblenden und Anzeigen verschiedener Containerboxen sowie einige Details und Optimierungen bei der Suche. Werfen wir einen Blick darauf!
Schnittstellenvorschau
Schnittstellenanalyse
In der Kopfsuchleiste: Zurück-Pfeil links, Eingabefeld in der Mitte, Sprung zur Sängerranking-Seite rechts; den Löschknopf haben wir ausgeblendet Es wird nur bei der Eingabe angezeigt. Der Wert wird später angezeigt.
Wenn Sie den Verlaufsdatensatz durchgehen, ist jeder Suchdatensatzwert hier ein kleiner Teil einer äquidistanten Verteilung. Der Suchwert ist so lang wie die Länge dieses kleinen Teils. Hier wird display: flex;flex verwendet -wrap: wrap;, Freunde, die sich für diesen Schnittstellenstil interessieren, können sich später den gesamten Code ansehen. display: flex;flex-wrap: wrap;,对这个界面样式感兴趣的小伙伴可以待会看看全部代码。
Der nächste Schritt ist die Hot-Search-Liste. Hier wird nicht viel Wert darauf gelegt, einfach eine Schnittstelle zum Anfordern von Daten zu initiieren, die Daten zu vergraben und anzuzeigen. 🎜🎜Die Suchvorschläge werden angezeigt, nachdem die Eingabe abgeschlossen ist. Sie sind sehr dreidimensional und decken die gesamte Seite ab. Verwenden Sie box-shadow: 1px 1px 5px #888888, um einen dreidimensionalen Effekt zu erzielen , z -index hat den Effekt des Überschreibens. 🎜🎜Die Suchergebnisse werden angezeigt, nachdem Sie auf einen der Suchvorschläge oder auf den Suchverlauf oder die Hot-Suche geklickt haben. Gleichzeitig werden alle anderen Container auf der Benutzeroberfläche ausgeblendet und Aussehen der Containerbox werden wir später in der Funktion ausführlich besprechen. Hier sprechen wir zunächst darüber, wie Komponenten (Container) ausgeblendet und angezeigt werden, um zu vermeiden, dass diese Elemente in den folgenden Funktionen angezeigt werden. 🎜🎜🎜Die Kopfzeilenanzeige mehrerer Container Der Header des Containers enthält showClean, showSongResult, showSearchResult, showView bzw. in der Datenquelle data. Wenn es true ist, dann sind diese Teile Der Container verwendet standardmäßig den Stil vor : (Doppelpunkt). Wenn er falsch ist, wird standardmäßig der Stil nach : (Doppelpunkt) verwendet > style ist auf display: none; eingestellt, d Mit code>true oder false können diese Container angezeigt bzw. ausgeblendet werden. 🎜🎜
Schnittstellenkapselung🎜🎜Die Schnittstellenkapselung wurde von meinem Freund im vorherigen Artikel sehr deutlich erklärt. Die gleichen Funktionen werden jetzt verwendet Es ist nicht so einfach, die Schnittstelle so anzupassen, dass sie Daten anfordert. Wir müssen den Wert an die Schnittstelle übergeben und die Schnittstelle nach Erhalt des Werts die entsprechenden Daten zurückgeben. In der Suchschnittstelle verwenden wir die Schnittstelle für Suchvorschläge und Suchergebnisse. Für die Hot-Search-Liste verwenden wir nur den einfachsten wx.request, um Daten direkt abzurufen🎜🎜🎜api.js🎜
Echtzeit Suchfunktion: 🎜1. Datenquellenanalyse🎜Wir werden eine Suchfunktion mit vielen Daten entwerfen. Wir können sie im Detail auflisten: Eingabewert inputValue, erhalten während der Eingabe; Hot-Search-Listendaten hots, erhalten über die Hot-Search-Suche, Schlüsselwort searchKey, selbst ist der Wert des verwendeten Eingabefelds; um Suchvorschläge als Suchschlüsselwörter zu übergeben; searchSuggest, die Daten (Suchvorschläge), die von der Suchvorschlagsschnittstelle zurückgegeben werden, nachdem die Suchschlüsselwörter searchResult abgerufen wurden; Wenn auf einen der Suchvorschläge geklickt wird, wird dieser Wert in das Suchfeld eingetragen. Zu diesem Zeitpunkt wird das Suchschlüsselwort searchKey zu diesem Wert und an die Suchergebnisschnittstelle übergeben, und die zurückgegebenen Daten werden angezeigt in searchResult einfügen; schließlich wird der Suchverlauf history eingegeben. Bei jeder Suche wird der Wert des ursprünglichen Eingabefelds in den history eingefügt Datenquelle. Bei anderen Datenquellen geht es um das Ausblenden und Anzeigen von Komponenten, d. h. unter welchen Umständen wird die Containerbox jedes Teils ausgeblendet und unter welchen Umständen wird sie angezeigt? 🎜
Das obige ist der detaillierte Inhalt vonDamals imitierte das WeChat-Applet die Echtzeit-Suchfunktion von NetEase Cloud Music. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
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.
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
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
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
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
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;
Wie entwickle ich mit PHP die Second-Hand-Transaktionsfunktion des WeChat-Applets? Als beliebte Entwicklungsplattform für mobile Anwendungen werden WeChat-Miniprogramme von immer mehr Entwicklern verwendet. In WeChat-Miniprogrammen sind Second-Hand-Transaktionen eine häufige Funktionsanforderung. In diesem Artikel wird erläutert, wie Sie mit PHP die Second-Hand-Transaktionsfunktion des WeChat-Applets entwickeln und spezifische Codebeispiele bereitstellen. 1. Vorbereitungsarbeiten Bevor Sie mit der Entwicklung beginnen, müssen Sie sicherstellen, dass die folgenden Bedingungen erfüllt sind: Die Entwicklungsumgebung des WeChat-Applets wurde eingerichtet, einschließlich der Registrierung der AppID des Applets und ihrer Festlegung im Hintergrund des Applets.
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