Rumah > applet WeChat > Pembangunan program mini > 微信小程序开发之Mustache语法的代码实例分享

微信小程序开发之Mustache语法的代码实例分享

黄舟
Lepaskan: 2017-04-18 10:26:55
asal
2241 orang telah melayarinya

微信小程序中wxml里Mustache语法不可忽视,让我这个以前没搞过前端的iOS的一脸懵逼。。。上网查了查。。。记录一下。

什么是Mustache?

Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档。当同一个模板中想要调用不同的函数来渲染画面,在已经自定义好了的前提下,可以在渲染页面时对传入的参数进行手动判断。

比如小程序的wxml中的代码:

// 这里的{{ }}就是Mustache的语法。
<text>{{userInfo.nickName}}</text>,
Salin selepas log masuk

Mustache的模板语法很简单,就那么几个:

 {{keyName}}
  {{{keyName}}}
  {{#keyName}} {{/keyName}}
  {{^keyName}} {{/keyName}}
  {{.}}
  {{!comments}}
  {{>partials}}
Salin selepas log masuk

{{keyName}} 几种情况

简单的变量替换:{{name}}

var data = { "name": "weChat" };
  Mustache.render("{{name}} is excellent.",data);

  返回 weChat is excellent.
Salin selepas log masuk

变量含有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.
另外,你也可以用{{{ }}}代替{{&}}。
Salin selepas log masuk

若是对象,还能声明其属性

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
Salin selepas log masuk

{{#keyName}} {{/keyName}} 以#开始、以/结束表示区块,它会根据当前上下文中的键值来对区块进行一次或多次渲染。它的功能很强大,里面还可以加入类似if、foreach的功能。

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>
Salin selepas log masuk

{{^keyName}} {{/keyName}} 异常输出

该语法与{{#keyName}} {{/keyName}}类似,不同在于它是当keyName值为null, undefined, false时才渲染输出该区块内容。比如:

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

{{.}}表示枚举,用于循环输出整个数组,例如:

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>
Salin selepas log masuk

{{! }}表示注释

 {{!这里是注释}}
Salin selepas log masuk
{{>partials}}

以>开始表示子模块,当结构比较复杂时,我们可以使用该语法将复杂的结构拆分成几个小的子模块。

 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>
Salin selepas log masuk
{{{data}}}

{{data}} 输出会将等特殊字符转译,如果想保持内容原样输出可以使用{{{}}},

 var tpl = &#39;{{#msg}} <p>{{{age}}}</p> {{/msg}}&#39;
 //输出:
 <p>22</p>
Salin selepas log masuk

小程序 这么多大致就能用了,如果发现什么其他的再更新。。。

Atas ialah kandungan terperinci 微信小程序开发之Mustache语法的代码实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan