WeChat-Applet
Mini-Programmentwicklung
Detaillierte Einführung in benutzerdefinierte Komponenten in WeChat-Miniprogrammen
Detaillierte Einführung in benutzerdefinierte Komponenten in WeChat-Miniprogrammen
In diesem Artikel werden hauptsächlich die relevanten Informationen zu benutzerdefinierten WeChat-Applet-Komponenten im Detail vorgestellt, die einen gewissen Referenzwert haben.
Vorwort
Ich bin kürzlich auf WeChat-Miniprogramme gestoßen. Wieder einmal war das von der Firma verwendete Front-End-Framework vue. Nach dem Vergleich stellte ich fest, dass die Entwicklung von Miniprogrammen verschiedene Einschränkungen aufweist und für Entwickler sehr unfreundlich ist. Es gibt zu viele verschiedene Punkte, über die ich mich beschweren kann, deshalb werde ich hier nicht näher darauf eingehen. Ich habe vor, das nächste Mal einen speziellen Artikel zu schreiben, um mich darüber zu beschweren. Dieses Mal teile ich hauptsächlich einige Ideen zu benutzerdefinierten Komponenten von Miniprogrammen. Das von Miniprogrammen bereitgestellte offizielle Framework ist relativ einfach, primitiv, schlecht wiederverwendbar und implementiert nicht die Funktionen benutzerdefinierter Komponenten -Endentwicklung sehr unangenehm. Es gibt verschiedene Beschwerden im Internet und es werden auch Methoden zur Implementierung benutzerdefinierter Komponenten geteilt, aber sie sind entweder zu kompliziert oder das WeChat-Applet ist nach dem Upgrade nicht kompatibel. Wie auch immer, es sind alle Arten von Fallstricken, über die man nicht diskutieren kann. Hier möchte ich mitteilen, wie ich es im Projekt umgesetzt habe. Korrekturen und Kritik sind willkommen und wir können voneinander lernen.
Implementierung benutzerdefinierter Toast-Komponenten
Hier ist die einfachste Toast-Komponente als Beispiel
Das offizielle Framework stellt nur Seitenvorlagenfunktionen bereit: WXML stellt Vorlagen (Vorlagen) bereit, und in den Vorlagen können Codeausschnitte definiert und dann an verschiedenen Stellen aufgerufen werden.
Diese Funktion unterstützt jedoch kein js und keine Stilkapselung und muss auf der entsprechenden Seite verarbeitet werden. Außerdem verfügt die Vorlage über einen eigenen Bereich, der bei der Verwendung übergeben werden muss Daten.
Kapseln Sie die Funktion in eine unabhängige Komponente, die unabhängig von der Seite sein muss. Bei der Verwendung wird die Komponente auf der entsprechenden Seite gemountet, sodass die Komponente die Seite übergeben muss Dieses (Seiten-)Objekt soll implementiert werden. Der Code lautet wie folgt
Verzeichnisstruktur
|------components
| ------toast
|------toast.js
🎜>
toast.wxml
toast.js
So verwenden Sie
<template name='toast'>
<view class="s-toast" wx:if="{{msg}}">
<view class="s-toast-content">{{msg}}</view>
</view>
</template>1. wxml-Referenzseitenvorlage
/**
* toastMsg 必传 提示内容
* showTime 非必传 显示时间秒
*/
function toast(page, toastMsg, showTime) {
let timer
page.setData({ toastMsg })
showTime = showTime || toastMsg.length / 4
console.log(showTime)
clearTimeout(timer)
timer = setTimeout(() => {
page.setData({ toastMsg: '' })
clearTimeout(timer)
}, showTime * 1000)
}
module.exports = {
toast: toast,
}
toast.wxss
.s-toast-content {
position: fixed;
left: 50%;
color: #fff;
width: 500rpx;
bottom: 120rpx;
background: hsla(0,0%,7%,.7);
padding: 15rpx;
text-align: center;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 4rpx;
z-index: 6999;
}2. js-Dateireferenzen toast.js
3 🎜>
Verbesserungen und weitere Erweiterungen
import { toast } from '../../../project/component/toast/toast.js'In tatsächlichen Projekten wird es Toast-Ladebestätigungen geben ... und viele andere gemeinsame Komponenten, sowie a Wir können js in eine js-Datei einführen und diese (Seite) dann beim Laden der Seite registrieren, sodass Sie sich nur einmal registrieren müssen, um alle Komponenten zu verwenden, z. B. toast(this, '填写详细信息')
wird zu
toast(this,'填写详细信息'')Ich bin der Einzige, der die Miniprogramme des Unternehmens entwickelt. Es gibt keine Situation, in der mehrere Personen zusammenarbeiten, um Miniprogramme zu entwickeln, daher investiere ich nicht viel Mühe in diesen Aspekt.
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in benutzerdefinierte Komponenten in WeChat-Miniprogrammen. 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.
Stock Market GPT
KI-gestützte Anlageforschung für intelligentere Entscheidungen
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)
Heiße Themen
1651
276
So richten Sie schnell einen benutzerdefinierten Avatar in Netflix ein
Feb 19, 2024 pm 06:33 PM
Ein Avatar auf Netflix ist eine visuelle Darstellung Ihrer Streaming-Identität. Benutzer können über den Standard-Avatar hinausgehen, um ihre Persönlichkeit auszudrücken. Lesen Sie diesen Artikel weiter, um zu erfahren, wie Sie in der Netflix-App ein benutzerdefiniertes Profilbild festlegen. So legen Sie schnell einen benutzerdefinierten Avatar in Netflix fest. In Netflix gibt es keine integrierte Funktion zum Festlegen eines Profilbilds. Sie können dies jedoch tun, indem Sie die Netflix-Erweiterung in Ihrem Browser installieren. Installieren Sie zunächst ein benutzerdefiniertes Profilbild für die Netflix-Erweiterung in Ihrem Browser. Sie können es im Chrome Store kaufen. Öffnen Sie nach der Installation der Erweiterung Netflix in Ihrem Browser und melden Sie sich bei Ihrem Konto an. Navigieren Sie zu Ihrem Profil in der oberen rechten Ecke und klicken Sie
Detaillierte Einführung in Wapi
Jan 07, 2024 pm 09:14 PM
Benutzer haben möglicherweise den Begriff Wapi bei der Nutzung des Internets gesehen, aber einige Leute wissen definitiv nicht, was Wapi ist. Im Folgenden finden Sie eine detaillierte Einführung, um denjenigen, die es nicht wissen, das Verständnis zu erleichtern. Was ist Wapi: Antwort: Wapi ist die Infrastruktur für WLAN-Authentifizierung und Vertraulichkeit. Dies entspricht Funktionen wie Infrarot und Bluetooth, die im Allgemeinen in der Nähe von Orten wie Bürogebäuden verfügbar sind. Im Grunde sind sie Eigentum einer kleinen Abteilung, sodass der Umfang dieser Funktion nur wenige Kilometer beträgt. Verwandte Einführung in Wapi: 1. Wapi ist ein Übertragungsprotokoll im WLAN. 2. Diese Technologie kann die Probleme der Schmalbandkommunikation vermeiden und eine bessere Kommunikation ermöglichen. 3. Zur Übertragung des Signals ist nur ein Code erforderlich.
Detaillierte Erklärung, ob Win11 das PUBG-Spiel ausführen kann
Jan 06, 2024 pm 07:17 PM
Pubg, auch bekannt als PlayerUnknown's Battlegrounds, ist ein sehr klassisches Battle-Royale-Shooter-Spiel, das seit seiner Popularität im Jahr 2016 viele Spieler angezogen hat. Nach der kürzlichen Einführung des Win11-Systems möchten viele Spieler es auf Win11 spielen. Folgen wir dem Editor, um zu sehen, ob Win11 Pubg spielen kann. Kann Win11 Pubg spielen? Antwort: Win11 kann Pubg spielen. 1. Zu Beginn von Win11 wurden viele Spieler von Pubg ausgeschlossen, da Win11 TPM aktivieren musste. 2. Basierend auf dem Feedback der Spieler hat Blue Hole dieses Problem jedoch gelöst, und jetzt können Sie Pubg unter Win11 normal spielen. 3. Wenn Sie eine Kneipe treffen
So passen Sie die Tastenkombinationseinstellungen in Eclipse an
Jan 28, 2024 am 10:01 AM
Wie kann ich die Tastenkombinationseinstellungen in Eclipse anpassen? Als Entwickler ist die Beherrschung von Tastenkombinationen einer der Schlüssel zur Effizienzsteigerung beim Codieren in Eclipse. Als leistungsstarke integrierte Entwicklungsumgebung bietet Eclipse nicht nur viele Standard-Tastenkombinationen, sondern ermöglicht Benutzern auch, diese nach ihren eigenen Vorlieben anzupassen. In diesem Artikel wird erläutert, wie Sie die Tastenkombinationseinstellungen in Eclipse anpassen, und es werden spezifische Codebeispiele gegeben. Öffnen Sie Eclipse. Öffnen Sie zunächst Eclipse und geben Sie ein
Der Betriebsprozess des benutzerdefinierten Bildschirmlayouts von edius
Mar 27, 2024 pm 06:50 PM
1. Das Bild unten zeigt das Standard-Bildschirmlayout von edius. Das Standard-EDIUS-Fensterlayout ist ein horizontales Layout. Daher überlappen sich viele Fenster und das Vorschaufenster befindet sich im Einzelfenstermodus. 2. Sie können den [Dual Window Mode] über die Menüleiste [View] aktivieren, damit das Vorschaufenster gleichzeitig das Wiedergabefenster und das Aufnahmefenster anzeigt. 3. Sie können das Standard-Bildschirmlayout über [Ansichtsmenüleiste > Fensterlayout > Allgemein] wiederherstellen. Darüber hinaus können Sie auch das für Sie passende Layout anpassen und es als häufig verwendetes Bildschirmlayout speichern: Ziehen Sie das Fenster auf ein für Sie passendes Layout, klicken Sie dann auf [Ansicht > Fensterlayout > Aktuelles Layout speichern > Neu] und klicken Sie auf „Ansicht > Fensterlayout > Aktuelles Layout speichern > Neu“. Popup [Aktuelles Layout speichern] Layout] Geben Sie den Layoutnamen in das kleine Fenster ein und klicken Sie auf OK
Wie kann ich die X- und Y-Achse in Excel anpassen? (So passen Sie die Skala der Excel-Koordinatenachse an)
Mar 14, 2024 pm 02:10 PM
In einer Excel-Tabelle müssen Sie manchmal Koordinatenachsen einfügen, um den sich ändernden Trend der Daten intuitiver zu erkennen. Einige Freunde wissen immer noch nicht, wie man Koordinatenachsen in die Tabelle einfügt. Als nächstes werde ich Ihnen zeigen, wie Sie die Koordinatenachsenskala in Excel anpassen. Methode zum Einfügen der Koordinatenachse: 1. Wählen Sie in der Excel-Oberfläche die Daten aus. 2. Klicken Sie in der Einfügeoberfläche auf , um ein Säulendiagramm oder Balkendiagramm einzufügen. 3. Wählen Sie in der erweiterten Oberfläche den Grafiktyp aus. 4. Klicken Sie in der Rechtsklick-Oberfläche der Tabelle auf Daten auswählen. 5. In der erweiterten Benutzeroberfläche können Sie sie anpassen.
Detaillierte Einführung, ob der i5-Prozessor Win11 installieren kann
Dec 27, 2023 pm 05:03 PM
i5 ist eine Prozessorserie von Intel. Es gibt verschiedene Versionen des i5 der 11. Generation, und jede Generation hat eine unterschiedliche Leistung. Ob der i5-Prozessor win11 installieren kann, hängt daher davon ab, um welche Generation des Prozessors es sich handelt. Folgen wir dem Editor, um mehr darüber zu erfahren. Kann der i5-Prozessor mit Win11 installiert werden: Antwort: Der i5-Prozessor kann mit Win11 installiert werden. 1. Die Prozessoren der achten Generation und nachfolgender i51, der achten Generation und nachfolgender i5-Prozessoren können die Mindestkonfigurationsanforderungen von Microsoft erfüllen. 2. Daher müssen wir nur die Microsoft-Website aufrufen und einen „Win11-Installationsassistenten“ herunterladen. 3. Nachdem der Download abgeschlossen ist, führen Sie den Installationsassistenten aus und befolgen Sie die Anweisungen zur Installation von Win11. 2. i51 vor der achten Generation und nach der achten Generation
Wir stellen die neueste Sound-Tuning-Methode für Win 11 vor
Jan 08, 2024 pm 06:41 PM
Nach dem Update auf das neueste Win11 stellen viele Benutzer fest, dass sich der Sound ihres Systems leicht verändert hat, sie wissen jedoch nicht, wie sie ihn anpassen können. Deshalb bietet Ihnen diese Website heute eine Einführung in die neueste Win11-Soundanpassungsmethode für Ihren Computer. Die Bedienung ist nicht schwer und die Auswahl ist vielfältig. Laden Sie sie herunter und probieren Sie sie aus. So passen Sie den Sound des neuesten Computersystems Windows 11 an 1. Klicken Sie zunächst mit der rechten Maustaste auf das Soundsymbol in der unteren rechten Ecke des Desktops und wählen Sie „Wiedergabeeinstellungen“. 2. Geben Sie dann die Einstellungen ein und klicken Sie in der Wiedergabeleiste auf „Lautsprecher“. 3. Klicken Sie anschließend unten rechts auf „Eigenschaften“. 4. Klicken Sie in den Eigenschaften auf die Optionsleiste „Erweitern“. 5. Wenn zu diesem Zeitpunkt das √ vor „Alle Soundeffekte deaktivieren“ aktiviert ist, brechen Sie den Vorgang ab. 6. Danach können Sie unten die Soundeffekte zum Einstellen auswählen und klicken
