作者:靜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社区 其它相关文章!
推荐阅读
当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ...
[详细]
蜡笔小新 2024-10-31 10:28:12
wxParse 0.3 是一款专为微信小程序设计的高级富文本解析器,支持 HTML 和 Markdown 转换为 WXML 可视化格式。该组件不仅能够处理复杂的多级嵌套结构,还全面支持 Emoji 表情,极大地提升了内容展示的多样性和用户体验。 ...
[详细]
蜡笔小新 2024-11-01 19:12:59
手机上编写和运行PHP代码的最佳软件推荐 ...
[详细]
蜡笔小新 2024-10-27 21:10:40
本文详细介绍了如何在微信小程序中使用JavaScript实现图片上传至PHP服务器的方法。通过具体的代码示例,帮助开发者掌握从客户端选择图片、处理图片数据到服务器端接收并保存图片的完整流程。同时,文章还提供了常见问题的解决方案和优化建议,确保上传过程的高效性和稳定性。 ...
[详细]
蜡笔小新 2024-10-27 20:16:58
C#中实现高效UDP数据传输技术 ...
[详细]
蜡笔小新 2024-11-01 22:55:28
本文深入探讨了ASP.NET中ViewState、Cookie和Session三种状态管理技术的区别与应用场景。ViewState主要用于保存页面控件的状态信息,确保在多次往返服务器过程中数据的一致性;Cookie则存储在客户端,适用于保存少量用户偏好设置等非敏感信息;而Session则在服务器端存储数据,适合处理需要跨页面保持的数据。文章详细分析了这三种技术的工作原理及其优缺点,并提供了实际应用中的最佳实践建议。 ...
[详细]
蜡笔小新 2024-11-01 20:27:29
开发了一款基于Python的高效批量文件重命名软件,并集成了wxWidgets图形用户界面,使用cxfreeze将其打包为独立的可执行文件(exe)。该工具适用于需要频繁处理大量文件的用户,能够显著提高文件管理效率。详细使用说明包含在软件压缩包内。开发环境为Python 2.7和wxWidgets 3.0,运行环境要求兼容Windows系统。 ...
[详细]
蜡笔小新 2024-11-01 20:01:49
在微信小程序中实现外部链接跳转,可以通过微信官方提供的组件来完成。具体而言,有以下两种方法:1. 首先,可以通过创建一个新的 `` 组件来加载外部网页。这个组件允许在小程序内部嵌入一个网页视图,从而实现外部链接的展示和交互。2. 另一种方法是使用 `wx.navigateToMiniProgram` API,通过调用该接口可以跳转到其他已安装的小程序,实现更丰富的跨应用交互功能。这两种方法各有优缺点,开发者可以根据实际需求选择合适的方式。 ...
[详细]
蜡笔小新 2024-11-01 16:27:13
在使用 Docker 时,通过 Vim 编辑 Dockerfile 文件时遇到了错误提示:“检测到名为 .dockerfile.swp 的交换文件”。这一问题通常是因为上次编辑该文件时意外中断,导致系统生成了临时的交换文件。为了解决这个问题,可以手动删除该交换文件或使用 Vim 的恢复功能来恢复未保存的更改。 ...
[详细]
蜡笔小新 2024-10-31 12:21:47
本文详细探讨了MySQL数据库的性能优化与参数调整技巧,旨在帮助数据库管理员和开发人员提升系统的运行效率。内容涵盖索引优化、查询优化、配置参数调整等方面,结合实际案例进行深入分析,提供实用的操作建议。此外,还介绍了常见的性能监控工具和方法,助力读者全面掌握MySQL性能优化的核心技能。 ...
[详细]
蜡笔小新 2024-10-31 03:13:07
在Spring框架中,基于Schema的异常通知与环绕通知的实现方法具有重要的实践价值。首先,对于异常通知,需要创建一个实现ThrowsAdvice接口的通知类。尽管ThrowsAdvice接口本身不包含任何方法,但开发者需自定义方法来处理异常情况。此外,环绕通知则通过实现MethodInterceptor接口来实现,允许在方法调用前后执行特定逻辑,从而增强功能或进行必要的控制。这两种通知机制的结合使用,能够有效提升应用程序的健壮性和灵活性。 ...
[详细]
蜡笔小新 2024-10-30 13:30:04
2019年,多家独角兽企业高薪聘请Python工程师,这引发了对高效学习工具的关注。以Duolingo为例,其“边玩边学”的模式为语言学习提供了新思路。类似地,错题本作为一种有效的学习方法,能够帮助学生记录和复习易错题目,从而提高学习效率。教育类应用程序通过整合这些先进的学习策略和技术手段,正逐渐成为提升学生学习效果的重要工具。 ...
[详细]
蜡笔小新 2024-10-29 10:13:55
本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移,涵盖前端、后端及Android相关知识点。通过具体实例和源代码,展示了如何精准抓取并迁移网站内容,适合对Python爬虫实战感兴趣的开发者参考。 ...
[详细]
蜡笔小新 2024-10-28 20:00:28
本文将深入探讨微信小程序页面的设计与优化方法,旨在帮助开发者高效构建功能完备且用户体验良好的小程序。通过实例分析与技术详解,读者能够掌握从页面布局到功能实现的全过程,提升开发技能与应用质量。 ...
[详细]
蜡笔小新 2024-10-28 14:33:39
微信小程序的核心功能与优势在于其独特的运行环境,区别于传统网页应用,它不依赖于浏览器的BOM和DOM对象,因此无法通过常规的`console.log(window)`或`console.log(document)`获取相关信息。此外,小程序还具备一系列专有特性,如高效的数据绑定、丰富的API接口以及良好的用户交互体验,这些都为开发者提供了更为灵活和强大的开发工具,使得小程序能够更好地适应移动互联网时代的需求。 ...
[详细]
蜡笔小新 2024-10-27 14:45:58
靜trevis_263
这个家伙很懒,什么也没留下!