微信小程序開發技術教程之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(黃先生)
在線留言:
微信掃碼,關注我們
相關文章
  • 廣州企業開發附近的小程序能帶來什么好處

    附近的小程序是基于微信LBS定位技術支持而開發,現在打開微信首頁“發現-小程序-附近的小程序”,就能發現附近商家的小程序信息

  • 為什么微信小程序會成為新一輪的商業機遇

    從微信小程序未出現之前,它的消息已經放出就已經引起業內的極大關注,很多人認為它將掀起一輪新的商業發展風暴。而在小程序沉淀后的爆發中

  • 微信小程序開發環境流程步驟說明

    微信小程序正式開發之前,需要安裝開發工具、準備開發環境、獲取開發需要的參數等等。這些準備工作都是必不可少的

  • 開發一個購物類小程序需要哪些必備功能

    現在的微信平臺,不僅僅有微信分銷商城、微商城這類電商產品,連最近開發程度火熱的微信小程序也有了相應的商城模式。既然作為電子商城,就必須要有齊全的必備功能來保障其運行。小編就以購物類的小程序為例,來談談開發這么一個小程序需要哪些必備功能。

  • 廣州微信小程序關鍵詞設置如何進行開發優化

    微信小程序的關鍵詞設置跟搜索排名與曝光度有著很大的關系,但其實一蹴而就的關鍵詞設置是比較難的一件事,很多企業商家在設置好關鍵詞之后,達不到預想的效果,就需要對關鍵詞進行優化與調整。那企業商家要如何對關鍵詞進行優化呢?其實方法

  • 政府單位開發微信小程序有什么好處

    小編通過軟文談論過很多行業開發微信小程序的好處,今天這篇推文同樣也要來討論開發的好處,不過今天的主題是關乎政府單位的話題,與商業行業還是有些不同,所以小程序帶給它的作用與好處相對會更偏向公益化,而非利益化。

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