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

(一) 是什么

官方说明:( )是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构

在前面我们就已经提过,,就可以理解为我们传统页面中的,它是微信为我们提供的一套标签语言,可以说它就是我们小程序的脸面(虽然没经过装饰前不一定光鲜亮丽),中 页面就作为我们一些逻辑行为的入口,以及效果展示的承载者。

再大白话一点:你所看到的小程序页面长什么样(不涉及背后做了什么行为,只说表面),就是 (主要) + (美化) 实现的

这一篇,我们主要涉及到的是 中例如数据绑定、或者运算等等,但是学习之前,很显然,我们需要认识几个常见的标签,后面我们会总结一些常用的标签,下面会用到的有:

、 > 还有一些标签,大家去看官网文档就可以了,写的非常清楚,我们这里重点还是说一下关于其中的一些标签语法问题

官网——语法文档

官网——组件文档

看一下效果

虽然还不涉及到什么页面的美化,以及复杂的标签,不过一个极为简单的静态页面现在已经可以构造出来了,归根结底,我们最后都是要进行前后台数据的交互的,而微信小程序就为我们提供了很多很好用的用法,能很快的进行数据的绑定操作

有一个前提条件,我们先模拟一些数据,我们只需要在页面的 文件中的 对象中定义小程序初始化的数据,例如下面代码,我们随便拿一些常见的数据类型来模拟一下

如何在 标签组件中进行数据的绑定其实是非常简单的,微信小程序中通过 来解析刚才在 中模拟的变量

要注意:直接通过 解析的变量都是 页面 文件中 --> 下的:字符串

字符串内容直接用两个大括括住接收就可以了,在上面我们有这样的定义:

所以直接括住 就可以获取到后面的值了:数值

数值也是一样直接可以获取:布尔类型

布尔类型第一个代码是直接打印出其布尔类型 或者

而下面配合 就可以实现是否选中的效果:对象

对象这块如果你直接打印 就会输出一个 类型,所以如果想要拿到对象的属性值,一定要指定到具体的属性

看一下上述所有的绑定效果

例如我们 组件的 值前缀是固定的 后面就是用户的序,这时候就可以通过变量来进行巧妙的解析到属性中了

注:不要轻易的乱加空格,否则可能会读取失败例如:

看一下 的源码 这个属性中已经进行了拼接,这种方式同样还会常用在 或者 中,配合三元运行能不错的实现一些需求,下面我们会提到

首先我们依旧定义一些数据,三个整数,和两个字符串

直接在 中进行 加减乘除等的运算,直接就可以得到结算的结果,例如:

如果是字符串类型的数据,利用 进行运算,结果是一个拼接的效果

这个就是常见的 判断,例如使用 这个属性,那么就只有在后面的表达式为 的情况下才会显示文本 大于 0

三元运算的应用场景还是很多的(等式 ? : 情况,的情况)

三元补充:

通过在属性中解析变量的方式,可以达到根据变量的值,来指定不同的 名,以显示不同的样式

例如我们的 样式是这样的, 是我们共用的,所以直接写在属性中就可以了,而究竟是用 - 还是 - 就可以通过一个变量来操纵,例如我们下面的 就是在 里 中定义的一个 布尔类型的变量

当 为 就执行 就是这样的 为 就是用另一个,我们就可以通过 控制变量值来进行不同的显示

看一下上述所有运算的执行结果(不含补充的结果)

依旧我们给一些模拟数据,一个是 这样的对象内部有一些属性,还有一个就是 学生,其中有三个学生的数据

如果我们接受到了后台的一些或者数组等内容,循环遍历是一个非常常用的操作

组件(标签)上使用 就可以绑定一个数组或内容,就可用数组中各项的数据重复渲染该组件

先举个例子

我们分别来解释一下:

如果传这个 值,会有一个警告弹出

嵌套的正确写法

再举一个例子(遍历对象的所有属性):

看一下执行效果

如果我们使用两种不同的组件(标签)看看最终渲染出来的结果有什么区别呢?

方法一( 标签)

方法二( 标签)

通过控制台中 界面,可以看到,只有在 组件下遍历内容时才真正的生成了 结构,而直接使用 则只是将内容重复写了几次,不会变成真正的元素

这块理解没什么难点,无非就是关于逻辑的几种判断,看一个例子就清楚了

说明: 是在 中模拟的一个数据,分别赋予 或者其他的 例如 ,会根据逻辑值显示不同的内容

补充用法():

通过上面的 等可以控制组件例如 的显示,而有一个属性 同样可以实现根据逻辑值控制组件的显示

例如给 传入一个 就会显示出来

那么既然一定程度上都可以达到这种效果,我们选择那个呢?

先来看一下

看一下渲染出来的结构,关于 的那块直接就没有渲染出来了,只有 的那个,由此可以得出:

所以,当标签不总是切换显示的时候,可以考虑先用 ,标签切换频繁的时候用

模板的字面意思就是,一个可以应用在多处,通用的一个版块,如何去用呢?

使用 属性,作为模板的名字。然后在 内定义代码片段

我们需要在想引用模板的页面中引入模板, 提供两种文件引用方式 和

如果没有效果,可以看一下是不是路径写错了,要根据自己定义的来写哦

这两者的区别就是 有作用域的问题,官网这里写的挺清楚,我直接贴一下:

有作用域的概念,即只会 目标文件中定义的 ,而不会 目标文件 的 。

如: , ,在中可以使用定义的,在中可以使用定义的,但是不能使用定义的。

使用 属性,需要的使用的模板,也就是与上面的 一致就可以了,然后将模板所需要的 传入,如(直接传入):

赋值方式还有一种常用的

它的意思就是将调用这个模板页面中的 对象变量赋值给这个模板,三个点就是一个扩展运算符,作用就是将这个 对象展开

例如

© 版权声明
THE END
分享