So verwenden Sie das WeChat-Miniprogramm WXS

Der Inhalt dieses Artikels befasst sich mit der Verwendung des WeChat-Applets WXS. Ich hoffe, dass er für Freunde hilfreich ist.

Vor ein paar Tagen fragte mich ein Klassenkamerad: Unterstützt das WeChat-Applet Pipeline-Filter?
Studenten, die Angular oder Vue verwendet haben, sollten in ihren Projekten Filter verwenden können, diese werden jedoch in kleinen Programmen nicht unterstützt. Aber es gibt einige Lösungen
Aber mir ist nur wichtig, ob WXS Filter implementieren kann und was es sonst noch kann? Mit dieser Frage habe ich das offizielle WXS des WeChat-Miniprogramms noch einmal gelesen.

Hier ist ein einfaches Beispiel:

<wxs>var msg = "hello world"; module.exports.message = msg;</wxs>
<view>{{m1.message}}</view>

Das obige Beispiel kann die Hallo-Welt-Seite ausgeben. Wenn Sie mit dem Lesen der offiziellen Dokumentation fertig sind, werden Sie feststellen, dass die Mini-Programm Die Funktionen der Skriptsprache sind sehr knifflig, zum Beispiel unterstützt sie nur die ES5-Syntax, unterstützt nicht die externe Einführung von JS usw. Aber ich freue mich immer noch darauf, dass es in Zukunft weitere Funktionen unterstützt.

Lassen Sie uns zum Hauptthema gehen und die Fragen zum Artikeltitel untersuchen

1. Verwenden Sie WXS, um Filter zu implementieren

Das Frontend verfügt in der Regel über eine Die Anforderung besteht darin, den vom Hintergrund übermittelten Zeitstempel in Datumsangaben unterschiedlicher Spezifikation umzuwandeln und diese dann anzuzeigen. Die bisherige Praxis bestand darin, die Daten mit einer Funktion zu umschließen und sie dann auf der Seite auszugeben. Genau wie bei der ersten Methode, die im zuvor erwähnten Artikel erwähnt wurde, denken einige Leute über Leistungsprobleme nach und denken, dass die Schleifenverarbeitung in js leistungsintensiver ist (ich werde dies nicht kommentieren, schließlich habe ich es nicht wirklich getestet)
Beispiele für die Datumsformatierung finden Sie bereits im zuvor erwähnten Artikel. Hier werde ich ein einfacheres Beispiel geben. In den von mir entwickelten Projekten ist die vom Hintergrund zurückgegebene Internet-Bildadresse normalerweise eine relative Adresse, was bedeutet, dass zur Anzeige des Bildes ein konfiguriertes Domänennamenpräfix hinzugefügt werden muss. Normalerweise durchlaufe ich die Daten, nachdem ich sie erhalten habe, und füge Präfixe zu den Bildern hinzu, die im Frontend angezeigt werden müssen. Aber mit WXS können wir Folgendes tun:

<wxs>
    function getFullPath(url) {
        return "https://shiyuanjieyi.cn" + url
    }
    module.exports.getFullPath = getFullPath
</wxs>
<image></image>

Im obigen Beispiel können Sie sehen, dass der gesamte Prozess im Grunde der Art und Weise der benutzerdefinierten Filterung in Frameworks wie Vue ähnelt.

2. Was kann WXS sonst noch?

Tatsächlich verstehen wir oft nicht, dass WXS mehr bedingtes Rendering durchführen kann. Schauen Sie sich bitte das folgende Beispiel an:

<wxs>
  function getData(entry, type) {
    var imgUrl = '';
    var content = '';
    switch (entry) {
      case 'needs':
        imgUrl = '/images/goods_empty.png';
        content = '暂时没有需求';
        break;
      case 'goods':
        imgUrl = '/images/goods_empty.png';
        content = '暂时没有商品';
        break;
      case 'activity':
        imgUrl = '/images/activity_empty.png';
        content = '该专栏暂时没有活动';
        break;
      case 'channel':
        imgUrl = '/images/article_empty.png';
        content = '该专栏暂时没有资讯';
        break;
      case 'micro-circle':
        imgUrl = '/images/article_empty.png';
        content = '没有相关的话题哦';
        break;
      case 'needs-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你还没有发布任何需求哦';
        break;
      case 'goods-release':
        imgUrl = '/images/goods_release_empty.png';
        content = '你还没有发布任何商品哦';
        break;
      case 'goods-collection':
        imgUrl = '/images/goods_collect_empty.png';
        content = '你还没有收藏任何商品哦';
        break;
      case 'apply':
        imgUrl = '/images/activity_apply_empty.png';
        content = '你还没有报名任何活动哦';
        break;
      case 'activity-collection':
        imgUrl = '/images/activity_collect_empty.png';
        content = '你还没有收藏任何活动哦';
        break;
      default:
        break;
    }
    if (type === 'image') {
      return imgUrl;
    } else {
      return content;
    }
  }
  module.exports.getData = getData;
</wxs>
<template>
  <view>
    <image></image>
    <view>{{filter.getData(entry, 'content')}}</view>
  </view>
</template>

Im obigen Beispiel habe ich die Funktion von WXS verwendet, um bedingte Beurteilungen zu treffen und die entsprechende Vorlagenausgabe zu erhalten. Ihre Funktion ist eine leere Datenanzeigeseite. Vielleicht fragen Sie sich, welche Vorteile es hat, so zu schreiben?
Dann kann ich Ihnen sagen, dass es einfach ist, es zu erweitern. Wenn beispielsweise eine neue Seite eine entsprechende leere Datenvorlage benötigt, fügen Sie einfach einen weiteren Fall zur switch-Anweisung hinzu. Wenn die Logik darüber hinaus in WXML geschrieben ist, ist der Code sehr kompliziert und schwer zu verstehen.
Wenn Sie dies verstehen, werden Sie feststellen, dass jede Operation, die eine gewisse logische Beurteilung von WXML erfordert, durch WXS ersetzt werden kann.
Mit anderen Worten: Während der Entwicklung können wir alle die Funktionen von WXS nutzen, um einige in WXML gerenderte Ansichten klar und effektiv zu verarbeiten.

3. Gedanken (Erweiterung)

1. Für WXS, das in eine Filterform umgewandelt werden muss, ist es am besten, es in eine .wxs-Datei zu schreiben. direkt im entsprechenden WXML Einfach zitieren.

var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<wxs></wxs>
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

2. Um auf andere WXS-Dateimodule im .wxs-Modul zu verweisen, können Sie die Funktion „require“ verwenden, Sie können jedoch nicht auf andere JS-Dateimodule verweisen.

Referenz für diesen Artikel: Grundlegendes Tutorial zur WeChat Mini-Programmentwicklung https://www.html.cn/study/20.html

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das WeChat-Miniprogramm WXS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!