提供模板渲染工具 · 多谷微信平台开发指南

# 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> ```