Partage d'exemples de code de syntaxe Moustache pour le développement de mini-programmes WeChat

La syntaxe Mustache dans wxml dans le mini-programme WeChat ne peut pas être ignorée, ce qui me rend confus, moi qui n'ai jamais utilisé iOS front-end auparavant. . . J'ai vérifié en ligne. . . Enregistrez-le.

Qu'est-ce que Moustache ?

Mustache est un moteur d'analyse de modèles sans logique (logique légère). Il est produit pour séparer l'interface utilisateur des données commerciales (contenu). dans un format spécifique, généralement un document HTML standard. Lorsque vous souhaitez appeler différentes fonctions dans le même modèle pour restituer l'écran, vous pouvez juger manuellement les paramètres transmis lors du rendu de la page, à condition qu'ils aient été personnalisés.

Par exemple, le code dans le wxml du mini programme :

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

La syntaxe du modèle de Moustache est très simple, juste quelques-uns :

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

{{ keyName}} Plusieurs situations

Remplacement simple de variable : {{name}}

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

  返回 weChat is excellent.

La variable contient du code html,

如：<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.
另外，你也可以用{{{ }}}代替{{&}}。

Si c'est un objet, il peut également être déclaré. Attributs

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}} commence par # et se termine par / pour représenter un bloc. Il traitera le bloc en fonction du. valeur clé dans le contexte actuel. Un ou plusieurs rendus. Sa fonction est très puissante, et des fonctions comme if et foreach peuvent également y être ajoutées.

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}} Sortie d'exception

Cette syntaxe est la même que {{#keyName}} {{/ keyName}} est similaire, sauf qu'il restitue et affiche le contenu du bloc uniquement lorsque la valeur keyName est nulle, non définie ou fausse. Par exemple :

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

{{.}} représente une énumération utilisée pour parcourir l'ensemble du tableau, par exemple :

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>

{{! } représente un commentaire

 {{!这里是注释}}

{{>partials}}

Commencez par > pour représenter les sous-modules. Lorsque la structure est complexe, nous pouvons utiliser cette syntaxe pour diviser la structure complexe en plusieurs petits. sous-modules.

 var tpl = "<h1>{{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>xiaohua</h1>

{{{data}}}

{{data}} La sortie sera traduite en caractères spéciaux. Si vous souhaitez conserver le contenu tel quel, vous pouvez utiliser {{{}}}. ,

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

Il y a tellement de petits programmes que vous pouvez les utiliser grossièrement. Si vous en trouvez d'autres, vous les mettrez à jour. . .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!