VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动

微信小程序wxml模板语法总结(微信小程序WXML标签)

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

本文给大家带来一些关于微信小程序的知识,包括WXML模板语法的相关内容,包括数据绑定、事件绑定、条件渲染、列表渲染等等。下面就来看看吧,希望对你有帮助。

微信小程序wxml模板语法总结(微信小程序WXML标签)

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

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

②使用WXML中的数据

2.在数据中定义页面的数据。在。js文件对应的页面,只需将数据定义成数据对象:

3.Mustache语法的格式将data中的数据绑定到页面进行呈现,变量可以用Mustache语法(双花括号)包装。类似于vue中的插值表达式,语法格式为:

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

该页面的结构如下:

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

该页面的结构如下:

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

该页面的结构如下:

8.算术运算

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

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

绑定模式

事件描述

龙头

点击或绑定:点击

手指一碰马上离开,类似HTML中的click事件。

投入

绑定输入或绑定:输入

文本框的输入事件。

变化

Bindchange或bind:更改

当状态改变时触发。

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

属性

类型

解释

类型

线

事件类型

时间戳

整数

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

目标

目标

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

当前目标

目标

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

详述

目标

附加说明

高光

排列

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

参数信息

排列

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

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

当内部按钮被点击时,点击事件以冒泡的方式向外扩散,也会触发外部视图的tap事件处理功能。

此时,对于外层的视图:

1.target指的是触发事件的源组件,所以e.target是内部按钮组件。

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

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

①使用bindtap,可以绑定组件的点击触摸事件,语法如下:

②在中定义相应的事件处理函数。js文件的页面,而事件参数是由形式参数event(一般缩写为E)接收的:

6.在事件处理函数中为数据中的数据赋值。通过调用this.setData(dataObject)方法,可以为页面数据中的数据重新赋值。示例如下:

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

因为小程序会把bindtap的属性值当作事件名,相当于调用一个名为btnHandler(123)的事件处理程序。

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

最终:

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

2值2将被解析为参数的值。

在事件处理函数中,可以通过event.target.dataset的参数名获取具体参数的值,示例代码如下:

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

①使用bindinput,您可以输入文本框绑定的事件:

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

9.实现文本框和数据的数据同步。步骤:

①定义数据

②渲染结构

③美化风格

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

定义数据:

渲染结构:

美化风格:

绑定输入事件处理程序:

Mx模板语法-条件渲染:1。wx:if在applet中,使用wx:if = ;{ { condition } } 要确定代码块是否需要呈现,请执行以下操作:

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

2.组合使用wx:如果要同时控制多个组件的显示和隐藏,可以使用< block gt lt/block gt;用标签包装多个组件,并将它们放入

注意:< block gt它不是一个组件,只是一个包装好的容器,不会在页面中做任何渲染。

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

4.WX:IF和hidden ①不同操作模式的比较

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

2隐藏在切换风格的方式中(显示:无/块;)来控制元素的显示和隐藏。

②使用建议。

1隐藏建议频繁切换。

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

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

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

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

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

示例代码如下:

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

【相关学习推荐:小程序学习教程】以上是微信小程序WXML模板语法总结的详细内容。请多关注主机参考其他相关文章!

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

本文由主机参考刊发,转载请注明:微信小程序wxml模板语法总结(微信小程序WXML标签) https://zhujicankao.com/73590.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 微信小程序wxml模板语法总结(微信小程序WXML标签)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!