Mustache syntax in wxml in the WeChat applet cannot be ignored, which makes me, who has never done front-end iOS before, confused. . . I checked online. . . Record it.

What is Mustache?

Mustache is a logic-less (light logic) template parsing engine. It is produced to separate the user interface from business data (content). It can generate A document in a specific format, usually a standard HTML document. When you want to call different functions in the same template to render the screen, you can manually judge the parameters passed in when rendering the page, provided that they have been customized.

For example, the code in the wxml of the mini program:

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

Mustache’s template syntax is very simple, just a few:

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

{{keyName}} Several situations

Simple variable replacement: {{name}}

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

  返回 weChat is excellent.

The variable contains the html code,

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

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

If it is an object, its properties can also be declared

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}} starts with # and ends with / to indicate a block. It will render the block one or more times based on the key value in the current context. Its function is very powerful, and functions like if and foreach can also be added to it.

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

{{^keyName}} {{/keyName}} Exception output

This syntax is the same as {{#keyName}} {{/keyName} }Similar, the difference is that it only renders and outputs the content of the block when the keyName value is null, undefined, or false. For example:

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

{{.}} represents an enumeration, which is used to loop out the entire array, for example:

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

{{! }} represents the comment

 {{!这里是注释}}

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

 var tpl = '{{#msg}} 
{{{age}}}
 {{/msg}}'
 //输出：
 
22

The above is the detailed content of Sharing code examples of Mustache syntax for WeChat mini program development. For more information, please follow other related articles on the PHP Chinese website!