Lernprogramm zur Verwendung des WeChat-Applets WXS

Was ist wxs?

wxs (WeiXin Script) ist eine Skriptsprache für kleine Programme. In Kombination mit WXML kann sie eine Seitenstruktur erstellen.

wxs Tags

<wxs module="utils" src="../../wxs/test.wxs"></wxs>

Modulattribute:

Der Modulname des aktuellen Tags. Es wird empfohlen, dass dieser Wert eindeutig ist. Wenn es ein Modul mit demselben Namen gibt, wird es der Reihe nach überschrieben (letzteres überschreibt das vorherige).

src-Attribut:

a. Es können nur .wxs-Dateien referenziert werden und der Pfad muss relativ sein;

b. Alle WXS-Module sind Singletons. Wenn ein WXS-Modul zum ersten Mal referenziert wird, wird es automatisch als Singleton-Objekt initialisiert. Mehrere Seiten, mehrere Orte und mehrere Verwendungen verwenden alle dasselbe WXS-Modulobjekt.

c. Wenn auf ein WXS-Modul nach der Definition nicht verwiesen wurde, wird das Modul nicht analysiert und ausgeführt.

WXS-Modul

WXS-Code kann in das Tag der WXML-Datei oder in die Datei mit der Endung .wxs geschrieben werden (klicken Sie im WeChat-Entwicklertool mit der rechten Maustaste, um direkt eine WXS-Datei zu erstellen und schreiben Sie das WXS-Skript direkt hinein).

Die Schreibmethode 1 lautet wie folgt:

//test.wxml
<wxs module="utils">
  modul.exporte = {
    Nachricht: „Hallo Welt“
  }
</wxs>
<Ansicht> {{utils.msg}}</Ansicht>
// Bildschirmausgabe: Hallo Welt

Die Schreibmethode 2 lautet wie folgt:

//text.wxml
<wxs module="utils" src="../../common/wxs/test.wxs"></wxs>
// Sie können auch direkt die Methode zum Schließen einzelner Tags verwenden // <wxs module="utils" src="../../common/wxs/test.wxs" />
<Ansicht> {{utils.msg}}</Ansicht>
//test.wxs
modul.exporte = {
  Nachricht: „Hallo Welt“
}

Es wird generell empfohlen, WXS-Code in eine WXS-Datei zu schreiben.

Modulbeschreibung

1. Jede .wxs-Datei und jedes wxs-Tag ist ein separates Modul.
2. Jedes Modul hat einen unabhängigen Gültigkeitsbereich, d. h., die in einem Modul definierten Variablen und Funktionen sind standardmäßig privat und für andere Module nicht sichtbar.
3. Wenn ein Modul seine internen privaten Variablen und Funktionen verfügbar machen möchte, ist dies nur über module.exports möglich.

F1: Was passiert, wenn dasselbe WXML mehrere WXS-Dateien importiert und Variablen oder Funktionen mit demselben Namen vorhanden sind?

//test.wxml
<wxs module="utils" src="../../wxs/test.wxs"></wxs>
<wxs module="utils1" src="../../wxs/test1.wxs"></wxs>
<Ansicht> {{utils.msg}} + {{utils.say()}}</Ansicht>
<Ansicht> {{utils1.msg}} +{{utils1.say()}}</Ansicht>

//test.wxs
modul.exporte = {
  Nachricht: 'Hallo test.wxs',
  sagen wir: function (){
    returniere „say() von test.wxs“
  }
}
//test1.wxs
modul.exporte = {
  Nachricht: 'hallo test1.wxs',
  sagen wir: function (){
    returniere „say() von test1.wxs“
  }
}
// Bildschirmausgabe // hallo test.wxs + test.wxs's say()
// hallo test1.wxs + test1.wxs sagt()

Nach der Überprüfung stellt sich heraus, dass jedes Modul einen unabhängigen Umfang hat.

F2: Wenn Sie andere WXS-Dateimodule in ein WXS-Modul importieren möchten, wie können Sie das tun?

Durch die require-Funktion

//test.wxs
var test1 = erfordern('./test1.wxs')
modul.exporte = {
  Nachricht: 'Hallo test.wxs',
  sagen wir: function (){
    console.log(test1.msg)
    returniere „say() von test.wxs“
  }
}
// Konsolenausgabe // [WXS Runtime info] hallo test1.wxs 

wxs Kommentare

// wXML-Datei <wxs module="utils">
// .wxs-einzeiliger Kommentar/**
 * .wxs-mehrzeilige Kommentare*/
 
