微信小程序学习（二）——WXML

最新推荐文章于 2024-07-25 18:18:28 发布

LullabyLY

最新推荐文章于 2024-07-25 18:18:28 发布

阅读量963

点赞数 1

本文链接：https://blog.csdn.net/qq_42853241/article/details/89306074

版权

微信小程序学习（一）——组件
昨天是小程序组件的简单学习，今天就继续WXML的学习。

WXML（WeiXin Markup Language）是框架设计的一套标签语言，用来描述小程序页面的结构。

数据绑定
条件渲染
列表渲染
模板
事件
引用

数据绑定：

动态数据均来自data，在js中访问data用this.data，改变用setData()

简单绑定：
（Mustache语法：双大括号将变量包起来，例如{{message}}）
作用于： 内容、组件属性（id=”item-{{id}}”）、控制属性（wx:if=”{{condition}}”）
运算： 可在{{}}中进行简单的运算
           三元运算
           算术运算
           逻辑判断：wx:if=”{{length>5}}”
          字符串运算：{{“hello”+name}}
组合： 可以在Mustache内直接进行组合，构成新的对象或者数组
          数组组合：wx.for=”{{[zero,1,2,3,4]}}”
          对象组合：

<template name=”1”>
<view>
<text>{{for}}</text>
<text>{{bar}}</text>
</view>
</template>
<template is=”1” data=”{{for:a,bar:b}}”></template>

                          也可以用扩展运算符…来将一个对象展开
在这里插入图片描述
                          如果对象的key和value相同，也可以间接表达

                           上述方式（对象组合）可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面
在这里插入图片描述

条件渲染：

wx:if=”{{condition}}”判断是否渲染该代码块，也可以用wx:elif和wx:else来添加一个else块
block wx:if：因为wx:if是一个控制属性，需要将她添加到一个标签上，但是如果我们想一次性判断多个组件标签，我们可以使用一个<block />标签将多个组件包装起来，并在上边使用wx:if控制属性。<block />不是组件，只是一个包装元素，只接受控制属性。

列表渲染：

wx:for：
使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件，默认数组当前项的下标变量名默认为index，数组当前项的变量名默认为item

wx:for也可以嵌套，九九乘法表：

模板：

template，可在模板中定义代码片段，然后在不同的地方调用

定义模板：
使用name属性，作为模板名字
使用模板：
使用is属性，声明需要的使用的模板，然后将模板所需要的data传入。
is属性可以使用Mustache语法，来决定具体需要渲染哪个模板

模板只能使用data传入数据

事件：

事件概述：
事件： 用户对界面操作的响应
绑定事件： 以bind或catch开头，然后跟上事件的类型，如 bindtap,catchtouchstart

bind事件不会阻止冒泡事件向上冒泡，catch可以阻止冒泡事件向上冒泡

事件对象：
type，通用事件类型
timeStamp，该页面打开到触发事件所经过的毫秒数
target，触发事件的源组件

currentTarget，事件绑定的当前组件

dataset，在组件中可以定义数据，这些数据将会通过事件传递给SERVICE。
书写方式：以data-开头，多个单词由连接符-连接，不能有大写（大写会自动转成小写），例如data-element-type在event.target.dataset中会将连字符转成驼峰elementType
touches：是一个触摸点的数组

detail：特殊事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息
事件分类：
冒泡事件：当组件上的事件被触发后，该组件会向父节点传递
非冒泡事件：当组件上的事件被触发后，该组件不会向父节点传递

bind事件不会阻止冒泡事件向上冒泡，catch可以阻止冒泡事件向上冒泡