Teilen von Codebeispielen der Mustache-Syntax für die Entwicklung von WeChat-Miniprogrammen

Die Moustache-Syntax in wxml im WeChat-Miniprogramm kann nicht ignoriert werden, was mich, der noch nie Front-End-iOS gemacht hat, verwirrt. . . Ich habe online nachgeschaut. . . Nehmen Sie es auf.

Was ist Moustache?

Mustache ist eine logiklose (leichte Logik) Template-Parsing-Engine. Sie wird entwickelt, um die Benutzeroberfläche von Geschäftsdaten (Inhalt) zu trennen in einem bestimmten Format, normalerweise einem Standard-HTML-Dokument. Wenn Sie zum Rendern des Bildschirms verschiedene Funktionen in derselben Vorlage aufrufen möchten, können Sie die beim Rendern der Seite übergebenen Parameter manuell beurteilen, sofern sie angepasst wurden.

Zum Beispiel der Code im WXML des Miniprogramms:

// 这里的{{ }}就是Mustache的语法。
<text>{{userInfo.nickName}}</text>，

Die Vorlagensyntax von Moustache ist sehr einfach, nur einige:

 {{keyName}}
  {{{keyName}}}
  {{#keyName}} {{/keyName}}
  {{^keyName}} {{/keyName}}
  {{.}}
  {{!comments}}
  {{>partials}}

{{ keyName}} Mehrere Situationen

Einfache Variablenersetzung: {{name}}

var data = { "name": "weChat" };
  Mustache.render（"{{name}} is excellent."，data）;

  返回 weChat is excellent.

Die Variable enthält HTML-Code,

如：<br>、<tr>等而不想转义，可以在用{{&name}}
var data = {
          "name" : "<br>weChat<br>"
      };
var output = Mustache.render("{{&name}} is excellent.", data);
console.log(output);

返回：<br>weChat<br> is excellent.
去掉"&"的返回是转义为：<br>weChat<br> is excellent.
另外，你也可以用{{{ }}}代替{{&}}。

Wenn es sich um ein Objekt handelt, Es kann auch als Attribute deklariert werden:

var data = {
           "name" : {
           "first" : "Chen"，
           "last" : "Jackson"
           }，
           "age" : 18
      };
var output = Mustache.render(
        "name:{{name.first}} {{name.last}}，age:{{age}}", data);
console.log(output);
返回：name:Chen Jackson，age:18

{{#keyName}} {{/keyName}} beginnt mit # und endet mit /, um einen Block darzustellen Schlüsselwert im aktuellen Kontext. Ein oder mehrere Renderings. Seine Funktion ist sehr leistungsstark und es können auch Funktionen wie if und foreach hinzugefügt werden.

var data = {
           "stooges" : [ {
               "name" : "Moe"
           }， {
               "name" : "Larry"
           }， {
               "name" : "Curly"
       };
var output = Mustache.render("{{＃stooges}}<b>{{name}}</b>{{/stooges}}"，
              data);
console.log(output);
返回：<b>Moe</b>
   <b>Larry</b>
   <b>Curly</b>

{{^keyName}} {{/keyName}} Ausnahmeausgabe

Diese Syntax ist dieselbe wie bei {{#keyName}} {{/ keyName}} ist ähnlich, außer dass es den Inhalt des Blocks nur rendert und ausgibt, wenn der keyName-Wert null, undefiniert oder falsch ist. Beispiel:

var data = {
             "name" : "<br>weChat<br>"
         };
    var tpl = ‘{{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}’;
    var output = Mustache.render(tpl, data);
返回：没找到 nothing 键名就会渲染这段

{{.}} stellt eine Aufzählung dar, die zum Durchlaufen des gesamten Arrays verwendet wird, zum Beispiel:

var data = {
    "product": ["Macbook ","iPhone ","iPod ","iPad "]
    }
    var tpl = &#39;{{#product}} <p>{{.}}</p> {{/product}}&#39;;
    var html = Mustache.render(tpl, data);
返回：<p>Macbook </p> <p>iPhone </p> <p>iPod </p> <p>iPad </p>

{{ } } stellt einen Kommentar dar

 {{!这里是注释}}

{{>Partials}}

Beginnen Sie mit >, um Submodule darzustellen. Wenn die Struktur komplex ist, können wir diese Syntax verwenden, um die komplexe Struktur in mehrere kleine aufzuteilen Submodule.

 var tpl = "<h1 id="namme">{{namme}}</h1> <ul>{{>msg}}</ul>" 
   var partials = {msg: "{{#msg}}<li>{{sex}}</li><li>{{age}}</li><li>{{hobit}}</li>{{/msg} 
   var html = Mustache.render(tpl, data, partials); 
   //输出： 
   <h1 id="xiaohua">xiaohua</h1>

{{{data}}}

{{data}} Die Ausgabe wird in Sonderzeichen übersetzt. Wenn Sie den Inhalt unverändert lassen möchten, können Sie {{{}}} verwenden. ,

 var tpl = &#39;{{#msg}} <p>{{{age}}}</p> {{/msg}}&#39;
 //输出：
 <p>22</p>

Es gibt so viele kleine Programme, dass Sie sie ungefähr verwenden können. Wenn Sie andere finden, werden Sie sie aktualisieren. . .

Das obige ist der detaillierte Inhalt vonTeilen von Codebeispielen der Mustache-Syntax für die Entwicklung von WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!