02小程序的WXML 和事件

2023-10-28 13:13:10

WXML语法概述：

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

微信官方教程如下：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

特点：

布局的方式跟HTML是一模一样的。
标签的名字不再是传统的HTML的了，而是使用微信自己定义的一套，所以写代码的时候完全使用之前写HTML的方式去写，只不过改个标签名就可以了。
WXML的语法，和一些模板语法比如Django中的模板语法非常的类似。

WXML数据绑定：

WXML 中的动态数据均来自对应 Page 的 data。（wxml 可以使用 js 中 Page() 函数的 data 中的数据）

我们的数据都是放在 js 中，从 Js中渲染到 wxml 中，就是通过数据绑定将 js 中的数据渲染到 wxml 中。

例如：我们在 js中如下定义数据：

那么使用的时候就可以直接在 wxml 中使用，不过使用的语法是使用双括号的方法！！！如下：

也可以在把对象渲染到 wxml 中，

例如：

使用的时候：

也可以在把数组渲染到 wxml 中，可以通过下标进行操作：

可以在花括号中进行一些简单的运算（判断和四则运算）：

注意：在标签的属性中的时候双括号外要加上双引号！！！

所以，只有放在双括号里面的才是作为数据来解析，

关于变量渲染的总结：

使用双大花括号。
获取对象的值，通过下标获取数组中的值。
可以做运算，比如判断，四则运算等。
总而言之一句话：需要使用js中传过来的值，就必须使用双大花括号。

WXML条件渲染：

当前标签在满足一定的条件下才会被渲染，这就是条件渲染！

wx:if

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

block wx:if

使用block 可以做到当满足一个条件的时候可以渲染多个标签，

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

还有需要注意的是：在条件判断标签中间不能有其它不相关的标签，

例如如下就会报错：

WXML列表渲染（循环一个列表）：

wxml 中循环列表的基本方法：

通过语法wx:for="{{列表}}"来渲染一个列表

我们可以使用 item 变量来遍历列表中的数据，

我们可以使用 index 变量来遍历列表中的数据，

渲染之后的结果是：

默认的变量是 item 和 index ，也可以自己定义：

循环中，默认的下标名称是index，默认的值的名称是item。如果想要修改循环列表的值和下标的名称，那么可以通过wx:for-index和wx:for-item来指定。示例代码如下：

此时就可以使用 value 变量和 idx 变量了，

循环中渲染多个标签：

如果想要在循环中渲染多个标签，那么也可以通过block来实现。示例代码如下：

99乘法表例子：

此时的数据就准备好了，然后再通过 wxss 来将数据渲染之后即可，

此时效果如下：

总结：

效果如下：

WXML列表渲染之 wx:key ：

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供：

1，字符串或者数字，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。在写的时候，直接写这个 property 的名字就可以了，不需要写item.property的形式，并且不需要加中括号。
2，保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，*框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

及时列表中的组件没有发生状态改变，那么也建议使用wx:key。因为如果不使用，那么以后重新渲染的时候，就会把之前组件销毁掉，然后重新创建，性能会很低。

如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

一句话，提供wx:key 就不会重新创建，不提供要重新创建，所以渲染列表时一定要提供wx:key

补充：js中的splice （）方法：

arrayObject.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。