微信小程序(WXML模板文件一)

本文详细介绍了微信小程序的WXML模板文件,包括页面根元素page、WXML的特性如标签闭合、选择器敏感性,以及WXML的属性、数据绑定、列表渲染、条件渲染、模板使用等方面。重点讨论了wx:if与hidden的区别,以及模板template的使用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

(1)页面根元素
根元素page
每一个页面都具备一个根元素:<page></page>
页面根元素可以在控制台的WXML选项卡中看到
允许在wxss文件中对page根元素进行样式设置

(2)WXML简介
1)WXML 全称是 WeiXin Markup Language,是小程序框架设计的标签语言。
2)WXML 充当的就是类似 HTML 的角色。—(但是也有不同,下)
3)标签闭合编译----WXML 要求标签必须是严格闭合的,没有闭合将会导致编译错误。
在这里插入图片描述
4)WXML中的选择器是大小写敏感

WXML和 HTML不同地方:
①标签名不一致
HTML 经常会用到的标签是 div, p, span;WXML 用的标签是 view, button, text ,map等
②属性不一致
WXML多出wx:if、wx:for等一些属性及表达式(MVVM模式)

数据data初始化
①页面需要显示动态数据必须要定义到data对应的变量中;
②如果该数据在操作过程中发生变化,需要将新数据重新绑定到该变量中,语法为this.setData({属性名:属性值})
③获取data数据语法为this.data.属性名

(3)WXML基本标签
视图容器标签view-----功能:基本视图容器,类似于页面开发时的div标签。
文本标签text-----功能:基本文本信息,类似于span标签。

(4)WXML属性
①属性不一致
②数据驱动案例-----wx:if属性决定是否渲染,注意wx:if后值通过{{}}绑定。
在这里插入图片描述
在这里插入图片描述
数据驱动案例:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
③数据绑定----通过Mustache 即双大括号{{}}语法把变量绑定到界面上,称为数据绑定

(5)WXML语法—列表渲染
默认
数组的当前项的下标默认为 index,当前项默认为 item
指定变量名:
wx:for-item 可以指定数组当前元素的变量名
wx:for-index 可以指定数组当前下标的变量名
案例1:
在这里插入图片描述
在这里插入图片描述
案例2:九九乘法表
在这里插入图片描述
在这里插入图片描述
渲染结果:
在这里插入图片描述
wx:key属性
wx:for通常需要使用 wx:key 来指定列表中项目的唯一的标识符------name,id
体验:
在这里插入图片描述
在这里插入图片描述

但是:小程序无法不支持数组push和unshift等语法。这里用concat达到数组开头添加元素的效果
在这里插入图片描述
在这里插入图片描述

(6)WXML语法—条件渲染

1)wx:if在框架中,使用 wx:if="" 来判断是否需要渲染该代码块
在这里插入图片描述
在这里插入图片描述
wx:if数据:可以用 wx:elif 和 wx:else 实现多路分支
在这里插入图片描述
2)hidden隐藏元素
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
注意局限性:hidden元素对块状布局才生效,对行内元素也生效,但不推荐使用。
**

wx:if vs hidden

**
①wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
②wx:if是惰性的,切换开销大,但初始化开销小。
③hidden组件始终会被渲染,只是简单的控制wxss显示与隐藏。
④一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好。

(7)WXML语法—模板
WXML提供模板template,可以在模板中定义代码片段,然后在不同的地方调用(公共内容)
步骤:
①:定义模板并命名
在这里插入图片描述
②:在其他页面通过import或者include引入
在这里插入图片描述
③:使用 is 属性,声明模板,然后传入data
在这里插入图片描述
在这里插入图片描述
④最终渲染结果
在这里插入图片描述

★★拓展★★
block标签:如果不想要标签多层嵌套,可以在外层使用
在这里插入图片描述

但为什呢不用include引入呢???
import和include区别
(1)import
import 可以文件中使用目标文件定义的 template,正如之前案例所示。
(2)include
include可以将整个代码引入,相当于是拷贝到 include 位置

(8)WXML语法—共同属性
在这里插入图片描述
(9)WXML语法—自定义属性------data-
data-tag="{{info}}"
如何获取自定义属性值------event.currentTarget.dataset.***
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

单击:bindtap
事件绑定:
在这里插入图片描述

☀☀☀☀☀
数据的定义:data选项里—键值对
数据操作:this.setData({})
数据获取:this.data.属性名

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值