微信小程序開發技術教程之Mustache語法要點總結

2018/10/18 18:45:31
摘要: 開發人員在做小程序開發的時候,會在wxml里,用到Mustache語法。而Mustache其實就是一個logic-less(輕邏輯)模板解析引擎

開發人員在做小程序開發的時候,會在wxml里,用到Mustache語法。而Mustache其實就是一個logic-less(輕邏輯)模板解析引擎,它是為了使用戶界面與業務數據(內容)分離而產生的,可生成特定格式的文檔,通常是標準的HTML文檔。小程序的wxml中的代碼編寫就會用到這種語法。所以,在開發小程序之前,開發者可以先研究一下Mustache語法的幾個模板,下面我們就一起來看一下這六大模板的內容。

  1、{{keyName}}

  這種Mustache語法的模板可以分成三種類型來說明,不同情況下就需要用到不同的寫法,它們分別為:

 (1)簡單的變量替換:{{name}},示例代碼如下:

var data = { "name": "weChat" };

Mustache.render("{{name}} is excellent.",data);

成功返回

weChat is excellent.

 (2)變量含有html的代碼,如:“、”等而不想轉義,可以在用{{&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.

 (3)聲明對象屬性,示例代碼為:

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

2、{{#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>

3、{{^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 鍵名就會渲染這段

4、{{.}}

{{.}}這個模板表示的是枚舉,可以循環輸出整個數組,示例代碼如下:

var data = {

     "product": ["Macbook ","iPhone ","iPod ","iPad "]

}

var tpl = '{{#product}} <p>{{.}}</p> {{/product}}';

var html = Mustache.render(tpl, data);

返回:

<p>Macbook </p> <p>iPhone </p> <p>iPod </p> <p>iPad </p>

5、{{!  }}

{{!  }}這個模板表示的是注釋。

6、{{>partials}}

這個模板,是以>開始表示子模塊,當結構比較復雜時,使用該語法,可以將將復雜的結構,拆分成幾個小的子模塊。


聲明:文章"微信小程序開發技術教程之Mustache語法要點總結"為互誠科技—微信小程序開發公司的原創文章,轉載請注明出處,謝謝合作!
標簽:小程序干貨
電話咨詢:18011971195(黃先生)
在線留言:
微信掃碼,關注我們
相關文章
  • 運營微信小程序,如何才能讓用戶主動去傳播

    在微信小程序的運營推廣上面,可以有多種方式去實現宣傳推廣效果,其中讓用戶主動去傳播轉發就是一個方式選擇。不過,要真正做到讓用戶愿意主動去傳播小程序

  • 手勢開發研究,微信小程序的單觸摸電與多觸摸點

    在微信小程序的開發過程中,手勢常常被應用在canvas、交互的開發中,所以手勢對一些開發效果來說是比較重要的

  • 微信小程序開發與互聯網+之間,有什么關系

    微信小程序開發與互聯網+都是近年來的熱詞,兩者看似沒有聯系,但其實也有聯系。我們所說的互聯網+就是指互聯網+各種傳統行業的形式,是一種互聯網創新形式。

  • 小程序開發亮點:微信小程序的價值所在

    關于小程序開發,目前還是處于一個初級階段,但這并不代表它沒有價值

  • 小程序后臺新增運維中心查Bug與用戶管理兩不誤

    還在煩惱小程序時不時出現Bug讓人措手不及嗎?還在擔心小程序Bug會影響小程序的使用體驗嗎?還在糾結小程序開發出現Bug卻不能及時發現嗎?從今天開始,這些問題統統

  • 微信小程序開發能給線下商家帶來哪些好處

    小程序的出現,在一定程度上方便了微信用戶的生活外,也給企業商家帶來新一輪的微信營銷利益,

上海快三走势图上海快3形态走势