Teilen einiger wunderbarer Verwendungsmöglichkeiten von wxs-Dateien im WeChat-Applet

Vorwort

Die wxs-Datei ist die Logikdatei im Applet und wird in Verbindung mit wxml verwendet.

Im Gegensatz zu js kann wxs direkt auf der Ansichtsebene agieren, ohne dass eine setData-Dateninteraktion zwischen der Ansichtsebene und der Logikebene erforderlich ist.

Aufgrund dieser Funktion eignet sich wxs sehr gut zur Optimierung der häufigen interaktiven Vorgänge kleiner Programme.

Anwendung

Filter

In der iOS-Umgebung läuft wxs viel schneller als js, und unter Android ist die Leistung beider Versionen ähnlich.

Die Verwendung von wxs als Filter kann die Leistung ebenfalls etwas verbessern. Sehen wir uns einen Filter an, um seine Syntax zu verstehen.

wxs-Datei:

 var toDecimal2 = Funktion (x) {
  var f = parseFloat(x);
  wenn (istNaN(f)) {
    Rückgabewert '0,00'
  }
  var f = Math.round(x * 100) / 100;
  var s = f.toString();
  var rs = s.indexOf('.');
  wenn (rs < 0) {
    rs = s.Länge;
    s += '.';
  }
  während (s.Länge <= rs + 2) {
    s += '0';
  }
  Rückgabe s;
}
module.exports = toDecimal2

Der obige Code implementiert die Funktion zum Beibehalten von zwei Dezimalstellen in einer Zahl.

wxml-Datei:

 <wxs src="./filter.wxs" module="filter"></wxs>
<text>{{filter(1)}}</text>

Grundlegende Syntax: In der Ansichtsdatei wird es über das wxs-Tag eingeführt, der Modulwert ist ein benutzerdefinierter Name, und dann kann die Methode über den Filter in wxml aufgerufen werden

Der obige Code zeigt die Betriebslogik von wxs und ermöglicht uns, Methoden in wxs wie Funktionen aufzurufen.

Als Nächstes werfen wir einen Blick auf die Leistung von wxs in wxml-Seitenereignissen.

Ziehen

Wenn Sie Interaktionen (Ziehen, nach oben und unten schieben, nach links und rechts schieben usw.) verwenden und sich auf die JS-Logikschicht verlassen, ist eine umfangreiche, häufige Datenkommunikation erforderlich. Stottern ist unvermeidlich;

Verwenden Sie WXS-Dateien anstelle von Interaktionen. Dadurch muss setData nicht häufig verwendet werden, was zu einer großen Menge an Echtzeit-Datenkommunikation führt und so Leistung spart.

Nachfolgend sehen Sie ein Drag-Beispiel

wxs-Datei:

 Funktion touchstart(Ereignis) {
  var touch = event.touches[0] || event.changedTouches[0]
  startX = touch.seiteX
  startY = touch.pageY
}

Die Eigenschaften „touches“ und „changedTouches“ im Ereignisparameter „event“ und im Ereignisinhalt in js sind konsistent

 Funktion touchmove(Ereignis, ins) {
  var touch = event.touches[0] || event.changedTouches[0]
  ins.selectComponent('.div').setStyle({
    links: startX - touch.pageX + 'px',
    oben: startY – touch.pageY + „px“
  })
}

ins (der zweite Parameter) ist der WXML-Kontext der Ansichtsebene, der das Ereignis auslöst. Sie können alle Elemente auf der Seite finden und Stil und Klasse festlegen (genug, um den interaktiven Effekt zu vervollständigen)

Hinweis: Im Ereignisparameter gibt es auch eine Kontextinstanz. Die Instanz im Ereignis ist auf das Element beschränkt, das das Ereignis auslöst, während der Ins-Parameter des Ereignisses auf die Komponente beschränkt ist, die das Ereignis auslöst.

 modul.exporte = {
  Touchstart: Touchstart,
  Berührungsbewegung: Berührungsbewegung,
}

Zum Schluss verwerfen Sie die Methode und verweisen damit auf die WXML-Datei.

WXML-Datei

 <wxs module="Aktion" src="./movable.wxs"></wxs> 
<view class="div" bindtouchstart="{{action.touchstart}}" bindtouchmove="{{action.touchmove}}"></view>

Die obigen Beispiele erläutern die grundlegende interaktive Verwendung von Ereignissen.

Übergeben von Referenzen zwischen Dateien

Bei der Ereignisinteraktion ist es notwendig, Parameter zwischen verschiedenen Dateien zu übergeben. Im Folgenden sind einige der am häufigsten verwendeten

wxs übergibt Parameter an die js-Logikebene

In der wxs-Datei:

 var dragStart = function (e, ins) {
	ins.callMethod('Rückruf','sldkfj')
}

In der js-Datei:

 Rückruf(e){
	console.log(e)
}
//sldkfj

Verwenden Sie die Methode callMethod, um die Rückrufmethode in js auszuführen. Es ist auch möglich, Parameter zu übergeben;

• ! ! ! callMethod unterstützt keine Übergabe von Callback-Funktionen*

Die js-Logikebene übergibt Parameter an die wxs-Datei

In der js-Datei:

 handler(e){
	dies.setData({a:1})
}

wxml-Datei:

 <wxs module="Aktion" src="./movable.wxs"></wxs> 
<Ansicht ändern:prop="{{action.change}}" prop="{{a}}"></Ansicht>

In der wxs-Datei:

 ändern(neuerWert,alterWert){}

Die Parameter in der js-Datei müssen über die wxml-Datei an wxs übertragen werden.

Die js-Datei löst das Handler-Ereignis aus. Nach der Änderung des Werts von a wird das neueste a an wxml übergeben.

Prop-Änderungen in wxml lösen Änderungsereignisse in wxs aus. Der neueste Prop-Wert wird als Wechselgeld empfangen

Datensatz in WXS abrufen (WXML-Daten in WXS abrufen)

Code in wxs

 var dragStart = Funktion (e) {
  var index = e.currentTarget.dataset.index;
  var index = e.instance.getDataset().index;
}

Oben wurde erwähnt, dass e.instance die Elementinstanz ist, die das Ereignis aktuell auslöst.

Daher ruft e.instance.getDataset() den Datensatz ab, der das Ereignis aktuell auslöst.

Notiz

wxs und js sind zwei verschiedene Skriptsprachen. Die Syntax ist jedoch grundsätzlich dieselbe wie bei es5, unterstützt jedoch nicht die Syntax von es6. getState ist bei der Interaktion mehrerer Elemente sehr praktisch. Erkunden Sie es gerne.

Ich weiß nicht, ob es eine unterstützte Syntax ist. Ich kann zum offiziellen Website-Dokument springen; WXS-Operatoren, Anweisungen, grundlegende Klassenbibliotheken, Datentypen

Zusammenfassen

Dies ist das Ende dieses Artikels über einige wunderbare Verwendungsmöglichkeiten von wxs-Dateien in WeChat-Miniprogrammen. Weitere relevante Inhalte zu den wunderbaren Verwendungsmöglichkeiten von wxs-Dateien in WeChat-Miniprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!