微信小程序技术分析:Mustache语法要点总结
小程序开发的wxml里,用到了Mustache语法。所以,非常有必要把Mustache研究下。
什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档。比如小程序的wxml中的代码:
{{userInfo.nickName}},这里的{{ }}就是Mustache的语法。
1、Mustache的模板语法很简单,就那么几个:
{{keyName}}
{{{keyName}}}
{{#keyName}} {{/keyName}}
{{^keyName}} {{/keyName}}
{{.}}
{{!comments}}
{{>partials}}
1、{{keyName}}
⑴ 简单的变量替换:{{name}}
var data = { "name": "weChat" };
Mustache.render("{{name}} is excellent.",data);
返回 weChat is excellent.
⑵ 变量含有html的代码,如:
、等而不想转义,可以在用{{&name}}
var data = {
"name" : "
weChat
"
};
var output = Mustache.render("{{&name}} is excellent.", data);
console.log(output);
返回:
weChat
is excellent.
去掉"&"的返回是转义为:
weChat
is excellent.
另外,你也可以用{{{ }}}代替{{&}}。
⑶ 若是对象,还能声明其属性
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}}{{name}}{{/stooges}}",
data);
console.log(output);
返回:Moe
Larry
Curly
3、{{^keyName}} {{/keyName}}
该语法与{{#keyName}} {{/keyName}}类似,不同在于它是当keyName值为null, undefined, false时才渲染输出该区块内容。比如:
var data = {
"name" : "
weChat
"
};
var tpl = ‘{{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}’;
var output = Mustache.render(tpl, data);
返回:没找到 nothing 键名就会渲染这段
4、{{.}}
{{.}}表示枚举,可以循环输出整个数组,例如:
var data = {
"product": ["Macbook ","iPhone ","iPod ","iPad "]
}
var tpl = '{{#product}}
{{.}}
{{/product}}';
var html = Mustache.render(tpl, data);
返回:
Macbook
iPhone
iPod
iPad
5、{{! }}表示注释
6、{{>partials}}
以>开始表示子模块,当结构比较复杂时,我们可以使用该语法将复杂的结构拆分成几个小的子模块。
作者名字:有渔
本文链接:http://wxapp.dreawer.com/portal.php?mod=view&aid=135
微信小程序技术分析:Mustache语法要点总结的更多相关文章
- 微信小程序WXML页面常用语法(讲解+示例)
(一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...
- 浅析微信小程序技术架构(原创)
周末万里虎抽空体验了下微信小程序的DEMO,对小程序的开发有了一个基础的了解与认识,今天就来和大家分享一下我对小程序的看法. 从官方DEMO来看,小程序在技术架构上非常清晰易懂.JS负责业务逻辑的实现 ...
- 支付宝小程序与微信小程序开发功能和语法糖不同
最近开始负责公司webapp数据打通支付宝小程序,之前已经打通了微信小程序,现在根据支付宝小程序的开发文档在之前的模板上面做修改. 在修改模板的过程中,总结一下双方功能和语法糖的不同之处. 框架: a ...
- 微信小程序框架分析小练手(三)——仿香哈菜谱小程序制作
香哈菜谱是一款围绕美食而成的小程序,在这里可以查看各式各样的菜谱. 一.打开微信开发者工具,新建一个项目:xhcp.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标.美食轮播图片.宫格导航图 ...
- 微信小程序框架分析小练手(二)——天气微信小程序制作
简单的天气微信小程序. 一.首先,打开微信开发者工具,新建一个项目:weather.如下图: 二.进入app.json中,修改导航栏标题为“贵州天气网”. 三.进入index.wxml,进行当天天气情 ...
- 微信小程序 - 视图层 | 基础语法
视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 类似前端HTML 一.数据绑定 普通语法 test.wxml ...
- 微信小程序框架分析小练手(一)——猫眼电影底部标签导航制作
旧版猫眼电影底部有4个标签导航:电影.影院.发现.我的,如下图所示: 一.首先,打开微信开发者工具,新建一个项目:movie.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标的素材放到ima ...
- 微信小程序 教程及示例
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...
- 微信小程序资料集合
一:官方地址集合: 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461 2: ...
随机推荐
- [LeetCode] Edit Distance 编辑距离
Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...
- 记一次企业级爬虫系统升级改造(二):基于AngleSharp实现的抓取服务
爬虫系统升级改造正式启动: 在第一篇文章,博主主要介绍了本次改造的爬虫系统的业务背景与全局规划构思: 未来Support云系统,不仅仅是爬虫系统,是集爬取数据.数据建模处理统计分析.支持全文检索资源库 ...
- 【C#】菜单功能,将剪贴板JSON内容或者xml内容直接粘贴为类
VS 2015菜单功能,将剪贴板JSON内容或者xml内容直接粘贴为类
- js兼容性
1.getElementByClassName 在使用原生JavaScript时,获取类选择符时,即使用getElementByClassName,它在Firefox和IE下是不能兼容. Firefo ...
- 关于CAJViewer 无法获取document路径问题
修改注册表 进入注册表编辑器: win+R >>输入 regedit 如下图: 修改关键注册表项(两项相同值应同时修改) 1.HKEY_CURRENT_USER\Software\Mic ...
- bzoj 4003
左偏树... 打两个标记...和线段树一样,先下放cheng再下放*. 每回合并子树就行了. #include<iostream> #include<cstdio> #incl ...
- jquery使用案例
表单验证 Dom实现表单验证 通过在form标签的submit上绑定一个onclick事件,用户点击事,触发这个事件,执行Checkvalid()函数进行对表单中的元素值验证,验证通过之后,继续让su ...
- document.documentElement.clientHeight 和 $(window).height() 无法正确获取页面可视区高度
背景: 弹出层插件(自适应) 实现过程中突然发现在获取可视区高度时,无论document.documentElement.clientHeight 还是 $(window).height()都无法正确 ...
- C# .Net :Excel NPOI导入导出操作教程之将Excel文件读取并写到数据库表,示例分享
using (FileStream fileReader = File.OpenRead(@"C:\Users\Administrator\Desktop\112.xls")) ...
- ES6箭头函数与展开运算符
箭头函数:省去了关键字function和return: eg: reduce=(a,b)=>a+b;//返回a+b的值 redduce=(a,b)=>{console.log(a);con ...