提供模板渲染工具 · 多谷微信平臺開發指南

# Javascript 模板引擎由于現在大部分業務需要組裝大量的html填充網頁,所以封裝了超級模板引擎方法`Wechat.T`;不用關心他的性能,幾百萬數據都是小意思了.現在此api在本地不能使用,線上使用了` <wx:config wechat="Duogu" api="onMenuShareTimeline,onMenuShareAppMessage" />`會自動部署此方法,本地測試的時候需要手動引用: `http://wx.diggid.cn/static/scripts/wechat.min.js?812f611e`; > demo地址 [投票小應用1](http://wx.diggid.cn/Wap1/Test/ticket),[下載代碼](http://wx.diggid.cn/static/download/ticket.zip) [投票小應用2](http://wx.diggid.cn/Wap1/Test/repeat),[下載代碼](http://wx.diggid.cn/static/download/repeat.zip) **API:** `Wechat.T(template).render(data,[callback|string])` ## 模版語法 * 輸出一個普通字段，不轉義html： {{ d.field }} * 輸出一個普通字段，并轉義html： {{= d.field }} * 運行一段js腳本： {{# ... }} 如{{# for(var i = 0; i< 10 ; i++){alert(i)} }}; ## 方法 `var tpl = Wechat.T(template)`是獲取一個字符串組成的模板,這個模板有個render方法,調用render可以填充渲染任意的指定的數據 ## 使用說明 1.準備數據假設現在需要開發一款簡單的投票應用,提供了以下`json`數據,每次投票我們需要錄入以下數據,我們希望能拼裝成頁面,傳統方法是使用`for`循環,用+號連接這些數據 ```json var active = { title:'第12屆前端投票', desc:'第12屆前端開發大會投票評選活動', user:[ {name:'金金金',age:22,desc:'測試數據A',ticket:20}, {name:'張三',age:18,desc:'測試數據B',ticket:20}, {name:'王三',age:29,desc:'測試數據C',ticket:20}, {name:'劉小泉',age:42,desc:'測試數據D',ticket:20} ] } ``` 2.準備頁面現在開始根據設計稿簡單的切圖,假設這個投票應用就是以下這樣的:(我用bootstrap隨便寫的) ![示例圖](https://box.kancloud.cn/2016-01-07_568e21a5cb781.png) 代碼 ```html <body> <div class="container" id="app"> <div class="alert alert-success">xxx屆投票大賽</div> <ul class="list-group"> <li class="list-group-item"> 小劉 (xxx) <button class="pull-left btn btn-xs btn-primary">給他投票</button> <span class="badge">22票</span> </li> <li class="list-group-item"> 小劉 (xxx) <button class="pull-left btn btn-xs btn-primary">給他投票</button> <span class="badge">22票</span> </li> <li class="list-group-item"> 小劉 (xxx) <button class="pull-left btn btn-xs btn-primary">給他投票</button> <span class="badge">22票</span> </li> </ul> </div> </body> ``` 3.其實上面的`#app`就是我們以后類似頁面需要的模板了,所以我們下面的`script`放模板,這時候我們可以把上面 #app里面的所有內容都刪除了,現在假設上面的所有數據都在一個變量`d`中,且這個`d`在模板內是一個變量,只需要使用兩個雙括號就可以應用了,`{{d.title}}`就是上面的`active.title`,所有的js變量都用{{}}包起來,js語句使用{{# ...}},修改模板成這個樣子 ```html <script type="text/html" id="template"> <div class="alert alert-success">{{ d.title }}</div> <ul class="list-group"> {{# for(var i = 0; i < d.user.length ; i++ ){ }} <li class="list-group-item"> {{d.user[i].name}} ({{d.user[i].desc}}) <button onclick="alert('給{{ d.user[i].name }}投票')" class="pull-left btn btn-xs btn-primary">給他投票</button> <span class="badge">{{d.user[i].ticket}}票</span> </li> {{# } }} </ul> </script> ``` 4.使用數據填充模板,搞定 ```javascript Wechat.T( document.getElementById('template').innerHTML ).render(active,'#app'); ``` 全部代碼 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分享測試</title> <wx:config wechat="Duogu" api="onMenuShareTimeline,onMenuShareAppMessage" /> <wx:csscdn name="bootstrap" /> <wx:jscdn name="jquery" /> </head> <body> <div class="container" id="app"></div> </body> <script type="text/html" id="template"> <div class="alert alert-success">{{ d.title }} (<small>{{ d.desc }}</small>)</div> <ul class="list-group"> {{# for(var i = 0; i < d.user.length ; i++ ){ }} <li class="list-group-item"> {{d.user[i].name}} ({{d.user[i].desc}}) <button onclick="alert('給{{ d.user[i].name }}投票')" class="pull-left btn btn-xs btn-primary">給他投票</button> <span class="badge">{{d.user[i].ticket}}票</span> </li> {{# } }} </ul> </script> <script> var active = { title:'第12屆前端投票', desc:'第12屆前端開發大會投票評選活動', user:[ {name:'金金金',age:22,desc:'測試數據A',ticket:20}, {name:'張三',age:18,desc:'測試數據B',ticket:19}, {name:'王三',age:29,desc:'測試數據C',ticket:27}, {name:'劉小泉',age:42,desc:'測試數據D',ticket:13} ] }; Wechat.T( document.getElementById('template').innerHTML ).render(active,'#app'); </script> </html> ```