微信小程序技术分析: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

时间: 2024-10-07 05:02:49

微信小程序技术分析:Mustache语法要点总结的相关文章

微信小程序现状分析

概述 曾记得在微信小程序还没有上线的时候,大家都是翘首以待,希望在张小龙,在企鹅的带领下,走出区别于原生开发的另一条移动开发的道路,我也是一直关注着,知道1月9号,微信小程序终于对外开放了,作为第一批内测开发者,我也是在第一时间启动了微信小程序的开发. 其开发也确实相对简单,不过体验上嘛,可能和原生有一些差距,体验上有点类似于企业的x5渲染的webview.不过因为其高度依赖于微信这个平台,也限制了其开放性,所以我当时在csdn的内部群语言:微信小程序不会完全取代原生app,甚至都不可能威胁到原

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

周末万里虎抽空体验了下微信小程序的DEMO,对小程序的开发有了一个基础的了解与认识,今天就来和大家分享一下我对小程序的看法. 从官方DEMO来看,小程序在技术架构上非常清晰易懂.JS负责业务逻辑的实现,而表现层则WXML和WXSS来共同实现,前者其实就是一种微信定义的模板语言,而后者类似CSS.所以对于擅长前端开发,或者WEB开发的广大开发者而已,小程序的开发可谓降低了不少门槛. 从上面的微信小程序架构图上可以清晰的看出,小程序借助的是JSBridge实现了对底层API接口的调用,所以在小程序里

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

简单的天气微信小程序. 一.首先,打开微信开发者工具,新建一个项目:weather.如下图: 二.进入app.json中,修改导航栏标题为“贵州天气网”. 三.进入index.wxml,进行当天天气情况的界面布局,包括温度.最低温度和最高温度.天气情况.城市.星期.风向情况.如下图: 四.进入index.js,在data里提供天气数据,让这些数据在界面里显示出来: 五.进入index.wxml,将data里提供的天气数据绑定到页面里: 界面效果如下: 六.进入index.wxss,为index.

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

微信小程序购物商城系统开发系列-工具篇

微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将给予微信小程序进行研发.基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城. 本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器. 小程序开发文档地址https://mp.weixi

微信小程序购物商城系统开发系列

微信小程序购物商城系统开发系列 微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操作系统.新的生态,未来大部分应用场景都将给予微信小程序进行研发.基于对它的敬畏以及便于大家快速上手,特整理微信小程序商城开发系列,未来将持续增加微信小程序技术文章,让大家可全面了解如何快速开发微信小程序商城. 本篇文章主要介绍微信小程序官方提供的开发工具,俗话说:欲工善其身,必先利其器. 小程序开发文档地址

微信小程序入门——Mustache语法学习

微信小程序中用到了大量Mustache语法,特发此文学习一下 1.简单的变量调换:{{name}} 1 var data = { "name": "Willy" }; 2 Mustache.render("{{name}} is awesome.",data); 返回成果 Willy is awesome. 2.若是变量含有html的代码的,例如:<br>.<tr>等等而不想转义可以在用{{&name}} 1 va

从程序员的角度分析微信小程序

昨天朋友圈被微信小程序刷爆了. 我赶快在书架上拿出三年前买的书,把上面的土擦干净,压压惊. 作为一个并不是资深的程序员. 从程序员的角度分析一下微信小程序,欢迎指点. 首先吐槽 微信小程序只发了200个邀请号,和我预想的一样,张小龙并没有翻我牌,难道就不能雨露均沾吗? 先来了解下什么是微信小程序. 转自知乎 微信也许重申了"我们是一款约炮软件" 微信还提供了一大堆接口和组件(不好意思,说了句废话). 下面是禅叔的观点: 小程序原理就是用JS调用底层native组件,和React Nat

浅谈高大上的微信小程序中渲染html内容—技术分享

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 前端精品教程:百度网盘下载 后来,小程序增加了「rich-text」组件用于展示富文本内