小程序开发的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语法要点总结的更多相关文章

  1. 微信小程序WXML页面常用语法(讲解+示例)

    (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...

  2. 浅析微信小程序技术架构(原创)

    周末万里虎抽空体验了下微信小程序的DEMO,对小程序的开发有了一个基础的了解与认识,今天就来和大家分享一下我对小程序的看法. 从官方DEMO来看,小程序在技术架构上非常清晰易懂.JS负责业务逻辑的实现 ...

  3. 支付宝小程序与微信小程序开发功能和语法糖不同

    最近开始负责公司webapp数据打通支付宝小程序,之前已经打通了微信小程序,现在根据支付宝小程序的开发文档在之前的模板上面做修改. 在修改模板的过程中,总结一下双方功能和语法糖的不同之处. 框架: a ...

  4. 微信小程序框架分析小练手(三)——仿香哈菜谱小程序制作

    香哈菜谱是一款围绕美食而成的小程序,在这里可以查看各式各样的菜谱. 一.打开微信开发者工具,新建一个项目:xhcp.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标.美食轮播图片.宫格导航图 ...

  5. 微信小程序框架分析小练手(二)——天气微信小程序制作

    简单的天气微信小程序. 一.首先,打开微信开发者工具,新建一个项目:weather.如下图: 二.进入app.json中,修改导航栏标题为“贵州天气网”. 三.进入index.wxml,进行当天天气情 ...

  6. 微信小程序 - 视图层 | 基础语法

    视图层 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 类似前端HTML 一.数据绑定 普通语法 test.wxml ...

  7. 微信小程序框架分析小练手(一)——猫眼电影底部标签导航制作

    旧版猫眼电影底部有4个标签导航:电影.影院.发现.我的,如下图所示: 一.首先,打开微信开发者工具,新建一个项目:movie.如下图: 二.建立如下的一些目录: 三.将底部标签导航图标的素材放到ima ...

  8. 微信小程序 教程及示例

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...

  9. 微信小程序资料集合

    一:官方地址集合: 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461 2: ...

随机推荐

  1. [LeetCode] Edit Distance 编辑距离

    Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...

  2. 记一次企业级爬虫系统升级改造(二):基于AngleSharp实现的抓取服务

    爬虫系统升级改造正式启动: 在第一篇文章,博主主要介绍了本次改造的爬虫系统的业务背景与全局规划构思: 未来Support云系统,不仅仅是爬虫系统,是集爬取数据.数据建模处理统计分析.支持全文检索资源库 ...

  3. 【C#】菜单功能,将剪贴板JSON内容或者xml内容直接粘贴为类

    VS 2015菜单功能,将剪贴板JSON内容或者xml内容直接粘贴为类

  4. js兼容性

    1.getElementByClassName 在使用原生JavaScript时,获取类选择符时,即使用getElementByClassName,它在Firefox和IE下是不能兼容. Firefo ...

  5. 关于CAJViewer 无法获取document路径问题

    修改注册表 进入注册表编辑器: win+R >>输入 regedit  如下图: 修改关键注册表项(两项相同值应同时修改) 1.HKEY_CURRENT_USER\Software\Mic ...

  6. bzoj 4003

    左偏树... 打两个标记...和线段树一样,先下放cheng再下放*. 每回合并子树就行了. #include<iostream> #include<cstdio> #incl ...

  7. jquery使用案例

    表单验证 Dom实现表单验证 通过在form标签的submit上绑定一个onclick事件,用户点击事,触发这个事件,执行Checkvalid()函数进行对表单中的元素值验证,验证通过之后,继续让su ...

  8. document.documentElement.clientHeight 和 $(window).height() 无法正确获取页面可视区高度

    背景: 弹出层插件(自适应) 实现过程中突然发现在获取可视区高度时,无论document.documentElement.clientHeight 还是 $(window).height()都无法正确 ...

  9. C# .Net :Excel NPOI导入导出操作教程之将Excel文件读取并写到数据库表,示例分享

    using (FileStream fileReader = File.OpenRead(@"C:\Users\Administrator\Desktop\112.xls"))   ...

  10. ES6箭头函数与展开运算符

    箭头函数:省去了关键字function和return: eg: reduce=(a,b)=>a+b;//返回a+b的值 redduce=(a,b)=>{console.log(a);con ...