微信小程序WXML模板语法总结（微信小程序模板csdn）

这篇文章给大家带来了一些关于微信小程序的知识，主要介绍了关于wxml模板语法的相关内容，包括数据绑定、事件绑定、条件渲染、列表渲染等等。下面就让我们一起来看看吧，希望能帮到你。

【相关学习推荐:小程序学习教程】

WXML模板语法-数据绑定1。数据绑定的基本原则①在数据中定义数据。

②使用WXML中的数据

2.在相应的数据中定义页面的数据。js文件，并将数据定义到数据对象中:

3.mustache语法的格式将data中的数据绑定到页面进行呈现，并使用Mustache语法（双括号）包装变量。与vue中的插值表达式类似，语法格式为:

4.小胡子语法绑定的应用场景内容绑定属性运算（三元运算、算术运算等。) 5.动态绑定内容页面的数据如下:

该页面的结构如下:

6.动态绑定属性页的数据如下:

该页面的结构如下:

7.三元操作页面上的数据如下:

该页面的结构如下:

8.算术运算

WXML模板语法-事件绑定:1。什么是事件？事件是从呈现层到逻辑层的通信模式。通过事件，用户在呈现层的行为可以反馈到逻辑层进行业务处理。

2.小程序中常用的事件类型

绑定模式

事件描述

轻敲，水龙头

点击或绑定:点击

手指触摸并立即离开，类似于HTML中的click事件。

投入

绑定输入或绑定:输入

文本框的输入事件

变化

绑定更改或绑定:更改

当状态改变时触发

3.事件对象的属性列表当事件回调被触发时，会收到一个事件对象事件，其详细属性如下表所示:

属性

类型

解释

类型

线

事件类型

时间戳

整数

自页面打开触发事件以来经过的毫秒数。

目标

目标

触发事件的组件的一些属性值的集合。

当前目标

目标

当前组件的一些属性值的集合。

详述

目标

附加说明

高光

排列

触摸事件，当前停留在屏幕中的触摸点信息的数组。

改变接触

排列

触摸事件，当前变化的触摸点信息的数组。

4.target和currentTarget的区别在于触发事件的源组件，而currentTarget是当前事件绑定到的组件。例子如下:

当点击内部按钮时，点击事件将以冒泡的方式向外传播，这也将触发外部视图的tap事件处理程序函数。

此时，对于外部视图:

1.target指的是触发事件的源组件，因此e.target是内部按钮组件。

2.currentTarget指的是当前触发事件的组件，因此e.currentTarget是当前视图组件。

5.BindTap的语法格式在小程序中，HTML中没有onclick鼠标单击事件，而是使用一个Tap事件来响应用户的触摸行为。

（1）通过bindtap，可以为组件绑定点击触摸事件，语法如下:

②在中定义相应的事件处理函数。js文件，事件参数通过形式参数event（一般缩写为E）接收:

6.为事件处理程序中的数据赋值。通过调用this . setdata（data object）方法，可以再次为页面数据中的数据赋值。示例如下:

7.事件传递小程序中的事件传递参数比较特殊，在绑定事件时不可能同时向事件处理程序传递参数。例如，以下代码将无法正常工作:

因为applet将bindtap的属性值视为事件名称，所以它相当于调用名为BTN handler（123）的事件处理程序。

您可以为组件提供data-*自定义属性参数，其中*表示参数的名称。示例代码如下:

最后:

1信息将被解析为参数的名称。

2值2将被解释为参数值。

在事件处理程序中，可以通过event.target.dataset的名称获取特定参数的值。示例代码如下:

8.小程序中bindinput的语法格式，输入事件用于响应文本框的输入事件。语法格式如下:

（1）通过bindinput，可以为文本框绑定输入事件:

②在中定义事件处理函数。页面的js文件:

9.实现文本框和数据之间的数据同步:

①定义数据

②渲染结构

③美化风格

④绑定输入事件处理程序。

定义数据:

渲染结构:

美化风格:

绑定输入事件处理程序:

WXML模板语法-条件呈现:1。wx:if在子视图中，使用wx:if =“{ { condition } }“确定是否需要呈现代码块:

您还可以使用wx:elif和wx:else来添加else判断:

2.组合wx:if如果想一次控制多个组件的显示和隐藏，可以使用一个标签来封装多个组件，并在标签上使用wx:if控件属性。例子如下:

注意:它不是一个组件，它只是一个包容器，不会在页面中呈现。

3.在小程序中隐藏，直接使用hidden =“{ { condition } }“也可以控制元素的显示和隐藏:

4.wx: if和hidden ①的对比操作方式不同。

1 wx:if通过动态创建和移除元素来控制元素的显示和隐藏。

2种隐藏开关样式（显示:无/块；）来控制元素的显示和隐藏。

②使用建议

1频繁切换时，建议使用隐藏。

2当控制条件复杂时，建议使用wx:if配合wx:elif和wx:else在显示和隐藏之间切换。

WXML模板语法-列表呈现1。wx:for wx:for可以根据指定的数组循环呈现重复的组件结构。语法示例如下:

默认情况下，当前循环项的索引由index表示；当前循环项由item表示。

2.手动指定当前项的索引和变量名* 1使用wx:for-index指定当前循环项的索引的变量名。

使用wx:for-item指定当前项的变量名。

示例代码如下:

3.wx: key的使用类似于Vue列表渲染中的:key。小程序实现列表渲染时，也建议为渲染后的列表项指定唯一的键值，从而提高渲染效率。示例代码如下:

【相关学习推荐:小程序学习教程】

以上是微信小程序WXML模板语法总结的详细内容。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 如何在小程序中创建页面二维码
• 小程序如何动态制作小程序码分析（如何在小程序中动态生成小程序二维码图片）
• 如何解决小程序中的重启跳转错误（小程序重启）
• 教你如何部署微信小程序并上线（如何在线部署小程序）

本文由主机参考刊发，转载请注明：微信小程序WXML模板语法总结（微信小程序模板csdn） https://zhujicankao.com/103931.html