/*
var a = 1

</wxs>

In den obigen Beispielen sind alle wxs-Codes kommentiert. Die dritte Schreibweise ist relativ selten. Ich habe sie beim Lernen gesehen und aufgezeichnet.

Wenn es sich um eine WXS-Datei handelt, gibt es nur zwei Arten von Kommentaren: einzeilig und mehrzeilig.

WXS-Grundlagen

Die Additionsoperation (+) wird zum Verketten von Zeichenfolgen verwendet.

<wxs module="utils">
modul.exporte = {
  getnum: Funktion () {
    var a = 10
    var b = 20
    var str = a + '+' + b + '=' + (a+b) 
    return str
  }
}
</wxs>
<Ansicht>{{utils.getnum()}}</Ansicht>

Der Verkettungsoperator `` kann nicht verwendet werden, da sonst ein Fehler gemeldet wird.

wxs unterstützt derzeit die folgenden Datentypen:

Zahl (Wert), Zeichenfolge (Zeichenfolge), Boolescher Wert (Boolescher Wert), Array (Array), Objekt (Objekt), Funktion (Funktion), Datum (Datum), Regexp (regulärer Ausdruck)

In den wxs-Datentypen gibt es kein Null/Undefiniert.

Um ein Datumsobjekt zu generieren, müssen Sie getDate() verwenden, das ein Objekt der aktuellen Uhrzeit zurückgibt.

<wxs module="utils">
modul.exporte = {
  getNowTime: Funktion () {
    returniere getDate()
  }
}
</wxs>
<view>{{utils.getNowTime()}}</view>
// Bildschirmausgabe // Sa., 1. Mai 2021, 14:42:57 GMT+0800 (China Standard Time)

Sie können new Date() nicht verwenden, es wird ein Fehler gemeldet.

ES6-Syntax wird nicht unterstützt, wie etwa Destrukturierung und Pfeilfunktionen.

Sie können zum Deklarieren von Variablen nicht let/const verwenden, Sie müssen var verwenden und es gibt eine Variablenförderung.

<wxs module="utils">
modul.exporte = {
  getnum: Funktion () {
    sei a = 10
    zurückgeben
  }
}
</wxs>
<Ansicht>{{utils.getnum()}}</Ansicht>

Anwendungsszenario

Im Allgemeinen gibt das Backend das Zeitstempelformat an das Frontend zurück, aber wir müssen es in das gewünschte Zeitformat umwandeln, z. B. yyyy-mm-dd. In diesem Fall können wir wxs verwenden, um die Zeitkonvertierungsfunktion aufzurufen.

Vielleicht fragt sich jemand, ob es nicht möglich ist, eine Funktion in js zu verwenden, um die Daten zu verpacken und dann auf der Seite auszugeben. Die Antwort lautet: Ja. Es geht lediglich darum, eine Lösung zu verfolgen, die Ihrer Meinung nach relativ besser ist.

<wxs module="utils">
modul.exporte = {
  formatTime: Funktion (Zeitstempel) {
    var jetzt = getDate(parseInt(Zeitstempel))
    var jahr = jetzt.getFullYear()
    var Monat = jetzt.getMonth()+1 
    Monat = Monat < 10 ? '0' + Monat: Monat
    var Tag = jetzt.getDate()
    Tag = Tag < 10 ? '0' + Tag :Tag
    gibt Jahr + '-' + Monat + '-' + Tag zurück 
  }
}
</wxs>
<Ansicht>{{utils.formatTime(1619852841428)}}</Ansicht>
// Bildschirmausgabe // 01.05.2021

Manchmal ist die vom Hintergrund zurückgegebene Netzwerkbildadresse ein relativer Pfad und manchmal ein vollständiger Bildpfad. Wenn Sie das Bild anzeigen möchten, müssen Sie das konfigurierte Domänennamenpräfix hinzufügen.

<wxs module="utils">
modul.exporte = {
  getImg: Funktion (URL = '') {
    var Herkunft = "https://xxx.com"
    wenn (url.indexOf('https') !== -1 || url.indexOf('http') !== -1) {
      Rückgabe-URL
    } anders {
      Herkunft + URL zurückgeben
    }
  }
}
</wxs>
<Bild src="{{utils.getImg('/a.png')}}"></Bild>
// src-Ausgabe // https://xxx.com/a.png

Pitfall-Aufzeichnungen

Beim Aufrufen in wxml mithilfe der Kompilierung wird der erwartete LineFeed angezeigt

Lösung: Ersetzen Sie alle ES6-Inhalte durch ES5 und verwenden Sie die Var-Deklaration.

Zusammenfassen

Dies ist das Ende dieses Artikels über das Tutorial zur Verwendung von wxs für das Erlernen des WeChat-Miniprogramms. Weitere relevante Inhalte zur Verwendung von wxs für das WeChat-Miniprogramm 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!