作者:靜trevis_263 | 来源:互联网 | 2017-05-11 02:02
微信小程序中wxml里Mustache语法不可忽视,让我这个以前没搞过前端的iOS的一脸懵逼。。。上网查了查。。。记录一下。
什么是Mustache?
Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档。当同一个模板中想要调用不同的函数来渲染画面,在已经自定义好了的前提下,可以在渲染页面时对传入的参数进行手动判断。
比如小程序的wxml中的代码:
// 这里的{{ }}就是Mustache的语法。
{{userInfo.nickName}} , Mustache的模板语法很简单,就那么几个:
{{keyName}}
{{{keyName}}}
{{#keyName}} {{/keyName}}
{{^keyName}} {{/keyName}}
{{.}}
{{!comments}}
{{>partials}} {{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 {{#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 {{^keyName}} {{/keyName}} 异常输出
该语法与{{#keyName}} {{/keyName}}类似,不同在于它是当keyName值为null, undefined, false时才渲染输出该区块内容。比如:
var data = {
"name" : " weChat "
};
var tpl = ‘{{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}’;
var output = Mustache.render(tpl, data);
返回:没找到 nothing 键名就会渲染这段 {{.}}表示枚举,用于循环输出整个数组,例如:
var data = {
"product": ["Macbook ","iPhone ","iPod ","iPad "]
}
var tpl = '{{#product}} {{.}}
{{/product}}';
var html = Mustache.render(tpl, data);
返回:Macbook
iPhone
iPod
iPad
{{! }}表示注释 {{!这里是注释}} {{>partials}}以>开始表示子模块,当结构比较复杂时,我们可以使用该语法将复杂的结构拆分成几个小的子模块。
var tpl = "{{namme}} "
var partials = {msg: "{{#msg}}{{sex}} {{age}} {{hobit}} {{/msg}
var html = Mustache.render(tpl, data, partials);
//输出:
xiaohua {{{data}}}{{data}} 输出会将等特殊字符转译,如果想保持内容原样输出可以使用{{{}}},
var tpl = '{{#msg}} {{{age}}}
{{/msg}}'
//输出:
22
小程序 这么多大致就能用了,如果发现什么其他的再更新。。。
以上就是微信小程序开发之Mustache语法的代码实例分享的详细内容,更多请关注 第一PHP社区 其它相关文章!
推荐阅读
近期,关于Android开发行业的讨论在多个平台上热度不减,许多人担忧其未来发展。本文将探讨当前Android开发市场的现状、薪资水平及职业选择建议。 ...
[详细]
蜡笔小新 2024-11-21 18:08:07
本指南旨在帮助开发者在未使用CodeIgniter框架的情况下,如何独立使用其强大的图像处理功能,包括图像尺寸调整、创建缩略图、裁剪、旋转及添加水印等。 ...
[详细]
蜡笔小新 2024-11-20 19:57:35
本文详细介绍了如何在HTML前端开发中利用UINavigationController进行页面管理和数据传递,适合初学者和有一定基础的开发者学习。 ...
[详细]
蜡笔小新 2024-11-20 09:46:39
本文详细介绍如何在微信小程序中实现一个动态且可视化的电影选座组件,提高用户体验。通过合理的布局和交互设计,使用户能够轻松选择心仪的座位。 ...
[详细]
蜡笔小新 2024-11-19 15:36:11
本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术,包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ...
[详细]
蜡笔小新 2024-11-22 16:27:56
默认情况下,Git 使用 Nano 编辑器进行提交信息的编辑,但如果您更喜欢使用 Vim,可以通过简单的配置更改来实现这一变化。本文将指导您如何通过修改全局配置文件来设置 Vim 作为默认的 Git 提交编辑器。 ...
[详细]
蜡笔小新 2024-11-22 14:08:35
本文详细介绍了如何在Notepad++中配置Markdown语法高亮和实时预览功能,包括必要的插件安装和设置步骤。 ...
[详细]
蜡笔小新 2024-11-22 13:03:49
探讨如何在映射文件中处理重复的属性字段,以避免数据操作时出现错误。 ...
[详细]
蜡笔小新 2024-11-22 11:48:50
题目描述:假设一个试题库中有n道试题。每道试题都标明了所属类别。同一道题可能有多个类别属性。现要从题库中抽取m道题组成试卷。并要求试卷包含指定类型的试题。试设计一个满足要求的组卷算 ...
[详细]
蜡笔小新 2024-11-22 11:33:55
本文探讨了如何在PHP与MySQL环境中实现高效的分页查询,包括基本的分页实现、性能优化技巧以及高级的分页策略。 ...
[详细]
蜡笔小新 2024-11-22 05:45:48
在尝试加载支持推送通知的iOS应用程序的Ad Hoc构建时,遇到了‘no valid aps-environment entitlement found for application’的错误提示。本文将探讨此错误的原因及多种可能的解决方案。 ...
[详细]
蜡笔小新 2024-11-21 19:26:31
本文探讨了程序员这一职业的本质,认为他们是专注于问题解决的专业人士。文章深入分析了他们的日常工作状态、个人品质以及面对挑战时的态度,强调了编程不仅是一项技术活动,更是个人成长和精神修炼的过程。 ...
[详细]
蜡笔小新 2024-11-21 18:56:08
在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ...
[详细]
蜡笔小新 2024-11-21 18:32:57
本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ...
[详细]
蜡笔小新 2024-11-21 18:16:19
在处理大数据量的SQL分页查询时,通常需要执行两次查询来分别获取数据和总记录数。本文介绍了一种优化方法,通过单次查询同时返回分页数据和总记录数,从而提高查询效率。 ...
[详细]
蜡笔小新 2024-11-20 13:54:29
靜trevis_263
这个家伙很懒,什么也没留下!