入门微信小程序四(wxml wxss模板语法)

225 阅读2分钟

知识点:

◆ WXML 模板语法
◆ WXSS 模板样式

一、wxml模板语法

1、数据绑定

1、数据绑定的基本原则

① 在 data 中定义数据
② 在 WXML 中使用数据

2、在data中定义页面的数据

在页面对应的 .js 文件中,把数据定义到 data 对象中即可
在这里插入图片描述

  1. Mustache 语法的格式

把data中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。语法格式为:
在这里插入图片描述

  1. Mustache 语法的应用场景

Mustache 语法的主要应用场景如下:
⚫ 绑定内容
⚫ 绑定属性
⚫ 运算(三元运算、算术运算等)

5、动态绑定内容
在这里插入图片描述
6. 动态绑定属性
在这里插入图片描述
7. 三元运算
在这里插入图片描述
8. 算数运算
在这里插入图片描述

2、事件绑定

1、事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
在这里插入图片描述
2. 小程序中常用的事件
在这里插入图片描述
3、 事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:
在这里插入图片描述
3. target 和 currentTarget 的区别
4.
5. bindtap 的语法格式
在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。
① 通过 bindtap,可以为组件绑定 tap 触摸事件,语法如下:
在这里插入图片描述
② 在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参 event(一般简写成 e) 来接收:
在这里插入图片描述
6. 在事件处理函数中为 data 中的数据赋值
通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:
在这里插入图片描述
7. 事件传参
小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代码将不能正
常工作:
因为小程序会把 bindtap 的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123)
的事件处理函数。
在这里插入图片描述
在这里插入图片描述
在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:
在这里插入图片描述
8.bindinput 的语法格式
在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:
① 通过 bindinput,可以为文本框绑定输入事件:
在这里插入图片描述
在这里插入图片描述